https://github.com/frycz/angular-typescript-webpack-simple-boilerplate

Simple front-end application boilerplate with Typescript 2.9, Angular 6 and Webpack 4
https://github.com/frycz/angular-typescript-webpack-simple-boilerplate

angular6 boilerplate tslint typescript2 webpack4

Last synced: 27 days ago
JSON representation

Simple front-end application boilerplate with Typescript 2.9, Angular 6 and Webpack 4

• Host: GitHub
• URL: https://github.com/frycz/angular-typescript-webpack-simple-boilerplate
• Owner: frycz
• Created: 2016-10-23T11:18:19.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-13T21:52:26.000Z (almost 2 years ago)
• Last Synced: 2024-12-09T14:55:45.341Z (about 1 month ago)
• Topics: angular6, boilerplate, tslint, typescript2, webpack4
• Language: TypeScript
• Homepage: https://frycz.github.io/angular-typescript-webpack-simple-boilerplate/
• Size: 1.54 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple front-end boilerplate with Typescript, Angular and Webpack

"Chat" application presenting basic concepts of typescript, angular, webpack code transpilation and bundling. Ideal for educational purposes or very simple projects.

[Live demo](https://frycz.github.io/angular-typescript-webpack-simple-boilerplate/)

### Details

- a simple chat app

- on first open, chat asks for user's name and only after that user can proceed

- there is a .json file containing message author, date/time, user picture, message itself

- messages from the .json file are randomly posted to the chat 

- every new message is followed by sound

- user can also post to the chat

- on page reload the app does not ask for user’s name again as this information is be kept in cookies

- a very simple layout is provided

- there are tasks for linting, compilation and minification of Javascript using webpack

### Stack

Simple chat application is built with

- Typescript 2.9

- Angular 6

- Webpack 4

- Ts-lint

#### Concepts you can learn:

- basics of typescript

- basics of angular 6

- webpack configuration

  - using webpack 4 defaults

  - transpiling typescript to javascript

  - combining multiple files into one bundle

  - packing typescript, css, sound, png and json files into production directory

  - code minification for production

- code linting

### Setup

```

npm install

npm start

```

The application will start automatically in your default browser.

### Other tasks

build production bundle

```

npm run build

```

lint code

```

npm run lint

```