https://github.com/sonujose/developing-nodes
High performance full stack web solution. It used Webpack as build and bundling agent. Uses sass , ES2015 , Angularjs for front end. Backend is in Nodejs, Express serves as the api server.
https://github.com/sonujose/developing-nodes
angularjs firebase javascript nodejs-modules sass webpack
Last synced: 3 months ago
JSON representation
High performance full stack web solution. It used Webpack as build and bundling agent. Uses sass , ES2015 , Angularjs for front end. Backend is in Nodejs, Express serves as the api server.
- Host: GitHub
- URL: https://github.com/sonujose/developing-nodes
- Owner: sonujose
- License: mit
- Created: 2016-11-27T12:11:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-20T09:32:51.000Z (about 9 years ago)
- Last Synced: 2025-02-21T19:12:49.486Z (over 1 year ago)
- Topics: angularjs, firebase, javascript, nodejs-modules, sass, webpack
- Language: CSS
- Size: 489 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DevelopingNodes
**(Webpack, ES2015, Express, Sass, Babel)**
It is a full stack project for AngularJS web application which objects is:
- Webpack build and bundle all the assests.
- Provide easy to use extensibility with npm managers;
- Mockup server for your application;
- Supports ES2015 using Babel
- Supports SASS for styling you application
## Future Updates (Working on it)
- Using Firebase
## Installation
1) Create a new folder for your project, and clone this repo inside it
```
git clone https://github.com/sonujose/DevelopingNodes.git
```
2) You need to have node and npm installed on your system, `npm version should be grater than 3.x` [2.x version may create issues in loading some dependencies]. To update npm version run `npm install npm@latest -g`
3) Install webpack if you don't have it already. Need webpack cli for running the application
```
npm install --global webpack
```
4) Install all npm dependencies
```
npm install
```
5) Run the server (Both static files and api server)
```
npm start
```
6) Build the application (webpack --watch)
```
npm test
```
7) Wait untill webpack bundles all your files and server, App will open at `http://localhost:8080`
8) Congratulations!!! Your app is running.
#### Using webpack
Here webpack is used for bundling the js files. `webpack.config.js` file bundles the entire js files into two modules 'app' and 'vendor'. The bundles are then minified and used as reference in `index.html`.
The output of bundled files are in the `app/dist` folder. If you need to test webpack bundling just run command `webpack`
#### ES2015 is supported (can be upgraded to ECMA Script latest version)
All the js files inside app support es2015 , used babel loader as the transpiler for es2015. you can upgrade to latest ECMAScipt version in `package.json`, change the `presets` value of `babel` from`es2015` to `latest`
#### Analyze your webpack modules
1) Run
```
webpack --profile --json >> stats.json
```
2) open
```
http://webpack.github.io/analyse/#modules
```
3) upload stats.json file from your repository
### Have FUN!!