i created an angular 5 front end application which needs a backend rest api to deal with the database and i created this backend api with laravel and i am serving each of them on a different port as a separate domain but i need to host both of them on the same domain so that angular controls the routes and there are separate routes for the backend for example www.mydomain.com/anything is for the angular application and www.mydomain.com/api/anything is for the laravel backend. so is there a way to do this and if there is could you please mention it or post a link for a tutorial for it?
1 Answer
To achieve this, I would recommend the use a webserver like NGINX.
The root path should serve your Angular application, and /api will be proxy-passed to your API.
If your API is running on the same server as the source files of your angular application and on Port 3000, the NGINX server configuration would be something like this:
server {
listen 80 default_server;
location / {
root /path/to/angular/app;
}
location /api {
proxy_pass http://localhost:3000;
}
}
There are plenty of tutorials available regarding reverse proxies with NGINX. This is an example of one: https://www.digitalocean.com/community/tutorials/understanding-nginx-http-proxying-load-balancing-buffering-and-caching
Alternatively, you can refer directly to NGINX documentation: http://nginx.org/en/docs/http/ngx_http_proxy_module.html
1 Comment
Mohamed Nagah
i am going to host the website on a shared hosting web server so most probably it is going to be an apache server