react-typescript-webpack

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

Quick Start

For Development:

1. Clone this repo to your local machine using:

   git clone [email protected]:thaind97git/react-typescript-webpack.git
   

2. Change the current working directory to the project:

   cd react-typescript-webpack
   

3. Install dependencies:

   [ yarn or npm install ]
   

4. 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:

1. Run command to build:

   [ yarn or npm run ] build
   

2. Setup env for production mode by create new file .env.production

3. Run project at build directory

   • Using pm2: [ yarn or npm run ] start-pm2
   • Run with terminal: [ yarn or npm run ] start

Features

• [x] React hook
• [x] Webpack 5
• [x] Typescript
• [x] Sass
• [x] Redux-thunk
• [ ] Redux-saga
• [x] Jest
• [x] Axios
• [x] I18n
• [x] React-router
• [x] Alias
• [x] Hot reload
• [x] Eslint
• [x] Prettier and Husky

How to using

• Router:

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

  • Create a route.ts inside src/features/<feature-name/> and export default an 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 for declare
         */
        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 <any-name>.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

• Using i18n

  • Create new json file at src/locales/resources/<file-name/>.json

  • Add content follow this format into json file

    {
      "en": {
        "name": "Name"
      },
      "vi": {
        "name": "Tên"
      }
    }
    

  • update src/locales/resources/index.ts like this:

    /*
     * you can use other name instead `user`
     * this name will be used as path to key
    */
    import user from './<file-name/>.json
    
    const mergeResource: IResource = {
      ..., // others json
      user
    };
    

  • Now inside any where, you can access to key like this:

      const { t } = useTranslation()
    
      t('user.name') will be render "Name" for `en` and "Tên" for `vi`
    

Tips

• Go to .huskyinstall, remove comment at line 37 and run [yarn or npm install] again to apply run test when using git push origin [ branch ]
• Go to config/@types/[any-file-name].d.ts to declare global type of typescript
• Go to pm2/prod.json and change "name: react-webpack-typescript-starter ->[other-name]" to config pm2 app name
• Go to components/spinner/index.tsx and modify jsx + css to use another loading

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'
  

GitHub

https://github.com/thaind97git/react-typescript-webpack