A boilerplate for new react apps with react-scripts, storybook and a decent scaffolding to get you started.
A lot of the scaffolding for this project is half implemented so it's easy to rip out or to modify to your needs. I've included a ton of code documentation on how to do just that.
- Create React App
- Craco
Allows customization of Create React App webpack settings without ejecting.
In this project, customization includes an alias for referencing the root
source folder (
~) and a loader embedded into the index file a build time. - Jest For testing
- @testing-library/react Helpers for DOM testing
- Stylelint With CSS and SCSS configuration
- Plop For scaffolding components, pages and services
- Storybook with MDX For component development and documentation.
- jsdoc-to-markdown For generating non-component docs to add to your Storybook.
- normalize.css
- SASS
- sassdoc-to-markdown For adding documentation from your SASS files into your Storybook.
- Theming Tools for SASS
- SourceMap Explorer For bundle size analysis.
- ReactRouter For page routing
- Apollo For GraphQL (if you want it)
- @thesoulfresh/utils Utilities I use often
- @thesoulfresh/react-tools Useful and ultra slim hooks and base components
Component documentation can be found at https://stagency.gitlab.io/stagency-web-app/?path=/docs/design-system-theme--foregrounds
All merge requests in GitLab will receive a custom test environment. The GitLab UI will have a link to your environment.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Runs the app in static mode which uses mock data instead of hitting a real server.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Generate new components in the src/ directory. This will create the component
using the templates defined in scripts/plop-templates/. This generator will
guide you through the process of generating the new component.
For more information, see https://plopjs.com/documentation/#bypassing-prompts
Run the Storybook locally.
Analyze and visualize the size of your app bundle size.
Lint all files.
Verify your code before pushing or releasing. This will run lint tasks, tests and ensure the app and storybook build. This is the same task that should be used on your CI environment.
Release the app to production. This will run the tests, generate a production build, create a version tag and the deploy your code into the production environment.
See the scripts/release file to customize the release process.
Build and deploy the Storybook to gh-pages.
See https://github.com/storybookjs/storybook-deployer
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Clean generated files in the working directory.
This boilerplate will get updated to keep up with dependency upgrades. The easiest way to keep your app up-to-date with this repo's changes is to fork this repo as the starting point for your project. You can then pull in changes using Git.
However, if you're unable to fork this repo as your starting point,
you can instead use the scripts/sync script which will rsync changes
across to your app. It's pretty basic but it allows you copy changes
over to your project where you can manually decide which updates you
want.
Your project root needs to be clean before using the script:
cd react-website-template
./scripts/sync ../path/to/project/your/root
You can now commit the changes you want to keep in your project.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify