creact

A project template for creating awesome React web apps.

Visit demo · Documentation

_{Developed by Joshua Booth}

---

About | Features | Requirements | Installation | Setup | Usage | Support | License

---

About

creact is a React JS project template for quickly setting up advanced production web apps. Setting up a complex app from scratch takes ages, so this template aims to have as many realistic project features and integrations as possible. However, with the focus on being modular - you should be able to remove parts if they aren't a good fit for your project.

Take a look at the features to see what's included. And if there's something that you think should be added, feel free to create a feature request.

For more information about this project check out the wiki.

Features

• ✂️ Customisable - Only use the parts that you need for your project
• 📁 Data management - Manage state with Redux and handle API data with redux-thunk and axios
• 📱 Responsive design - Uses Tailwind CSS with Sass and custom media query mixins
• ↪️ Git hooks - Starter hooks with Husky
• 🔖 Versioning - Automated SemVer versioning, changelogs and releases with semantic-release
• 📝 Documentation - Internal docs with JSDoc and a clean-jsdoc-theme site
• 👕 Linting - ESlint, Prettier, stylelint, and commitlint
• ✅ Testing - Config and starter tests for unit, integration and end-to-end testing
• 📈 Coverage reports - Jest and Cypress test coverage results either combined or separate
• 📦 Third party apps/tools - Algolia, Google Analytics, Hotjar and Intercom built in

Requirements

This project requires the following:

• Git
• Node.js 14.16+
• npm 7.0.0+

Other useful global dependencies

• git-cz
• npm-check-updates
• prettier

Installation

> git clone https://github.com/Joshua-Booth/creact.git   # Clone the repository

> cd creact     # Change into the 'creact' directory

> npm install   # Install all the project's dependencies

Ensure the NODE_ENV environment variable is either undefined or set to 'development' before installing dependencies.

Setup

Create three env files (.prod, .dev, .test) in an env directory in config.

> mkdir ./config/env
> cd ./config/env

> touch .prod .dev .test   # Windows: cd > .prod && cd > .dev && cd > .test

Add the following environment variables for development (.dev) and production (.prod):

Variable name	Required	Description
NODE_VERSION	False	This app's Node version (should be equal or greater than 14.16)
REACT_APP_ROOT_URL	True	Your API's URL (e.g. localhost:8000 for dev and https://api.example.com/ for prod)
REACT_APP_PUBLIC_URL	True	This app's public URL (e.g. localhost:8080/public for dev and https://example.com/public for prod)
REACT_APP_ALGOLIA_APP_ID	False	Algolia app id
REACT_APP_ALGOLIA_SEARCH_KEY	False	Algolia search key
REACT_APP_GA_TRACKING_ID	False	Google Analytics tracking id (e.g. UA-123456789-1)
REACT_APP_HOTJAR_SNIPPET_VERSION	False	Hotjar snippet version (Also called 'hjsv')
REACT_APP_HOTJAR_TRACKING_ID	False	Hotjar tracking id (Also called 'hjid')
REACT_APP_INTERCOM_APP_ID	False	Intercom app id
REACT_APP_SENTRY_DSN	False	Sentry DSN

Usage

To use the application use the following commands:

Production

Run npm run build to build the static files for production.

Run npm start prod to serve the production files.

✨ Visit the site on the localhost URL.

Development

Run npm start dev to start the webpack dev server for the web app.

✨ Visit the site on the localhost URL.

Testing

> npm t                # Unit tests

> npm start test.it    # Integration tests

> npm start test.e2e   # End-to-end tests

> npm start coverage   # Full test coverage report (unit, integration and e2e combined)

npm t starts the unit tests in watch mode, but you can also set the environment variable CI to run the tests in continuous integration mode (this also works for integration and end-to-end tests).

Other

Run npm start help for a full list of available commands.

Support

Do you need some help? Check the out articles in the wiki.

Check the issues page to see if there is an open issue with a potential workaround.

Additional Support

Reach out to me for support through the following methods:

• Email: contact@joshuabooth.nz
• Website: joshuabooth.nz/contact

License

This project is the sole property of Joshua Booth.

Copyright © 2021 Joshua Booth

Please see individual licenses contained in the project where third-party code was used, as this code is owned by it's respective authors.