This repository provides a skeleton application that you can fork to quick-start your own React app!
- built-in structure for navigation with react-router
- built-in structure and logic for internationalization with i18next
- oauth2 flow (for more information, see chapter oAuth)
Find the corresponding backend-api express-oauth2-skeleton here.
This project was bootstrapped with Create React App but we ejected Create React App to have more control over linting and configuration. Please find the Create React App documentation on the bottom of this README.
OAuth offers a rich set of protocols to allow authorized API calls. This skeleton includes logic and program flow for login and register functionality and account linking for third-party services (e.g. Amazon Alexa account linking).
Be aware that account linking will require https support. For an easy setup of https, build on top of the Deployment steps and integrate CloudFront for your S3 bucket to support https calls.
This repository is set-up for unix systems only. Some scripts will not work on Windows, so it is storngly recommended that you work with this repository on a unix machine (Mac, VM, Linux).
Get yourself VSCode for a quick start. On Linux just run: snap install code. Other IDEs e.g. Webstorm work fine as well, just make sure that you have nice git and eslint support within your editor for more convenience.
For VSCode, we can recommend the following extensions:
- eslint: A package that will show you all eslint linting errors within your code. Make sure to activate the checkbox "Auto fix on save" to ensure that all auto linting fixes will be fixed on every file save
Install all third party dependencies with npm install. If the command throws errors, it might help to run it as sudo or with the unsafe flag: sudo npm install --unsafe-perm=true. See package.json for more information.
Create a new file called .env and .env.development and copy the template from EXAMPLE.env and EXAMPLE.env.development. If you forked this repository, it is on you to invent secrets and save required secrets accordingly. If you are part of a team, than ask your co-contributors for the secrets and save them to your .env files. Please make sure that you keep the .env file private and do not share the information in the file with anyone. Do not add .env to git!
Important! We ejected out of create-react-app but we still use the create-react-app configs, e.g. see ./config && ./scripts. Create-react-app does only allow custom env. variables that start with REACT_APP_. Please make sure that you name your custom env-variables accordingly.
This part is optional but prevents you from accidently commiting unfinished code. Creade a new file named commit-msg to the folder .git/hooks/ inside the root folder of this project and paste following code inside:
#!/bin/bash
files=$(git diff --cached --name-only | grep '\.jsx\?$')
# Prevent ESLint help message if no files matched
if [[ $files = "" ]] ; then
exit 0
fi
failed=0
for file in ${files}; do
git show :$file | ./node_modules/.bin/eslint $file
if [[ $? != 0 ]] ; then
failed=1
fi
done;
if [[ $failed != 0 ]] ; then
echo "🚫🚫🚫 ESLint failed, git commit denied!"
exit $failed
fi
This prevents unfixed linting erros from being commited.
IF the hook is not working, try: chmod +x commit-msg.
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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
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!
- The
build.jsscript relies on the homepage field in thepackage.json, please make sure to set the homepage field properly or do not set homepage if you want to reference the root folder.
Includes npm run build to make sure the react app is up to date. For more details checkout the chapter Deployment.
Use the AWS command-line-interface to deploy the react web app. If you want to quickly host your application, you can do so on a AWS S3 bucket. Make sure you have a AWS developer account and create your access keys via the AWS console. There are plenty of nice guides out there on how to create a S3 bucket for static web hosting! Just set up your own bucket and also create the secret & access keys for CLI access and follow this quick guideline:
- First install awscli via:
brew install awscli - Run
aws configureand configure the access keys (use eu-west-1 as your region). - Run
npm run deployto push the repository to the AWS S3 bucket. - Check out the app under: http://your-app-name.s3-website-eu-west-1.amazonaws.com
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
.env variables are powerful tools to hide secret information from git and allow the differentiation of different environments via flags. See this guide for how they can be used within create-react-app: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify