server{
listen 80 ;
listen [::]:80;
server_name test.demo.io;
root /home/ubuntu/SuperApp/build;
location / {
try_files $uri /index.html;
}
}
this is my nginx config file for frontend that is developed in react js.
I have also developed backed in express js.
Now how shall I deploy my express js backend code.?
Shall I keep these two projects separate and run the backend on port 3000 ? In that case, will I have to do additional things to connect my front end with this express js through apis? As both app are not running on same port?
Or shall I keep my front end in the express js static files and run the whole app from port 3000? but in that case how would I attach my current domain to the website as currently I haven't attach any port no like 3000 used.
Please help. I am new to this.
Front-end and back-end are two separate projects
you build the front-end adding api url as env var during the build process. you just deploy the static build result on Nginx server.
you run the api separately e.g on http://localhost:3000 using a command like npm start or node server.js depends on your back-end code
Related
I've deployed an server-side rendering React app (bundled without CRA):
it has an express server for server-side rendering (listens to port 3000 or process.env.PORT)
it has an express server for the API that serves the frontend (listens to port 8080 or process.env.PORT)
On localhost, the frontend makes a request to http://localhost:8080/api to get the data, which works perfectly.
From my understanding, when the app is in production, the base API URL should be the app's URL (eg. https://myapp.herokuapp.com) instead of http://localhost:8080, so I added this change in my code:
if the app is in dev, the frontend calls http://localhost:8080/api
if the app is in prod, the frontend calls https://myapp.herokuapp.com/api(I added https://myapp.herokuapp.com/as a config var in Heroku)
However, it doesn't work. My app is deployed successfully to Heroku and the SSR renders correctly, but the API call fails. (I also tried https://myapp.herokuapp.com/api:3000 which fails)
What should be the API URL to call a local server when the app is in production?
thanks a lot!
Well, as far as I know Heroku doesn't allow multiple ports and you will not be able to open 3000 for web and 8080 for api.
You can serve both on the same port and route /api to the api.
I have worked on a project that uses similar approach and below is the code:
app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));
It is also deployed to heroku.
full repo if you wish to take a look - https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js
I have a React frontend and a Django backend, both organized in a docker-compose with port 7000 exposed to React, and port 9000 exposed to Django. This system is hosted in a server machine whose nginx location config is the following:
[...]
location / {
proxy_pass http://localhost:7000/;
}
location /django {
proxy_pass http://localhost:9000/;
}
[...]
Suppose the server_name is example.com.
The problem is: if I access example.com/django/admin, a blank react page is returned instead of the django-admin login one. How can I solve it?
I need to serve a react app on a subpath domain http://domain.dev/myreactapp
And I can't find a configuration to serve the app using nginx.
I'm using the nginx docker container.
I already tried a lot of stuff but this is my conf right now.
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri /index.html;
}
}
The the big nginx instance points http://mydomain.dev/myreactapp to another server that will serve static files with nginx on a docker container (the nginx:1.16.0-alpine container)
My react app will only be served by that url, the top domain is pointing to another server.
But I can't make the app respond to the subpath.
If I ran the second docker image on my machine, it only respond to the top level.
I don't know what I need to set it up on the second nginx to serve the app on the http://mydomain.dev/myreactapp subpath.
I have React.js app which I created using create-react-app. Also I have Scala REST API which use Akka-HTTP. For build React app I use npm run build. I want that Scala send on client index.html with other static file. I started writing routes for static files, but this method has long been used and can today have something else to do it automatically. Can you advise me how to solve this problem?
Use Nginx. Serve the static npm-built files with that. Forward API requests to the scala app. Minimal example nginx config using URL path prefix to separate static and api.
upstream server-api {
server localhost:9000;
}
server {
listen 80;
server_name _;
location /api {
proxy_pass http://server-api;
}
location / {
root /usr/share/nginx/dist;
index index.html index.htm;
}
}
I am working on Angular 1 based web application.
I've deployed a web app with nginx , but couldn't deploy production server in my local env.
So, I want call API from the production server. For example,
I am using RestAngular to call API.
Restangular.all('api/user/profile').post(mUser)
This calls
localhost:8080/api/user/profile
because I've deployed a web app in localhost:8080.
I want to redirect requests which starts with "/API" to the production server, by config nginx properly.
So, in this case, it should call API server
http://devprod2api/api/user/profile
Other requests that don't start with "API" should go to:
http://localhost:8080/...
Is it something possible by config nginx properly? If possible, how can I do that?
I am not sure what you have tried, but this just needs a simple proxy_pass as far as I see. Add below to your nginx config and it should point all API to the other server. It assumes that a host entry is present for devprod2api
location /api/ {
proxy_pass http://devprod2api/api/;
}