Question

How to deploy a create-react-SSR-app to a droplet?

Posted November 11, 2019 815 views
NginxInitial Server SetupReact

Hi all,

Quite a beginner here so I hope my questions aren’t too stupid.
I’m looking to improve my web developer skills so I’ve been going from simple html/css to javascript to react etc… and now I’m looking into server side rendering.

First time using digital ocean, I’ve setup a droplet and followed the steps described in this tutorial: https://coderrocketfuel.com/article/deploy-a-create-react-app-website-to-digitalocean

Great stuff, was excited when I was seeing that spinning react logo. Then I thought I would go a step further and set up a ssr version of it. For my ease of use, I’ve been using the handy create-react-ssr-app to do so. When creating the production build, it gives me a build folder containing two files:

  • server.js
  • public (folder) (contains all the basics of a react app with static, app.html etc)

And of course, just copying those files into the nginx html folder does not do the trick, I’m guessing I need to edit the nginx/sites-available/default file so the server goes to the right place? Hope the question is clear enough, essentially, I followed the deploy tutorial, and now would like to do exactly the same but with an ssr react app.

All help is welcome :)
Cheers.

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

I was a bit perplexed with this too.. It took me a while to realize I didn’t need to change anything from before I universalized my app. (I’m assuming you’ve already had a normal react app running at this point).

My sites-available config file for nginx used to point to index as first priority. I was confused since I didn’t have a index.html anymore (server.js as you mention), but lo-and-behold it works… somehow… Just be sure to stop your previous pm2 instance, and run pm2 again for your new script

pm2 start build/server.js --name my-project
pm2 show my-project //check to make sure it's all good

Lastly, your port that your app will be running on might be different. For me it changed from 8080 to 3000. You’ll need to update the port inside /etc/nginx/sites-available/myconfig. Here’s what mine looks like in the important bits:

server {
...
    root /var/www/my-project/build;

    index index.html index.htm index.nginx-debian.html // index.html doesn't exist anymore, I really could just delete that

    server_name mydomain.com www.mydomain.com

    location / {
        ...
        proxy_pass http://localhost:3000
    }
}

That’s what I had to do, and I am running React with Razzle as my SSR library (uses webpack and babel)

Submit an Answer