A template for a typescript/sass web app, with polyfills and a CSS reset
- Webpack 4, Typescript, TSLint/ESLint, Sass
- Polyfills (core-js, regenerator-runtime) and a CSS reset (normalize.css)
- Hot reloading of stylesheets and selected TypeScript modules
- Source maps, css extraction
- Code minification in production mode
- Click the green Use this template button at the top, choose a name and clone it.
- Run
npm install
(you can ignore warnings forsass-loader
andfsevents
) - Replace the metadata in
package.json
- Insert the current year and your name in
LICENSE
after "Copyright (c)" - Search for comments starting with
TODO:
, here you probably have to do something - Start the development server with
npm start
- Start coding!
-
Typescript configuration with
- Source maps
esnext
module syntax, e.g.import { Foo } from 'bar'
strict
,noImplicitAny
: catches many bugs/mistakes with stricter type checking
-
TSLint/ESLint: Enforce good coding practices, as well as a uniform code style
- Indent with spaces
- No semicolons
- Single quotes for strings
- Trailing commas (better for diff tools)
- Enforce
const
/readonly
where possible - Enforce
===
in most cases - No fall-through in
switch
- ...
-
Webpack bundler
- Configured to bundle JS, TS, CSS and Sass files, with source maps
- Stylesheets are extracted to separate files
- Output is in
./dist
- Development mode, featuring live reloading and hot module replacement:
- Start development server with
npm start
(recommended) - Compile once with
npm run build
- Compile and watch for changes with
npm run watch
(no live reloading, no hot module replacement)
- Start development server with
- Production mode, featuring best code optimization:
- Compile with
npm run prod
- Run development server in production mode:
npm run serve
(not recommended)
- Compile with
-
index.ts
contains- Global imports for polyfills
- Stylesheets
normalize.css
andglobal-styles.sass
-
index.html
contains- Charset, language, viewport
- Roboto font
- Title, description
- Meta tags for social media
- Comment linking to a professional favicon generator
- Webpack script and stylesheet bundles
-
manifest.json
is a web app manifest.- You need to insert your app's info.
- You can set a background and theme color, and make various customizations.
- You can generate favicons in different sizes here.
- Go to
.tsconfig
and add"jsx": "react"
to the compilerOptions. - Install some dependencies:
npm install --save react react-dom npm install --save-dev @types/react @types/react-dom react-hot-loader
- Rename
index.ts
toindex.tsx
and change theentry
inwebpack.config.js
accordingly - Change
index.tsx
like this:- document.getElementById('app')!.textContent = 'Hello world!' + import * as React from 'react' + import * as ReactDOM from 'react-dom' + + ReactDOM.render(<div>Hello react!</div>, document.getElementById('app'))
- Add dependencies:
npm install --save-dev @types/jquery @types/bootstrap npm install --save jquery bootstrap
- Import in
index.ts
:import 'bootstrap' import $ from 'jquery'
- Replace in
index.sass
:- @import "~normalize.css/normalize.css" + @import "~bootstrap/dist/css/bootstrap.min.css"
- Add dependencies:
npm install --save-dev @types/lodash npm install --save lodash
- Import in
index.ts
:import _ from 'lodash'