Overview:

Starter Pack is a React-based web app template that combines React, Redux, and Redux-saga with Auth0’s Universal Login to provide a solid authentication system for modern web applications. The template also includes Rebass for styling and uses Webpack for development server and production builds. It features code splitting for efficient loading and caching of assets, as well as protected routes that require user authentication.

Features:

• React with hooks
• Redux and Redux-saga for state management and side effects
• Auth0’s Universal Login for authentication
• Rebass for styling
• Webpack for development server and production builds
• Code splitting with long-term caching
• Protected routes that require user authentication

Installation:

To install the Starter Pack template, follow these steps:

1. Set the AUTH0_CLIENT_ID and AUTH0_DOMAIN environment variables.

2. Sign up and create a new Auth0 app.

3. Add http://localhost:3001 as an allowed origin (CORS) for your newly created app and save the changes.

4. Run the following commands in the app’s root directory:

AUTH0_CLIENT_ID=YOUR_CLIENT_ID AUTH0_DOMAIN=YOUR_DOMAIN yarn run dev

5. Open http://localhost:3001 in your browser to access the development version.

To build the production version, run the following commands in the app’s root directory:

yarn run build

The production build will be located in the /dist folder.

To run the production version locally, run the following commands in the app’s root directory:

yarn run start

Open http://localhost:3001 in your browser to access the production version.

To run the app in a Docker container, run the following commands in the app’s root directory:

docker build -t starter-pack .
docker run -p 3001:3001 -e SCRIPT_NAME=dev starter-pack

Submit requests to http://localhost:3001.

Please note that the SCRIPT_NAME value should be one of the defined npm script names in the package.json file, such as dev or prod.

Summary:

Starter Pack is a React-based web app template that provides a solid foundation for building modern web applications with authentication. It utilizes popular libraries and tools such as React, Redux, Redux-saga, Auth0, Rebass, and Webpack. The template includes features like code splitting, protected routes, and hot reloading during development. It also provides guidance on installing and running the template locally or in a Docker container.