I have a virtual server on Digital Ocean and inside this server I have 2 applications: Laravel app in path /var/www/api with proxy_pass http://localhost:8000 and a react js app in path /var/www/spa
with proxy_pass http://localhost:3000.
How can configure the Nginx server block for the Laravel app and the React app ?
The problem is the two apps don't work on localhost:8000 and localhost:300. If I run command php artisan serve on
Laravel or npm start on React, the two apps work but I can not use those commands in production. I want the Nginx server block configuration to work without using command php artisan serve or npm start. I want the two application work in production on port 8000 and 3000 on localhost and nginx as reverse proxy.
I read many links on internet to solve the problem but they don't work. What can I try next?
Related
I have built a react app using a truffle box that uses create-react app. I can get the app running on my local host but I can't see it on my VPS when I go to the IP address of my VPS and I run exactly the same commands and I get the same output in the terminal. I go in to my client dir and run npm start. I have tried to make a build and run the build through an http server in the client dir and the root folder of the VPS.
I run
serve -s build
All I can see is the index of the build in the browser when I try and serve the build through a webserver. When I run npm start on my localhost I can view my app but it doesn't work on my VPS. Please help me I've been struggling with this for days and its the last part of my project.
You need a webserver in any case.
When you do a local development, you do use webpack dev server (which is inside of create react app).
For the production, you need to make a production build and serve it for example by nginx. Here some details how to create production build with CRA https://create-react-app.dev/docs/production-build
On your screenshot, you don't see your site, because there is no entry point in your folder. By default it should be index.html
I have a typical Ubuntu VPS setup (20.04LTS) where I have installed the Nginx Server.
I have two local repos with front-end reactJS code repo and back-end ExpressJS code repo.
I will start the ExpressJS on the 3000 port with forever start. I have also a mysql db.
I have configured Nginx to server the static files with the root /var/www/[Your repo name]/build; and I can open the html files and it is working.
The question is, do I need to start on another port for an example the ReactJS npm run start or is Nginx enough? Could you help me out with some links or best practices?
Thanks in advance.
If you're using CRA (create react app), it ships with a build script, so after running npm run build the whole app is built into static files including a index.html and some js and css files. all you need to do is to config nginx to serve that index.html. so nginx is enough for that. if you're using react-router in your app keep in mind that you may need to use try_files directive of nginx for serving that index.html for any incoming requests.
for more information about react-router and nginx see this.
If you're doing SSR (Server Side Rendering) you need a process manager like pm2 or forever to serve your app internally and proxy_pass directive of nginx to reverse proxy incoming requests to your app. More info
All the static files like index.html and assets will be served from your "root /var/www/[Your repo name]/build" folder, when the user opens your base url and sent as response for the get call. From your code, make sure to append '/api/' to all your backend requests from ui, so that it will get forwarded to your service running on port 3030.
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I've been trying to deploy a react app to a server using docker, nginx and create-react-app
This is my setup
nginx container -> multiple dockers(One of them is the react one)
This is the nginx conf
location /mycms {
proxy_pass http://MyCMS:5000;
}
MyCMS is the docker container running serve correctly. Both the nginx and the container are on the same network.
The issue I'm having is that every time I go to https://myweb.com/mycms I get served a blank page and every .css and .js request returns the index.html of the app.
I've tried setting the homepage to both "https://myweb.com/mycms" and "." but neither seem to work
Any idea what could be wrong? It works if I run it on my machine without nginx
Regards
Edit:
The server conf is here: https://pastebin.com/BVNVcAEF
I am working on ReactJS application using create-react-app.
The npm start and npm run build application is working fine, The application is running in a port number like 4000 or pushstate-server build in the port 9000, The problem is that I need to run the build application without port number in a public url like http://sample/home/ , when I browse directly the build/index.html it is showing the home page correctly but the routings is not working as like in port,All of the css and assets are showing not found.
Change the port to 80.
This is the default value for HTTP requests, so, when you try to access
www.google.com
in fact you are accessing
www.google.com:80
You have to serve your app with a webserver instead of Webpack Dev Server, which is a dev tool which is not made for production.
Checkout my answer here for more information: How can I serve a reactjs app through https?