Start your react typescript project with manual webpack config in seconds

Flexible to control webpack, easy to deploy

_{Keywords: React Starter, Webpack, Typescript, React.js, Redux, Babel, jest, react-router, sass, redux-thunk, pm2}

_{Created with by 👻 Aldenn}

Overview

React-Typescript-Webpack was config with React, Typescript and Webpack without CRA. Faster to star next react project.

Quick Start

For Development:

Clone this repo to your local machine using:

git clone git@github.com:thaind97git/react-typescript-webpack.git

Change the current working directory to the project:
```
cd react-typescript-webpack
```
Install dependencies:
```
[ yarn or npm ] install
```
At this point you can run npm run dev or yarn dev to run project with development mode

Now, your browser will auto open at http://127.0.0.1:3000

For Production:

Run command to build:
```
[ yarn or npm run ] build
```
Run project at build directory
- Using pm2: [ yarn or npm run ] start-pm2
- Run with terminal: [ yarn or npm run ] start

Features

How to using

Router:

Create new feature at src/features/<feature-name/>

Create a route.ts inside src/features/<feature-name/> and export a default array match with rules:

import { lazy } from 'react';
const Component = lazy(() => import('./path-to-component'));

export default [
  {
    /*
     * name of a route
     * using to apply key react when generate routes
     * required
    */
    name: 'name',
    /*
     * path of route
    */
    path: '/path-name',
    /*
     * using as exact in react-router
    */
    exact: true,
    /*
     * dynamic render layout for each route
     * header: false -> route will auto hide header
     * if this rendered don't need to declare
     * control this inside `src/store/slices/layoutSlice` with more section
    */
    layout: {
      header: false,
      footer: false,
    },
    /*
     * component rendered inside route
    */
    component: Component,
  },
];

- You don't need do anything else after create and modify route.ts because i'm using import-glob to auto import (check at webpack/webpack.common.js for plugin, src/router/index.ts and src/layouts/main/index.tsx for using).

- If you don't want to use auto import or using project with jest, just using the code that i'm commented. Because i'm not yet support auto import for jest.

Write new component
- Create new folder at src/components/<component-name/>
- Create an index.tsx and style.scss
  
  - Don't need import scss into component, It will already merged into App.scss after you restart server.
  
  - This is a feature by using import-glob (check at webpack/webpack.common.js for plugin and src/styles/App.scss for using)
  
  - You should use BEM to write css without conflict

Carefully

Don't create folder with the PascalCase. Because it will throw error when build prod at ubuntu. I will fix it later or happy if you have a PR to fix it.
```
Module not found: Error: Can't resolve '@/path-to-pascal-case' in '/path-to-lower-case'
```

Other References

Webpack Plugins
- ts-loader
- import-glob
- eslint-loader
- babel-loader
- svg-loader
- sass, sass-loader
- html-loader
- alias
- webpack-manifest-plugin
- ...
React-scripts CRA
Husky
Lint-Staged