create-react-redux-saga-app

create-react-redux-saga-app relies on create-react-app which will need to be installed separately. Instructions can be found here.

Overview

A thin wrapper around create-react-app

This project is a thin wrapper around Facebook's create-react-app but adds the following common libraries needed for most medium to large-sized web apps:

Name	Description
redux	Redux is a predictable state container for JavaScript apps
react-redux	Official React bindings for Redux. Performant and flexible
redux-actions	Flux Standard Action utilities for Redux
redux-debounced	Debounce middleware for Redux
redux-saga	An intuitive Redux side effect manager. Easy to manage, easy to test, and executes efficiently
axios	Promise based HTTP client for the browser and node.js
sass	A pure JavaScript implementation of Sass. Sass makes CSS fun again
bootstrap	Sleek, intuitive, and powerful front-end framework for faster and easier web development
react-bootstrap	Bootstrap 5 components built with React
react-router-dom	The react-router-dom package contains bindings for using React Router in web applications
plop	Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity
eslint	ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. In many ways, it is similar to JSLint and JSHint with a few exceptions
prettier	Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary
babel	Babel plugin to add the opportunity to use import and require with root based paths
customize-cra	This project provides a set of utilities to customize create-react-app versions 2 and 3 configurations leveraging react-app-rewired core functionalities
react-app-rewired	Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts

Installation

Install create-react-redux-saga-app globally

1npm install -g create-react-redux-saga-app

Creating an App

To create a new app, run

1create-react-redux-saga-app my-app-name

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

npm run build

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.

npm run generate redux

Runs the command to generate code redux and api base on plop-templates/redux

What you get?

create-react-redux-saga-app not only installs the latest versions of the above-described packages, but also overwrites some of the default template files included with create-react-app, specifically:

It will create a directory called my-app-name inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── .vscode
├── node_modules
├── plop-templates
├── public
    ├── htaccess
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── src
    ├── assets
    ├── components
    ├── configs
    ├── constants
    ├── helpers
    ├── layouts
    ├── pages
    ├── redux
    ├── routers
    ├── services
    ├── styles
    ├── App.js
    ├── index.js
    └── reportWebVitals.js
├── .env.example
├── .eslintrc.js
├── .gitignore
├── config-overrides.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── plopfile.mjs
└── README.md

Get in touch