Created with by 👻 Aldenn
React-Typescript-Webpack was config with React, Typescript and Webpack without CRA. Faster to start your next react project.
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 devoryarn devto run project with development modeNow, your browser will auto open at
http://127.0.0.1:3000
For Production:
-
Run command to build:
[ yarn or npm run ] build
-
Setup env for production mode by create new file
.env.production -
Run project at build directory
- Using pm2:
[ yarn or npm run ] start-pm2 - Run with terminal:
[ yarn or npm run ] start
- Using pm2:
- React hook
- Webpack 5
- Typescript
- Sass
- Redux-thunk
- Redux-saga
- Jest
- Axios
- I18n [Not completed]
- React-router
- Alias
- Hot reload
- Eslint
- Prettier and Husky
-
Router:
-
Create new feature at
src/features/<feature-name/> -
Create a
route.tsinsidesrc/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.tsbecause i'm using import-glob to auto import (check atwebpack/webpack.common.jsfor plugin,src/router/index.tsandsrc/layouts/main/index.tsxfor 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.tsxand<any-name>.scss- Don't need import
scssinto 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.jsfor plugin andsrc/styles/App.scssfor using)- You should use BEM to write css without conflict
-
- Go to
.huskyinstall, remove comment at line 37 and run[yarn or npm install]again to apply run test when usinggit push origin [ branch ] - Go to
config/@types/[any-file-name].d.tsto declare global type of typescript - Go to
pm2/prod.jsonand change "name:react-webpack-typescript-starter->[other-name]" to config pm2 app name - Go to
components/spinner/index.tsxand modify jsx + css to use another loading
- 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'
- Webpack Plugins
- React-scripts CRA
- Husky
- Lint-Staged
This project is licensed under the MIT license, Copyright (c) 2021 Aldenn.
For more information see LICENSE.md.