Rename gist

react-boilerplate.md

Boilerplate Create React App

Create a boilerplate Redux React app with some additional bells and whistles including Tailwind CSS and Firebase.

# https://redux.js.org/introduction/getting-started
npx create-react-app some-special-unicorn-idea --template redux

# Don't forget to gitify it and commit everything once off
cd some-special-unicorn-idea && git init && git add . && git commit -m "initial commit 🦄"

Consistency tools

I have a set of files for prettier and my editor config that I curl to the root of my projects.

curl -L https://raw.githubusercontent.com/cbillowes/prettier/main/install.sh | bash

# https://prettier.io/docs/en/install.html
npm install --save-dev prettier

Tailwind CSS

Installing Tailwind CSS as a PostCSS plugin to integrate it with webpack.

# https://tailwindcss.com/docs/installation
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Google Firebase

For other CLI management options, visit the CLI documentation (https://firebase.google.com/docs/cli#update-cli)
npm install -g firebase-tools 

# https://firebase.google.com/docs/firestore
# https://www.npmjs.com/package/firebase
npm install --save firebase

firebase init 
# Choose the features you are interested in consuming
# and follow the prompts to continue the set up.

Do not configure as a single-page app. Do not overwrite your public/index.html page.

{
  "scripts": {
    "deploy:firestore": "firebase deploy --only firestore:rules",
    "deploy:storage": "firebase deploy --only storage:rules",
    "deploy:hosting": "firebase deploy --only hosting",
    "deploy": "firebase deploy"
  }
}

You will need the following configuration which you will find in your project settings:

Project settings > Your apps (right at the bottom) > Select this web app (or create a new one). The config will be available to you in JSON. Copy and paste the values into the .env.development file in the root of your project.

REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=
REACT_APP_MEASUREMENT_ID=
REACT_APP_RECAPTCHA_TOKEN=