React app with Typescript and custom Webpack config

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install lts/gallium
npm i -g npm
npm i -g ts-node typescript
npm i -g create-react-app
create-react-app cra --use-npm --template typescript
mkdir project
cd project
git clone git@github.com:evheniy/react-webpack-typescript.git .
npm ci
npm start
npm init -f
# The Project## InstallationTo install node.js using NVM run:```bash
nvm install
nvm use
```
Then install all dependencies:```bash
npm ci
```
## Using### DevelopmentTo run the project in development mode:```bash
npm start
```
### ProductionTo build the project for production:```bash
npm run build
```
### TestingTo run tests:```bash
npm test
```
# EditorConfig is awesome: http://EditorConfig.org# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Set default charse
charset = utf-8
# 2 space indentation
indent_style = space
indent_size = 2
quote_type=single
max_line_length=120
lts/fermium
tsc --init
mkdir -p config/ts
mv tsconfig.json config/ts/base.json
npm i ts-node typescript
{
"extends": "./config/ts/base.json",
"compilerOptions": {
"declaration": false
},
"include": [
"src",
"webpack",
"webpack.config.ts",
"jest.config.ts",
"declarations.d.ts",
],
"exclude": [
"build",
"coverage"
]
}
# Browsers that we support
>0.2%
# not dead
not ie <= 11
not op_mini all
node_modules
build
coverage
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": [
"./tsconfig.json"
]
},
"plugins": [
"@typescript-eslint",
"react-hooks"
],
"extends": [
"airbnb",
"airbnb-typescript",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
]
}
npm i eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i jest @types/jest identity-obj-proxy
npm i react-test-renderer @types/react-test-renderer
npx jest --init
  • Nodejs types + some useful packages for npm scripts
npm i @types/node npm-run-all rimraf
  • webpack
npm i webpack @types/webpack webpack-cli webpack-dev-server @types/webpack-dev-server
  • Babel
npm i @babel/core @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/preset-typescript @babel/runtime
  • sass
npm i sass
  • postcss
npm i postcss cssnano postcss-preset-env
  • Webpack plugins
npm i terser-webpack-plugin mini-css-extract-plugin html-webpack-plugin @types/mini-css-extract-plugin
  • Webpack loaders
npm i babel-loader css-loader file-loader image-webpack-loader postcss-loader resolve-url-loader sass-loader style-loader ts-loader
  • React
npm i react react-dom raf react-hot-loader @hot-loader/react-dom @types/react @types/react-dom
mkdir -p config/webpack/rules
  • config/webpack/rules/loaders.ts
  • config/webpack/rules/rules.ts
  • config/webpack/rules/index.ts
  • config/webpack/dev_server.ts
  • config/webpack/devtools.ts
  • config/webpack/plugins.ts
  • config/webpack/index.ts
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production",
"test": "npm-run-all 'test:*'",
"test:lint": "npm-run-all 'lint:*'",
"test:code": "jest",
"test:build": "npm run build",
"lint:ts": "tsc --noemit",
"lint:code": "eslint . --ext .js,.jsx,.ts,.tsx",
"prebuild": "rimraf build",
"postbuild": "cp public/* build",
"pretest": "rimraf coverage"
},
  • start
  • build
  • test

I can help with IT infrastructure (AWS), apps (Node.js + React) and teams.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build your own unbeatable Tic Tac Toe with React Hooks and Styled Components

Randomized-string Node module package

HOW TO CREATE A DARK/LIGHT THEME TOGGLE

Angular: Animate with *ngIf/*ngFor

How a Few Lines of Code Can Tell You What Your Users Are Seeing

How to make an LED Blink

OOP concept in JavaScript

How to hide an API key 👀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Evheniy Bystrov

Evheniy Bystrov

I can help with IT infrastructure (AWS), apps (Node.js + React) and teams.

More from Medium

How to easily create JS libraries compatible with ES/AMD/UMD/CJS module systems using Nx

Row grouping when you have cell renderer — AG Grid with React and Typescript

Build and Package an NPM Component with esbuild, React and TypeScript

ESBuild, React and Typescript

Web Design — Implement Adaptive Tooltips in React (TypeScript)