caprover/docs/recipe-deploy-create-react-app.md

id, title, sidebar_label

id	title	sidebar_label
recipe-deploy-create-react-app	Static React App	Static React App

Deploying as create-react-app in a static container

Here is a small step-by-step guide to deploy a create-react-app as a static site. Unlike the regular captainduckduck deploy that would deploy source files on a NodeJS container then build your app and run a small node server to serve your files, this guide shows how you can build locally and deploy the static bundle in a simple static server container.

The big advantage of this technique is that the build happens on your machine where you already have node_modules and probably more computing power than on your server. You also only upload minified files and not the entire codebase. Because of these, the deployment is way faster and less computing intensive for your server.

While this guide uses create-react-app as an example, you can apply the same technique for any static project (VueJS, Parcel, Angular...).

Build your app

The first thing you have to do is to build your app for production.

npm run build

Create captain-definition

Then create a captain-definition at the root of your project:

{
  "schemaVersion": 1,
  "dockerfileLines": ["FROM socialengine/nginx-spa:latest", "COPY ./src/build /app", "RUN chmod -R 777 /app"]
}

This captain-definition uses socialengine/nginx-spa which is a simple static ngninx server that handle pushState (every request is routed to /index.html so you can use frontend routing).

Note: If your build output in a diffent folder than build you need to change the COPY ./src/build /app into COPY ./src/[my-output-folder] /app

Create the tar file

Now you need to create a tar file, usually you don't have to do this because captainduckduck deploy create one from you git repository but here we don't want to put the content of our repository in the tar but only the static files and captain-definition file.

tar -cvf ./deploy.tar --exclude='*.map' ./captain-definition ./build/*

Note: If your build output in a diffent folder than build you need to replace ./build/* with ./[my-output-folder]/*

Note: We also exclude .map files because these are usually quite big and make the upload longer. If you want .map files in production just remove the --exclude='*.map'.

Tip: Add deploy.tar to your .gitignore to avoid accidentally pushing it 😉

Deploy with captainduckduck

Now all we have to do is to use the captainduckduck CLI with a -t argument to use our own tar file instead of the one made from the git repo.

captainduckduck deploy -t ./deploy.tar

Then answer the questions as usual, wait for the upload and 🎉