I created a ReactJS application using Create-React-App, and wanted to deploy it on a Linux server. I followed a tutorial that showed how to do so very simply by installing pm2 and serve, then after running the command:
npm run build
I ran the command that actually hosted the application:
pm2 serve build
Now the problem is whenever I visit a url that is not the base one, or click reload from browser while I'm on a page other than home page, I get 404 not found error.
I understand the previous command is meant to serve a single page only. My question is: is there a way to make the url for example http://myserver:port/a go to Route a in my app? Or at least go to http://myserver:port/ ?
I already have Nginx installed on the same server, as I am using it to host a Flask Python app, but I'm very new to all this and I am looking for a simple way that works, as I faced some difficulties to get the Python app hosted.
Please note that I am only using React, no Redux, express, or any Database, if that is of any relevance. I am also using BrowserRouter inside my app.
pm2 serve has a Single-Page-Application Mode (https://pm2.keymetrics.io/docs/usage/expose/#serving-spa-redirect-all-to-indexhtml)
From the docs:
To automatically redirect all queries to the index.html use the --spa option:
pm2 serve build --spa
Or if using ecosystem.config.js file:
module.exports = {
script: "serve",
env: {
PM2_SERVE_PATH: 'build',
PM2_SERVE_PORT: 8080,
PM2_SERVE_SPA: 'true',
PM2_SERVE_HOMEPAGE: '/index.html'
}
}
I use Vue.js, "npm run build" command generates static files into dist folder, the pm2 command looks like this:
pm2 --name <appName> serve --spa <staticFolder> <port>
pm2 serve build just serves build folder statically. So http://myserver:port/a will request file named 'a' in build folder. If it doesnt find it, it returns 404
To make ur server able to handle other routes, you cannot use pm2 serve. Instead you should start your flask server through pm2. You may take a look at How to run a python script like pm2 for nodejs
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 want to Deploy my react site to the regular server without build command
without Netlify or DigitalOcean, Heroku, GitHub Pages, aws
Is there a way to run modular bundlers like Webpack on Host?
actually what Netlify or DigitalOcean, Heroku, GitHub Pages, aws doing for show webpage without npm run build command?
I am currently trying to deploy the default react web app to Azure and I am encountering an issue where though I deploy the contents of my build folder to the azure hosted /site/wwwroot folder I end up on the following page when going to my hosted address: https://[project_name].azurewebsites.net/
Landing Page :
I intend to deploy the default create-react-app react application so that I may have the process down for when I deploy my real site.
The process I have followed is pretty much exactly what is mentioned in this article https://medium.com/#to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321
Create the default React App with create-react-app
Run "npm run build" to get the build folder
Go into the Azure React Portal and create a new Web App ***
FTP / Git deploy the contents of the local build folder into the Azure website's /site/wwwroot/ folder
For overkill I added the below web.config file to handle future routes, but have also tried without this step
In the end my Azure site's contents look like this
Folder contents :
At this point when I try to access the Azure site I get the "Hey, Node developers!" page which implies my code is not deployed. Any thoughts as to why this might be the case?
*** I have a hunch that during the configuring of the Azure Web Api something is not set up correctly perhaps because I select Node 10.14 as my Runtime stack simply because that is the version of Node that I have installed and am using with my local React app.
Thank you folks for your time.
Another approach is to configure Azure Linux Web App Service to run a startup command to serve your React app in "Settings > General settings > Startup Command":
pm2 serve /home/site/wwwroot/ --no-daemon
Remember to change the path to your build path (The path to your index.html file).
If you use react-router and wants to make any direct access on custom routes be handled by index.html you need to add --spa option on the same command.
pm2 serve /home/site/wwwroot/ --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
You have created a Linux App Service - your web.config won't work because there is no IIS.
If you don't select node as the runtime stack, your app will work for the most part because it serves the files like a static web host. However I would suggest to keep the runtime stack as node and add the following file to your deployment in the wwwroot folder:
ecosystem.config.js
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
There's an extremely simple way to overcome this problem, and although it is not perfect, it works both on AWS, Microsoft Azure, and probably any other hosting:
Just point the error document to: index.html
I found it out here:
https://stackoverflow.com/a/52343542/3231884
Disclaimer: This solution is not perfect and impacts SEO. Google doesn't rank well sites that throw 404s.
So, I have spent a couples of months learning react and have now created a react app that works nicely on my local computer using the web address localhost:3000. But now is the big question: how do I deploy the app so it becomes accessible on the internet for everybody to see. Previously I have place on a web hotel where I can host some php files. But how do I put the react app on that web hotel. Or do I need some other service that a normal web hotel cannot handle.
Thanks for any help
/Simon :-)
There's a few great options for pushing out your first React application. Once it's built and hosted on GitHub, there's a few free options for deploying static websites (as long as your app meets this requirement). I suggest checking out GitHub Pages (https://pages.github.com/) or Netlify (https://www.netlify.com/); they offer you the tools to deploy right from your repository.
The short answer is simply run npm run build or yarn build command then the scripts try to create a js file and a CSS file and a HTML file and all your files can access from build folder. so just copy build folder and everything in it to server for example upload it to Heroku or AWS
First you should create build. Use 'npm run build' or if you are using yarn then use 'yarn build' command.
After that you will see build folder in your app having html file static folder.
You can test with any local server in your machine. You can use following chrome extension to deploy your app locally. Just import your build folder inside this extension.
Web server for chrome
Thank you Keith!
I used "Github pages" to deploy my React app and it was surprisingly simple. I found a great short 5 minute tutorial on Youtube: "https://www.youtube.com/watch?v=1Y-PqBH-htk". This is how I did it:
Added this line to my package.json file, at the top level:
"homepage": "https://zimon42.github.io/helloworld"
(zimon42 is your username on Github. helloworld is the name of your repository)
Installed the so called Github pages module by running:
npm install --save gh-pages
Added these two lines to my package.json file, under scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Committed and pushed everything to Git (Dont know if this step is necessary)
Deploying the application by running
npm run deploy
Now simply check out the paeg at https://zimon42.github.io/helloworld.
( For me there was a delay before the changed took effect.)
Also my routes didn't work. Got a empty page. But saw this video: https://www.youtube.com/watch?v=7yA7BGos2KQ&t=114s which described using HashRoutes instead, and then it worked!
/Simon :-)
I created react app using create-react-app.
I have deployed to aws.
How can I run it in production without using server like apache or nginx ?
Thank You.
You should install nginx on your EC2 instance.
Then, run npm run build. It will generate a build folder, that then should be used as nginx vhost webroot.
npm run build
Builds the app for production to the build folder. It correctly
bundles React in production mode and optimizes the build for the best
performance.
The build is minified and the filenames include the hashes. Your app
is ready to be deployed!
Simple as that.
Or,
For environments using Node, the easiest way to handle this would be
to install serve and let it handle the rest:
npm install -g serve serve -s build