RTZN React Template

alt text

alt text

A ReactJS template with basic routing, state management, and themed pages already set up to be customized. It is also Dockerized, allowing easy deployment to cloud services such as AWS, GCP, Azure, etc.

A quick setup guide is described below using npm. Yarn will be implemented in the future.

Dev Dependencies

All

Babel

  • @babel/core
  • @babel/cli
  • @babel/preset-env
  • @babel/preset-react

Webpack

  • webpack
  • webpack-cli
  • webpack-dev-server

Loaders

  • style-loader
  • css-loader
  • file-loader
  • babel-loader

Testing

  • babel-jest
  • jest
  • react-test-renderer

Miscellaneous

  • @svgr/webpack
  • assert
  • buffer
  • cross-env
  • dotenv
  • dotenv-webpack
  • https-browserify
  • os-browserify
  • stream-browserify
  • stream-http
  • url
  • util

Install Command

npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server style-loader css-loader file-loader babel-loader @svgr/webpack assert buffer dotenv dotenv-webpack https-browserify os-browserify stream-browserify stream-http url util

Regular Dependencies

All

React

  • react
  • react-dom
  • react-router-dom

Redux

  • @reduxjs/toolkit
  • react-redux

CSS-in-JS

  • react-jss

Miscellaneous

  • clsx

Install Command

npm i react react-dom react-router-dom @reduxjs/toolkit react-redux react-jss clsx

Quick Setup

Install All Dependencies

NPM

npm i

Yarn

Coming soon.

Running a Development Server

Run Scripts

NPM

npm run dev

Yarn

Coming soon.

Building the Project

Build Scripts

NPM (Production)

npm run build

Yarn

Coming soon.

Running a Production Server

Run Scripts

NPM

npm start

Yarn

Coming soon.

Screenshots

Index Page

Light

alt text

Dark

alt text

Not Found Page

Light

alt text

Dark

alt text

GitHub

View Github