How do I deploy a React application to my Linode?

React applications in the end are just static html, css, and javascript files that are compiled together using something like Webpack. If you are using create-react-app then all you need to do to make a production build is to run:

npm run build

If you are using a custom Webpack setup you can follow their guide on production best practices.

Since these are static files you'll need to use a webserver like Apache or Nginx to serve them to the internet. My recommendation is to run Nginx as it is lightweight and flexible. We have a great guide to get you started.

In that guide you'll notice that you set up your configuration file like so:

server {
    listen       80;
    server_name  example.com

        root /var/www/example.com;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
      }
}

Here the root is specifying the location of the files to serve, and the index index.html is specifying which files to look for as the root of your site. When you create a production build of your app using create-react-app for example, you'll have a build folder which contains an index.html file that pull in all of the javascript and css that you wrote in your React application. This is the file that you want to put in the root directory specified, which in the default example above is /var/www/example.com.

Once that is done you should be able to navigate to your IP address and you'll see you React app being served by Nginx.

If you see an error message be sure to make sure that your nginx has started up correctly:

sudo service status nginx

And also make sure you do not have a firewall rule blocking port 80:

sudo iptables -A INPUT -p tcp --dport 80 -m conntrack --ctstate NEW,ESTABLISHED -j ACCEPT
sudo iptables -A OUTPUT -p tcp --sport 80 -m conntrack --ctstate ESTABLISHED -j ACCEPT

Often React applications pull in data from an external source, like an API written in python or nodejs. You can also run this type of API on your Linode. Here is a great guide on installing nodejs on your Linode.

We also have many guides on getting started with different databases like postgres, mysql, or mongodb which you can use to store data for your API to serve.

When you mention a dynamic React application, you may be referring to server rendered or isomorphic javascript. This is possible on your Linode as well. Check out the React docs on this. There are also plenty of great server side frameworks to help you with rendering your React on the server. My personal favorite and one that I use frequently is Next.js.