CODEWITHSUNDEEP
node.jsreactjsweb-deploymentdigital-ocean
test team
test team

Reputation: 767

How can I deploy Node Js back-end and React Js front-end on server?

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

Upvotes: 3

Views: 5146

Answers (3)

Matus Dubrava
Matus Dubrava

Reputation: 14462

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.

Upvotes: 4

Bassam Rubaye
Bassam Rubaye

Reputation: 302

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

Upvotes: 0

Avanthika
Avanthika

Reputation: 4182

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')));

Upvotes: 1

Related Questions