@mortond/cra-template-bowhead v0.4.21

Bowhead

Bowhead Create-React-App template for fast MicroSaas prototyping using the Bowhead ReactJS component.

Demo - https://sad-tereshkova-9a21f9.netlify.app/

Includes

• ReactJS
• Redux Toolkit
• React Redux Firebase
• MaterialUI
• Stripe subscription management
• Firebase authentication
• Firestore database
• Netlify hosting and functions

How to use (macOS)

• Create project using Bowhead CRA template

npx create-react-app my-app --template @mortond/cra-template-bowhead

• Install Firebase CLI https://firebase.google.com/docs/cli

npm install -g firebase-tools

• Install Netlify CLI https://docs.netlify.com/cli/get-started/

npm install -g netlify-cli

• Install Stripe CLI https://stripe.com/docs/stripe-cli

brew install stripe/stripe-cli/stripe

• Rename .env.sample to .env

mv .env.sample .env

• Rename .env.functions.sample to .env.functions

mv .env.functions.sample .env.functions

GitHub

• Go to https://github.com/ and create a new repo for this project, this is required to set up your Netlify project

Netlify

• Go to https://app.netlify.com/ and create a project from GitHub

• There is no need to fill in all the details, you will be building and deploying this project from your local development environment for now.

• Build and deploy the functions needed for the Bowhead ReactJS component.

yarn build:functions
yarn deploy:netlify

Stripe

• Go to https://dashboard.stripe.com/ and create an account for this project

• Create 3 subscription products, e.g. Basic, Pro, Enterprise

• Add the price IDs to the .env file, check

REACT_APP_STRIPE_SUBSCRIPTION_PLAN_BASIC=price_1H306XJ...gt0GNOy1IQS
REACT_APP_STRIPE_SUBSCRIPTION_PLAN_PRO=price_1H307CJF9...gt0ZmRhLsNE
REACT_APP_STRIPE_SUBSCRIPTION_PLAN_ENTERPRISE=price_1H...F9YjhGgt0SxEYD01h

• Go to API Keys section under Developers and copy your accounts publishable key to the .env file

REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_AGZ3fyOfs2...afdsaAdzyMD00DP2

• Copy your accounts secret key to the .env.functions file

STRIPE_SECRET_KEY=sk_test_3PfzJ...00ds44323paZ9L

• Create a webhook that points to your deployed netlify function e.g. https://<your-project>.netlify.app/.netlify/functions/webhook-stripe and configure the following event types

customer.subscription.deleted
customer.subscription.updated
customer.subscription.created
checkout.session.completed

• Copy the webhook signing secret to the .env.functions file

STRIPE_WEBHOOK_SIGNING_SECRET=whsec_jIPnnfds...fd89jD7lryYmIDHIo

Firebase

• Go to https://console.firebase.google.com/ and create a new project
• Register this app in Firebase
• Create a new Firestore database, start in production mode
• Set Authentication sign-in method to email/password and enable Email link
• Add the projects *.netlify.app URL to Authorized domains
• Update ./config.js with your Firebase project configuration

Backend

• Generate a new Firebase service account private key for this project
• Open the service account .json file and copy the environment variable values to .env:

FIREBASE_FIRESTORE_PROD_DATABASE_URL=https://<you-app-url>.com
STRIPE_SECRET_KEY=sk_test_3PZoczJ9M...Dg00zt3paZ9L
STRIPE_WEBHOOK_SIGNING_SECRET=whsec_jIPnnV1DKk...2CojD7lryYmIDHIo
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADA...lkXctrKM9oOQA=\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-....@...iam.gserviceaccount.com
FIREBASE_PROJECT_ID=<project-id>

CLI

• Run firebase init and enable:

  • Firestore
  • Emulators

• Choose Use an existing project and select the project you just created

• DO NOT overwrite firestore.rules
• Run firebase login:ci, login with your browser, and copy the token to the .env file.

Theming

Bowhead uses MaterialUI which means the UI can styled by registering a new theme and overwriting the CSS based on the generated classes. See: https://material-ui.com/customization/globals/#global-css