Django with Angular - relative paths when font and back have different url - django

Question

After two days I failed to setup (any form of) webpack working with django3 in the back and angular10 in the front, so I decided to just use gulp to start ng serve for frontend and python manage.py runserver for backend. I am new to this, so this is probably very stupid but really two days is a lot of time to give on setup and get nothing back ..
Currently I am trying to call an API on the django server that is on http://127.0.0.1:8000 while ng serve is running on http://127.0.0.0:4200
#Injectable()
export class EchoService {
constructor(private httpClient: HttpClient) {}
public makeCall(): Observable<any> {
return this.httpClient.get<any>(
'http://127.0.0.1:8000/my-api/'
);
}
}
'''
Is there a better way how to do this in Angular without using "http://127.0.0.1:8000" in every component call I do? How can I make it as close as possible to relative paths, that will be used in the prod version of this (for prod I will just put the bundles manually in the html, but I can not do that manually for dev)

Answer 1

Angular allows defining an environment. Here is what I did:
in your src folder, find the environments folder.
create the following files and adjust the content as needed (there should already be a file named environment.ts there, I'll get back to that later. For now:
environment.dev.ts
export const environment = {
production: true,
apiURL: "http://127.0.0.1:8000/my-api"
};
environment.prod.ts
export const environment = {
production: true,
apiURL: "https://api.yoururl.com/"
};
modify your angular.json:
...
"configurations": {
...
"production": {
"outputPath": "dist-prod/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
}
"dev": {
"outputPath": "dist-dev/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
}
...
For ng serve, the standard environment.ts file is used, so the contents should probably match those of environment.dev.ts.
You can create builds with this setup by just calling:
ng build --configuration dev
ng build --configuration prod
Use in your service/component:
import { environment } from 'your/path/environments/environment';
#Injectable()
export class EchoService {
constructor(private httpClient: HttpClient) {}
public makeCall(): Observable<any> {
return this.httpClient.get<any>(
environment.apiURL + 'your/endpoint/
);
}
}
Now, depending on the configuration, environment.apiURL might be 127.0.0.1:8000 or https://.....
I have one for development, one for staging, and one for production.
In case I`ve missed something, you can read about it here.