abrarshariar / ng2-webpack-starter Goto Github PK

This is a barebone starter project for getting up and running with Angular 2 using the popular module bundler Webpack The directory structure has been kept as similar as possible to the Style Guide.

# clone this repo
$ git clone https://github.com/abrarShariar/ng2-webpack-starter.git ng2-webpack

# change directory to your app
$ cd ng2-webpack

# install the dependencies with npm
$ npm install

# start the webpack-dev-server
$ npm start

Your site is running at localhost:8081

• node and npm
• Ensure you're running Node (v5.x.x+) and NPM (3.x.x+)

Some important things to get acquainted with before you start coding :

• The following files are neccessary at your project root before you hit npm install

  package.json
  tsconfig.json
  typings.json
  karma.conf.js
  webpack.config.js
  

  Each of these files have specific purpose mentioned in the official docs

• For this starter kit the following files are kept in the /config folder

  helpers.js
  webpack.common.js
  webpack.dev.js
  webpack.prod.js
  

• Note that we only config webpack for development and production, test is excluded intentionally to keep things simple.

• We have the following structure in the /src folder:

  app/
    app.component.ts
    ...
    ..
  index.html
  main.ts
  polyfills.ts
  vendor.ts
  

• We take a look into our package.json file so that we get a basic understanding of what is going on with each command:

"scripts": { "start": "webpack-dev-server --inline --progress --port 8081", "test": "karma start", "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail", "postinstall": "typings install" }, ```

• Notice that I have changed my port to 8081

Note: In case you are having issues with localhost's port, change them from the following files:

```
package.json/
      "start": "webpack-dev-server --inline --progress --port 8081",
```

For webpack-dev-server
```
  config/webpack.dev.js/
```

If you are getting error make sure you have changed in *node_modules*

 
 ```
node_modules/
webpack-dev-server/bin/
webpack-dev-server.js
```

$ npm run build

You will find the dist folder at your project root for distribution.

Deploy on Firebase

Before proceeding make sure you have Firebase command line tools

At your project root enter :

$ firebase init
# set your root as dist

firebase.json is generated. We will keep it as default here.

$ firebase deploy

Your site will be running at your selected firebase location.

Note: Make sure you have set the dist folder as root.

<3 Angular 2

<3 Webpack