This post assumes you have an understanding of Jekyll and React and have deployed both of them before.

The goal for this article is to get a Create-React-App easily built for your Jekyll site so you can deploy with a simple git-push.

I have been optimizing this workflow for years because I love static sites built with Jekyll, but also React is my favorite for building user interfaces. Especially given the growth of JAMstack and Netlify, it makes a lot of sense to build sites with Jekyll and React.

1. Create Your React App

First we are going to assume that your final app will live at /awesome-tool/ when it is finally published.

inside the root of your jekyll site, you should run npx create-react-app dev-awesome-tool and this will create a folder for your react site.

2. GitIgnore things

Assuming you’re using git, make sure to ignore the node-modules!

$ echo '/dev-*/node_modules/' >> .gitignore
$ echo '/dev-*/build/' >> .gitignore

Also we don’t want to commit our build twice, so you can ignore that here too:

3. Configure Jekyll to ignore the entire dev-awesome-tool/ directory

exclude:
  - node_modules
  - dev-awesome-tool

4. Update/Add the Package homepage

inside the dev-awesome-tool/package.json

"homepage": "/awesome-tool/"

This tells react to build the site for production at the /awesome-tool/ path

5. Configure the react build/deploy step to your liking!

This is the trickiest part, but its fairly simply when you understand what create-react-app is doing.

inside dev-awesome-tool/package.json look for the scripts attribute

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
},

We will add 4 new scripts: predeploy, deploy, purge, and frontmatter and the final result should look something like this”

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "predeploy": "npm run build",
  "purge": "rm -rf ../awesome-tools/static && cp -fR ./build/* ../awesome-tools",
  "frontmatter": "echo '---\ntitle: Awesome Tools\nlayout: null\n---\n' | cat - ../awesome-tools/index.html > temp && mv temp ../awesome-tools/index.html",
  "deploy": "npm run purge && npm run frontmatter"
},

First, add "predeploy": "npm run build",

This runs the production build and is always ran before deploy

Second purge

This moves the newest/freshest build into your visible jekyll folder.

Third, add frontmatter

This pushes some jekyll frontmatter into the react index file. Optionally you would do this so jekyll can add it to the sitemap and other helpful things.

Fourth, add deploy

This nicely combines all 4 scripts into a single command that will get your app ready for jekyll!

TADA!!

You can now run npm run deploy:

Jekyll sees your folder as a standard html asset and recursively builds subfolders as necessary!