From 3114ef138efccd85aef836293b3a5d2063d1ce95 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Tue, 10 Sep 2024 04:48:15 +0200 Subject: [PATCH] Configure baseUrl for dev and prod environments --- frontend/.gitignore | 6 +++- frontend/README.md | 36 +++++++++++++++++-- frontend/angular.json | 6 ++++ .../components/auth/login/login.component.ts | 2 +- .../browse/categories/categories.component.ts | 2 +- .../hero-banner/hero-banner.component.ts | 2 +- frontend/src/app/environments/environment.ts | 8 ----- frontend/src/app/services/auth.service.ts | 2 +- frontend/src/app/services/movie.service.ts | 2 +- frontend/src/app/services/user.service.ts | 2 +- .../src/environments/environment.example.ts | 8 +++++ 11 files changed, 58 insertions(+), 18 deletions(-) delete mode 100644 frontend/src/app/environments/environment.ts create mode 100644 frontend/src/environments/environment.example.ts diff --git a/frontend/.gitignore b/frontend/.gitignore index b8ea568..7193561 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -42,4 +42,8 @@ testem.log Thumbs.db # Movies -src/assets/movies/* \ No newline at end of file +src/assets/movies/* + +# Environments +src/environments/environment.ts +src/environments/environment.prod.ts \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index 09d13d2..677b5dd 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,16 +1,46 @@ +# Frontend + +## Environment Configuration + +In order to manage different configurations for development and production environments, Angular uses the `environment.ts` and `environment.prod.ts` files. + +### Step 1: Creating environment files + +You need to create the following files in the `src/environments/` directory: + +- `environment.ts` for development +- `environment.prod.ts` for production + +### Step 2: Add baseUrl and guest account + +In the `environment.ts` & `environment.prod.ts` file, add the following content: + +````typescript +export const environment = { + production: false, + baseUrl: 'YOUR_API_URL_HERE', + + // Guest account + guestMail: 'YOUR_GUEST_EMAIL_HERE', + guestPassword: 'YOUR_GUEST_PASSWORD_HERE', +}; + # Backend +## Env Configuration + To set the mail configuration for the backend, you must create an `.env` file in the root directory of your project. This file should have the following content: -## Step 1: Creating the `.env` file +### Step 1: Creating the `.env` file Create a file named `.env` in the root directory of the project. -## Step 2: Add the e-mail configuration +### Step 2: Add the e-mail configuration Open the `.env` file and add the following lines: ```env EMAIL_HOST_USER=example@gmail.com EMAIL_HOST_PASSWORD=password -``` + +```` diff --git a/frontend/angular.json b/frontend/angular.json index 6eda843..682d4b7 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -29,6 +29,12 @@ }, "configurations": { "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], "budgets": [ { "type": "initial", diff --git a/frontend/src/app/components/auth/login/login.component.ts b/frontend/src/app/components/auth/login/login.component.ts index 62db88a..1682640 100644 --- a/frontend/src/app/components/auth/login/login.component.ts +++ b/frontend/src/app/components/auth/login/login.component.ts @@ -5,7 +5,7 @@ import { Router, RouterLink } from '@angular/router'; import { AuthService } from '../../../services/auth.service'; import { ErrorService } from '../../../services/error.service'; import { CommonModule } from '@angular/common'; -import { environment } from '../../../environments/environment'; +import { environment } from '../../../../environments/environment'; @Component({ selector: 'app-login', diff --git a/frontend/src/app/components/home/browse/categories/categories.component.ts b/frontend/src/app/components/home/browse/categories/categories.component.ts index 97a07ea..c055af6 100644 --- a/frontend/src/app/components/home/browse/categories/categories.component.ts +++ b/frontend/src/app/components/home/browse/categories/categories.component.ts @@ -7,7 +7,7 @@ import { Input, Output, } from '@angular/core'; -import { environment } from '../../../../environments/environment'; +import { environment } from '../../../../../environments/environment'; @Component({ selector: 'app-categories', diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts index 41c1834..68110b0 100644 --- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts +++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts @@ -11,7 +11,7 @@ import { } from '@angular/core'; import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component'; import { MovieService } from '../../../../services/movie.service'; -import { environment } from '../../../../environments/environment'; +import { environment } from '../../../../../environments/environment'; import { BtnSmallComponent } from '../../../../shared/components/buttons/btn-small/btn-small.component'; import { UserService } from '../../../../services/user.service'; diff --git a/frontend/src/app/environments/environment.ts b/frontend/src/app/environments/environment.ts deleted file mode 100644 index 01d14f9..0000000 --- a/frontend/src/app/environments/environment.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const environment = { - baseUrl: 'http://127.0.0.1:8000', // Development - // baseUrl: 'https://videoflix-django.andre-kempf.com', // Live - - // Guest account - guestMail: 'guest@example.com', - guestPassword: 'guest@example.com', -}; diff --git a/frontend/src/app/services/auth.service.ts b/frontend/src/app/services/auth.service.ts index ff4ea20..d6dc91c 100644 --- a/frontend/src/app/services/auth.service.ts +++ b/frontend/src/app/services/auth.service.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { catchError, lastValueFrom, map, Observable, of } from 'rxjs'; -import { environment } from '../environments/environment'; +import { environment } from '../../environments/environment'; import { UserService } from './user.service'; @Injectable({ diff --git a/frontend/src/app/services/movie.service.ts b/frontend/src/app/services/movie.service.ts index f7b0287..8133eb9 100644 --- a/frontend/src/app/services/movie.service.ts +++ b/frontend/src/app/services/movie.service.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { BehaviorSubject, lastValueFrom, Observable } from 'rxjs'; -import { environment } from '../environments/environment'; +import { environment } from '../../environments/environment'; @Injectable({ providedIn: 'root', diff --git a/frontend/src/app/services/user.service.ts b/frontend/src/app/services/user.service.ts index b3457cf..8b3beba 100644 --- a/frontend/src/app/services/user.service.ts +++ b/frontend/src/app/services/user.service.ts @@ -1,6 +1,6 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { environment } from '../environments/environment'; +import { environment } from '../../environments/environment'; import { lastValueFrom } from 'rxjs'; @Injectable({ diff --git a/frontend/src/environments/environment.example.ts b/frontend/src/environments/environment.example.ts new file mode 100644 index 0000000..9b5873e --- /dev/null +++ b/frontend/src/environments/environment.example.ts @@ -0,0 +1,8 @@ +export const environment = { + production: false, + baseUrl: 'YOUR_API_URL_HERE', + + // Guest account + guestMail: 'YOUR_GUEST_EMAIL_HERE', + guestPassword: 'YOUR_GUEST_PASSWORD_HERE', +};