template-react-frontend

Template project for a modern React-based frontend app 💃

Features

• Docker driven
• Build and run development image with auto-restart
• Build and run stripped production image
• Uses Webpack, Babel, ESLint, Flow and Prettier
• Folder structure based on components, layouts and pages
• Fully CSS-in-JS driven using Aphrodite, or CSS modules if needed
• Uses Aphrodite-helpers to make components more reusable
• React-Router with two example pages
• Jest for unit testing
• 100% Flow coverage

Install

Replace helloWorld with the folder name of your project:

PROJECT_FOLDER=helloWorld bash -c 'git clone -o template --single-branch git@github.com:nickdecooman/template-react-frontend.git $PROJECT_FOLDER && cd $PROJECT_FOLDER && chmod -R u+x setup && ./setup/init.sh'

Usage

Development

yarn run build-dev
yarn run up-dev

Production

yarn run build-prod
yarn run up-prod

Testing

While running in development modus, you can run yarn run test to start Jest in watch mode.

Clean

yarn run clean will propely stop and remove all containers created within the scope of this project.

Backend?

Looking for a backend template too? Check out template-node-backend.

References

• React @ Product Hunt
• Inline CSS at Khan Academy
• Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS