Aarni Halinen
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# Web 2.0 Frontend
|
|
|
|
Minimal starter kit with hot module replacement (HMR) for rapid development.
|
|
|
|
* **[React](https://facebook.github.io/react/)** (16.x)
|
|
* **[Webpack](https://webpack.js.org/)** (4.x)
|
|
* **[Typescript](https://www.typescriptlang.org/)** (2.x)
|
|
* **[Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/)** using [React Hot Loader](https://github.com/gaearon/react-hot-loader) (4.x)
|
|
* [Babel](http://babeljs.io/) (6.x)
|
|
* [SASS](http://sass-lang.com/)
|
|
* [Jest](https://facebook.github.io/jest/) - Testing framework for React applications
|
|
* Production build script
|
|
* Image loading/minification using [Image Webpack Loader](https://github.com/tcoopman/image-webpack-loader)
|
|
* Typescript compiling using [TS-Loader](https://webpack.js.org/guides/typescript/)
|
|
* Code quality (linting) for Typescript and SASS/CSS.
|
|
|
|
## Installation
|
|
|
|
1. Clone/download repo
|
|
2. Install node v14
|
|
3. `npm install`
|
|
|
|
## Usage
|
|
|
|
### Development
|
|
|
|
`npm start`
|
|
|
|
* Build app continously (HMR enabled)
|
|
* App served @ `http://localhost:3000`
|
|
|
|
### Create new component
|
|
|
|
`npm run plop`
|
|
|
|
* Create a new component interactively using plop templates
|
|
|
|
### Production
|
|
|
|
`npm run start-prod`
|
|
|
|
* Build app once (HMR disabled)
|
|
* App served @ `http://localhost:3000`
|
|
|
|
---
|
|
|
|
### All commands
|
|
|
|
Command | Description
|
|
--- | ---
|
|
`npm run start-dev` | Build app continously (HMR enabled) and serve @ `http://localhost:3000`
|
|
`npm run start-prod` | Build app once (HMR disabled) and serve @ `http://localhost:3000`
|
|
`npm run build` | Build app to `/dist/`
|
|
`npm run test` | Run e2e and unit tests
|
|
`npm run test:unit` | Run unit tests with Jest
|
|
`npm run test:e2e` | Run end-to-end tests with TestCafé
|
|
`npm run lint` | Run Typescript and SASS linter
|
|
`npm run lint:ts` | Run Typescript linter
|
|
`npm run lint:sass` | Run SASS linter
|
|
`npm run start` | (alias of `npm run start-dev`)
|
|
|
|
## See also
|
|
|
|
* [React Webpack Babel Starter](https://github.com/vikpe/react-webpack-babel-starter)
|
|
* [Isomorphic Webapp Starter](https://github.com/vikpe/isomorphic-webapp-starter)
|
|
|
|
## Copyright
|
|
|
|
Aalto-yliopiston Sähköinsinöörikilta ry |