Configure baseUrl for dev and prod environments

frontend/.gitignore

@@ -42,4 +42,8 @@ testem.log
 Thumbs.db
 
 # Movies
-src/assets/movies/*
+src/assets/movies/*
+
+# Environments
+src/environments/environment.ts
+src/environments/environment.prod.ts

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
-```
+
+````

frontend/angular.json

@@ -29,6 +29,12 @@
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "budgets": [
                 {
                   "type": "initial",

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',

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',

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';
 

frontend/src/app/environments/environment.ts

@@ -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',
-};

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({

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',

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({

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',
+};