How to deploy a create-react-app

04 November 2016   2 comments   Web development, ReactJS, JavaScript

Mind that age!

This blog post is 4 years old! Most likely, its content is outdated. Especially if it's technical.

First of all, create-react-app is an amazing kit. It's a zero configuration bundle that gives you a react app boilerplate with a dev server, linting and a deployment tool. All are awesome but not perfect.

I could go on giving this project praise but if you're here reading this you might be convinced already.

Anyway, the way you deploy a create-react-app project is actually stunningly simple, but there is one major caveat to look out for. Basically running yarn run build will first delete existing files in the ./build/ directory. Files that it indents to replace. For example your ./build/index.html or your ./build/static/js/main.94a86fe3.js.

So, what I suggest is that you deploy it like this:


# Go into the project where the package.json exists
cd myproject
# Upgrade any libraries
# Use 
yarn run build
mv build build_final

Note! This tip is only applicable if you deploy "in place" as opposed to building a whole new container/image and swapping an old container/image for a new one.

Now, for your Nginx point to the ./build_final directory instead. For example:

# /etc/nginx/sites-enabled/mysite.conf
server {
    root /full/path/to/myproject/build_final;

    location / {
        try_files $uri /index.html;
        add_header   Cache-Control public;
        expires      1d;

The whole point of this tip is that it's a good idea to not point Nginx to the ./build directory (but to a copy of it instead) because otherwise, during the seconds that yarn run build runs (1-5 seconds) a bunch of files will be missing and Nginx will send 404 errors to the clients unlucky enought to connect during the deployment.



Thank you so much for this post.


I tried the same thing but actually I configured many servers in Nginx so I cont specify the root inside the location like
   location /reactApp/{
            root /home/tech/React_App/elasticsearch/build/;
            index /home/tech/React_App/elasticsearch/public/index.
but I am getting white screen in the browser while opening on URL("") the problem is it was not rendering the root

Your email will never ever be published

Related posts

Optimization of QuerySet.get() with or without select_related 03 November 2016
Cope with JSONDecodeError in requests.get().json() in Python 2 and 3 16 November 2016
Related by Keyword:
How depend on a local Node package without 15 January 2020
Update to speed comparison for Redis vs PostgreSQL storing blobs of JSON 30 September 2019
A React vs. Preact case study for a widget 24 July 2019
How I simulate a CDN with Nginx 15 May 2019
Whatsdeployed rewritten in React 15 April 2019