I have created a back-end using Node Express which is running on port 5000. And my front-end using React Js which is running on port 3000. And both of them are in different folders in root directory.
I want to upload both of these and deploy on digital ocean Server. I am new to this department process. How can I deploy both of these on server and run by one command, please
Here is one way of doing it (using node server to serve as an API for React website served by Apache server).
You can leave nodejs running on port 5000 (on the remote server) but make sure that you are not using localhost but 0.0.0.0.
ie. app.listen(5000, "0.0.0.0");
Now, you should be able to communicate with the node server via public IP/DNS name on that port ie. myPublicIpOrDNSname:5000. (assuming that you have installed nodejs as well as npm => be careful about version, apt-get install nodejs, by default, will fetch an older version)
If you need newer version of nodejs then you can fetch it by following these steps (you can replace that setup_8.x part with your preferred version).
cd ~
curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install nodejs
Use Apache2 server to serve your static (React, css, ...) files (you don't need to run create-react-app server).
sudo apt-get update
sudo apt-get install apache2
Build your React project using npm run build and then place the files that were created inside of /build folder (in the React folder) to /var/www/html (on the remote server). Note that you need to place there files and folders from /build folder, not the /build folder itself.
Now you should be able to see your react website running when you type the myPublicIpOrDNSname address (assuming that Apache is running sudo systemctl start apache2).
For Apache to work correctly (if you are using front-end routing - ie. react-router-dom), you need to go to /etc/apache2/sites-enabled/000-default.conf and place this configuration
<Directory "/var/www/html">
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
under <VirtualHost ...> section in that file. (Apache does't know about your React routes. This will make it push every request that it doesn't know how to handle to the root and leave React handle the routing)
Then you need to make sure that RewriteEngine is running (otherwise you will get an error when restarting Apache server).
sudo a2enmod rewrite
Finally, restart Apache server
sudo /etc/init.d/apache2 restart
Now, it should work.
Note that you need to modify your ajax calls in your React with the new public IP/DNS.
localhost. How to change it to 0.0.0.0
app.listen(5000, ...) or server.listen(5000) or server.listen(port, ...) or something similar with the listen method. Just add 0.0.0.0 as the second argument to that method (ie. app.listen(5000, "0.0.0.0"))If your front-end is create react app, you can do npm run build, and serve static assets in nodejs via nodejs in the same server. It will serve the minified chunks.
app.use(express.static(path.join(__dirname, '../client/build')));
You can server side render your react app from your Node.js/Express, I think currently your are using webpack to render your react app on port 3000. If you can upload your code to take a look it will be easier to help
