The First Real Angular 2 Boilerplate

A simple, complete, Angular 2 & Flask boilerplate featuring Sass, Pug, MaterializeCSS, JQuery, BassCSS, TypeScript, Webpack 2, Gunicorn/Tornado with LiveReload

🔥 The first real and simple boilerplate that will make you finally understand Angular 2 🔥

Features

Packed with the latest version of Angular 2
Webpack 2 with great plugins such as LiveReload and HtmlWebpackIncludeAssetsPlugin
Easy inclusion of external JS/CSS libraries
Sass, Pug, TS
Ready to be run using Gunicorn or Tornado
A simple Flask backend
Simple and elegant naming & placing conversions
Packed with MaterializeCSS, BassCSS, JQuery

Tested with NodeJS version 7.4.0 (NPM version 4.0.5)

Quick Start

Clone/Download the repo

// clone our repo
$ git clone https://github.com/amitassaraf/the-first-real-angular2-boilerplate.git my-app

// change directory to your app
$ cd my-app
$ cd src/frontend

// install the dependencies with npm
$ npm install

// start the server
$ npm start

// Enter the backend folder
$ cd ../tfra2bpflask

// start the flask server
$ sudo sh Profile
// or (on Windows)
$ python server.py

go to http://localhost:8000 in your browser.

# For production you should run:
$ npm run build

FAQ

When you want to add an external library all you need to do is drop it inside frontend/externals/libs then add the following line to libs.ts:

declare var [LibraryExportName]: any;

Examples are available in the boilerplate.

When you want to add a library that uses scss you should put the scss file inside frontend/externals then import it inside index.scss

@import "../../../externals/libs/materialize/sass/materialize";

File structure tree:

src
---> frontend
     ---> externals
          ---> libs # Here you place all external JS/CSS libs
               ...
          ...
     ---> src
          ---> app
               ---> components # Folder for all components
                    ---> home
                         home.pug # No more .component convention!
                         home.scss
                         home.ts
                    ---> about # Each component gets a folder with a pug, sass, ts files
                         about.pug
                         about.scss
                         about.ts
                    app.pug
                    app.scss
                    app.ts
               ---> services # Here you can place angular services
                    api_service.ts # No more .service.ts convension
                    ...
               ...
          package.json
          ....

TypeScript

To take full advantage of TypeScript with autocomplete you would have to use an editor with the correct TypeScript plugins.

License

MIT

Proudly created by Amit Assaraf & Ran Amos

Offline node modules -> https://tinyurl.com/z25xfa5

amitassaraf / the-first-real-angular2-boilerplate Goto Github PK