Starter Pack combines React, Redux and Redux-saga with Auth0's Lock as a starting point for modern web apps with solid authentication. Why reinvent the wheel? The app utilises Rebass and Reflexbox to keep things looking decent. I built this as a way to quickly prototype new ideas.
Webpack (ft. various loaders/plugins/tools) is used to run a local development server and build the production version. Code splitting (with long-term caching in the production version) has been set up via Webpack and React Loadable. Webpack's CommonsChunkPlugin is used to split vendor code. React Loadable is used for async component-centric code splitting and loading - see LoadableBooksPage.js as an example of creating a split point (restart the dev server if the new chunk is not emitted). ExtractTextPlugin is used to split CSS. HtmlWebpackPlugin is used to generate an index.html with the appropriate output assets injected, the Webpack manifest is inlined into index.html to save requests.
The app contains a 'locked down' Books page which requires a user to log in/sign up before content will be visible. The data is read from a local JSON file as this is a only demonstration/starting point. In the real world data would be fetched from an API - see apiService.js. Protected routes in the API should check validity of the JWT token and return unauthorised if invalid. The app should then prompt the user to log in again. See [Serverless API] (https://awesomeopensource.com/project/jch254/serverless-node-dynamodb-api) for a more detailed example of authentication in action.
AUTH0_CLIENT_ID and AUTH0_DOMAIN environment variable must be set before
yarn run commands below.
AUTH0_CLIENT_ID=YOUR_CLIENT_ID AUTH0_DOMAIN=YOUR_DOMAIN yarn run dev
yarn install yarn run dev
docker build -t starter-pack . docker run -p 3001:3001 -e AUTH0_CLIENT_ID=YOUR_CLIENT_ID -e AUTH0_DOMAIN=YOUR_DOMAIN starter-pack
yarn install yarn run build
yarn install yarn run prod
Refer to the /infrastructure directory.