Redux Auth Starter: A Zero Config CRA Template
Tags: react, redux, javascript, webdev
Published: 2021-01-31 04:11:17

[Redux auth starter](https://github.com/Nilanth/cra-template-redux-auth-starter) is preconfigured Create React App Template with Zero Configuration by running a single command.

### **What is Redux Auth Starter?**
[Redux auth starter](https://github.com/Nilanth/cra-template-redux-auth-starter) is a [Create React App (CRA)](https://github.com/facebook/create-react-app) Template, Which is preconfigured with all needed dependencies and set up to build a scalable SaaS application by running a single command.

### **Why not Create React App?**
If we need to develop a react app, Most of us start to develop a react app with [Create React App](https://github.com/facebook/create-react-app) (CRA). CRA has many features like instead reload, optimized bundle, ships with single dependency, ESlint, Testing and Easy to maintain. 
But are these features are enough to build a Scalable SaaS application? 
Let’s see

For a Basic SaaS app, we need to access API, There will be multiple components, Local state and global state, Authentication, Routes, Good UI and UX.

When using CRA we need to configure the above things manually and this configuration also requires more time, So we need to do this every time when we develop a new app from scratch. To overcome these drawbacks, I have developed [redux-auth-starter](https://github.com/Nilanth/cra-template-redux-auth-starter) a CRA template. Where you can overcome the above things by running a single command.

### **Advantages of Redux Auth Starter**

**1.** Preconfigured store, basic actions and reducers for authentication with [Redux](https://react-redux.js.org/).

*Redux: A Predictable State Container for JS Apps*

**2.** Public, Private routes setup with basic authentication using React-Router.

*Not required to write logic to restrict the user to access private routes before login and public routes after login.*

**3.** Preinstalled [Ant Design](https://ant.design/) for UI components.

*Ant Desing is an Enterprise-class UI designed for web applications and a set of high-quality React components out of the box.*

![1_QfC3CWTkOt6TXGuXxdhroQ](https://dev-to-uploads.s3.amazonaws.com/i/sgujjlq6y9g7e2otu2d7.png)
 

**4.** [Axios](https://github.com/axios/axios) client with GET, POST, PATCH, DELETE API verb helper.

*Preconfigured helpers for accessing API using Axios.*

**5.** Absolute imports

```
No need use ../../../.. to import your components
```
**6.** Basic Folder structure with easily customizable.

```
├── README.md
├── jsconfig.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── Config
│   │   ├── axiosClient.js
│   │   └── constants.js
│   ├── components
│   │   ├── Dashboard.js
│   │   ├── LoginPage.js
│   │   └── Users.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── redux
│   │   ├── Authenticate
│   │   │   ├── actions.js
│   │   │   ├── reducer.js
│   │   │   └── saga.js
│   │   ├── rootReducers.js
│   │   ├── rootSaga.js
│   │   └── store.js
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock
```


**7.** [Sass](https://sass-lang.com/) enabled. You can use all the sass features.

*Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world.*

**8.** Mock Authentication with [reqres](https://reqres.in/).

**9.** ESLint with custom config file

*ESLint statically analyzes your code to quickly find problems.*

**10.** Added .env file

*The environment variables are embedded during the build time*

**11.** By running a single command

```
yarn create react-app your-project-name --template redux-auth-starter
```

### Or

```
npx create-react-app your-project-name --template redux-auth-starter
```

Use [redux auth starter](https://github.com/Nilanth/cra-template-redux-auth-starter) to fasten your development.

......

**You can support me [by buying me a coffee](https://buymeacoffee.com/nilanth) ☕**

## Ebook

[Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples](https://nilanth.gumroad.com/l/ztehh)