https://github.com/sonujose/angular-webpack-express
A full stack web solution using Angularjs and Node. Uses Webpack as the build and bundling tool.It supports ES2015 and sass. Webpack-dev-server serves files locally. The API server is hosted using Express.
https://github.com/sonujose/angular-webpack-express
angularjs express javascript nodejs web webpack
Last synced: 11 months ago
JSON representation
A full stack web solution using Angularjs and Node. Uses Webpack as the build and bundling tool.It supports ES2015 and sass. Webpack-dev-server serves files locally. The API server is hosted using Express.
- Host: GitHub
- URL: https://github.com/sonujose/angular-webpack-express
- Owner: sonujose
- License: mit
- Created: 2016-11-16T17:58:36.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-27T10:51:39.000Z (over 9 years ago)
- Last Synced: 2025-04-23T12:49:42.484Z (about 1 year ago)
- Topics: angularjs, express, javascript, nodejs, web, webpack
- Language: JavaScript
- Homepage:
- Size: 1.16 MB
- Stars: 5
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AngularJS Nodejs full-stack Kit
**(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
- Give the basic folders and modules structure of angular application;
## Future Updates (Working on it)
- Integrate MongoDB
## Installation
1) Create a new folder for your project, and clone this repo inside it
```
git clone https://github.com/sonujose/Angular-Node-Fullstack.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
```
npm test
```
6) Run the application (Webpack --watch) [open another terminal]
```
npm start
```
7) Wait untill webpack bundles all your files and server, Browser will open `http://localhost:8080`
8) Congratulations, you've just setup your Angular Node fullstack application!
### Basic folder structure
Some job for Captain Obvious
```
client/ // Client side files
node_modules/ // Node Modules
server/ // Server side files
index.html // Basic page for angular project
```
### Client folder structure
```
app/ // Angular app files
build/ // concatenated assets generated by gulp
webpack-build // concatenated assets generated by webpack
styles/ // Your general scss files which will includes in main entry for application scss
app.js // Main entry for angular app with router config
vendor.js // Main entry for vendor js .[currently not added , can be added if you need other modules, refer that in webpack vendor entry]
```
### Server Folder Structure
```
data/ // Folder with mockup json data for server api
test.json // Mockup json file whic will be returned to the client by server api
libs/ // Folder with server libs
loader.js // Json files loader
routes.js // Server routes
server.js // Main server file which create and setup express application
```
## Usage
####1) How do I start creating my own app
Just see angular folder structure comments and look at the existing components and shared modules.
It'll give you the picture of overall application structure.
So basically: you have main angular file `client/app.modules.js`. It contains your main app which requires `components` and `shared` modules. Components modules contains all single components of your application (like pages for example or single use directives), and shared module contains all elements of your app like shared assets, directives, templates etc..
The main point here is using modular structure so later you can just delete the folder with your module and it's gone from your app completely (with all its directives, services, styles and views). So yes, you must put all files related to the module in its own folder, even the scss.
####2) How can I style my app
For styling you must use scss. The main entry for all your styles is `client/styles/app.scss`, you can include in it all partials scss from your application. You must have two kinds of partial scss files.
scss are organised as partials in the styles folder, containing partial folder for different types of styles , all those are imported in app.scss. Also styles for different components are put in their corresponding folders and are called from app.scss.
####3) How to use bootstrap styles
Inorder to use bootstrap styles you need to uncommnet requird styles from the `client/styles/vendors/bootstrap`. This is made inorder to decrease the file size of vendor styles
####4) How can I install extension
To add an extension to your app you must install it either from `npm`, then you just require it from `client/vendor.js` or load as dependency in webpack vendor entry.
If this extension has its own styles you can just `@import` it from vendor.scss
**note:** if you want to import `.css` file create root-relative path for it `/client/vendor/..` or `/node_modules/..`
####5) How can I use mockup server
When you've run `npm test` you automatically start the node server with express.
If you want to add your api route - just go to the `server/routes.js` and create one (use test route as example).
Add json file to the `server/data/` folder and send it body in your new route with `dataLoader`, or just send whatever you want in your route.
####6) 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 and are minified and used as reference in `index.html`.
The output of bundled files are in the `client/build` file. if you need to test webpack bundling just run command `webpack`
####7) 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`
####8) 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