I’m going through the beta react projects and trying to host them on my website in a projects/ subdirectory.
After building my first react app I npm build and uploaded it to mywebsite.com/projects/ but I get an error when looking for the js and css along the lines
GET https://www.mywebsite.com.com/static/css/main.c9e033a3.css net::ERR_ABORTED GET https://www.mywebsite.com/static/js/main.49f526a1.js net::ERR_ABORTED
I can get around this by uploading the static directory from my build directory to my websites home directory but it seems like a hacky workaround. I know with the naming structure I probably wont run into naming collisions but I also know there has got to be a better way to do this!
I’m hosting using a digitalocean droplet, I believe my answer lies in routing but I have no idea how to set it all up. From the information I could find I think I need to edit the sites-available and/or sites-enabled files but the tinkering I did took down my site until I reverted it.
If anyone has any tips or tutorials I’d appreciate it.
Although this isn’t a direct answer to your question, I’d recommend ignoring the hassle altogether and using Heroku to host your projects. It’s a free, simple way to host your projects.
I think the “hacky workaround” you describe is the thing you should be doing. React serves a static index.html file that runs a big script. I think if you put copy your app directory onto your droplet, run the build script, and configure your server to serve that index.html it should work.
So if I host multiple apps I’ll have several CSS and JS files in the same folders away from my project directory and index.html files. I was basically just hoping there was an easy way to point my index.html file at the CSS and JS directory relative to each project instead of like a master folder.
I’ll definitely look into heroku, I figured I’m already paying for this thing it’d probably be easier to keep all my projects in one place but that’s proving to be untrue
If anyone comes across a similar problem I finally figured out the fix and if I would have just scrolled up a couple of lines in my terminal I wouldn’t have had this issue in the first place
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
so yeah, just add "homepage" : <path to project root>, to your package.json and everything will work perfectly. I knew I was missing something simple
First you should always “build” your React app and host the built React App for a production environment. Second DigitalOcean made a nice tutorial on deploying Node.js apps see,
Not really sure how any of this addresses the issues I was having but as I said I figured out a solution by pointing to the project directory in package.json.
Latest Node.js version installed on your computer or the Linux server where are you going to deploy the application.
sudo apt-get update
sudo apt-get install nodejs
node -v or node –version
npm -v or npm –version
create-react-app tool
npm install -g create-react-app
Deploying the app
1.First of all, create the app using npx create-react-app
npx create-react-app my-app
2.Now you can run the app by running following command in the project directory root
npm start
3.The default react app will run in http://localhost:30004.Now install serve and pm2 packages globally on the system/server
npm install -g serve
npm install -g pm2
5.Since you are in the root directory of your project, run the following command to create a production build of your app. This will create a directory named build in the project root directory
npm run build
6.Now we can run the following command to deploy the app
pm2 serve <path> <port> --spa
In our case, we can run the following command
pm2 serve build 8082 --spa
PM2 can serve static files very easily with the pm2 serve feature. It supports serving raw files from a specified folder or you can serve a SPA (Single Page Application) with it.
Now you can see that your application is running on 8081 port while you have logged out from your ssh terminal of the browser.
Check the status of the application following command in the shell.
pm2 list
Bonus : Below are some utility commands to manage the pm2 process
