This codebase is a React SPA boilerplate. It is intended to be used as a Booster for my Launchpad. However, that being said, it can still be used completely on its own.
- ⚛️ React 17
- ⛑️ Type safety via TypeScript
- 🔐 Private and public routes
- 🦄 Babel + Webpack for code transpilation and bundling
- 💄 Write SCSS & future CSS with PostCSS + preset-env
- 🎯 Browserslist for specific browser support
- 🖊 Add SVGs, images, and custom fonts
- 🌎 Path aliasing for streamlined imports
- 🌈 Prettier + ESLint + StyleLint for consistent code style
- 🐺 Husky + lint-staged for code quality assurance
- 🧪 Mocha + Cypress for unit and integration tests
Starting the fully-fledged frontend is as simple as running the commands below.
sh setup.sh
make client- The client container exposes port 4000 and can be viewed by visiting http://localhost:4000
| Command | Description |
|---|---|
make client |
Launches the client container |
make down |
Removes the client containers |
make nuke |
Purges all client containers, images, networks, volumes |
make bash |
Shells into the client to run one-off commands. e.g. npm run test:e2e:headless |
| Command | Description |
|---|---|
npm run build |
Bundles the app into a single build folder |
npm run prod |
Runs the client on $PORT || 4002 (must run npm run build first) |
npm run dev |
Runs the client with hot reloading on $PORT || 4000 |
npm run test |
Runs the suite of unit and e2e tests |
npm run test:unit |
Runs the suite of unit tests |
npm run test:e2e |
Runs the suite of end-to-end tests with real browser interactivity |
npm run test:e2e:headless |
Runs the suite of end-to-end tests in headless mode |
Environment variables are injected into the app at runtime. To add a new environment variable, you will need to update the following files:
- .env.production.local - Loads environment variables for the app at runtime in prod mode
- .env.development.local - Loads environment variables for the app at runtime in dev mode
- .env.test.local - Loads environment variables for the app at runtime in test mode
Please note the environment variables in each of these places are only used when running the app locally. If you are deploying this app, it is expected you specify env vars on the hosted server and reference them in google-cloud-build/build.yaml and google-cloud-build/promote.yaml. See deployment.
Code released under the MIT License