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;
}
}
Related
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?
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
I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:
someRoute/
index.tsx
register.tsx
[id].tsx
My nginx.conf file has the following content:
worker_processes 4;
events { worker_connections 1024; }
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html /register.html;
}
}
What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don't.
My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won't happen, since it is a dynamic route. As per register.html, I really don't know what's wrong.
How do I get someRoute/register and someRoute/[id] working?
I am currently learning to deploy applications made with NextJs to VPS. I have been successful, running some REST APIs on the Nginx server, I am not using the NextJs api feature, this is separate using Express. This is executed using PM2.
But I am confused, how do I serve NextJs "out" the results folder "next build && next export", this is a dashboard page that fetches data on the client side.
Do I have to treat the same with the REST API using PM2 or a different treatment, can you please provide an example configuration file of nginx for this.
I have tried googling but there is no exact answer about this.
Thanks in advance, I appreciate any answer.
server {
server_name your-website.com;
location / {
root /app; # name of the folder where you put content of out directory, try files will be relative to this path
try_files $uri $uri.html $uri/ =404; # try different strategies to find matching file in the folder with build, otherwise throw 404 error
}
error_page 404 /404.html; # if 404, serve this file
}
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.