No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
client
server
.gitignore
README.md
package.json
webpack.config.js

README.md

What is this?

This contains the skeleton project for

  • NodeJs
  • ExpressJs
  • AngularJs

Includes

  • script to concat JS files for browser

Does not include

  • Unit tests
  • linting

Quick Start

npm install 
npm run build-webpack 
npm start-dev # or you can use npm start for production environment

Project Structure

|-- client
    |-- css
        main.scss : Entry point for Webpack. All other SCSS files will be included from here.
        menu.scss : Example scss file.
        
    |-- js: Javascript source files for the front end
        |-- services : all the Angular services the application might need
        configureStates.js : all the states needed for ui-router is declared here.
        mainApp.js : entry point for Webpack.  
    
    |-- public: static front end files
        index.html : Loads Angular from a public CDN, and includes all of Webpack's artifacts / bundles.
        
|-- server: all the server source files
    |-- controllers: all the controllers.
        UserController.js : example controller.
    
    RestRouter.js : all the rest endpoints are declared here. 
    StartServer.js : starts the Express server
    StopServer.js : Code to execute before the server is stopped should be added here.
    StaticRouter.js : The idea is to map other static resources (besides client/public) here. I might need to rename this.
    WebpackRouter.js : After Webpack creates all the artifacts / bundles, we use this router to make it available to the browser. 

|-- webpackartifacts: build artifacts from Webpack
README.md
package.json
webpack.config.js: config for Webpack
  
   

Express

Express is used to

  • serve static files (from the client/public folder)
  • serve generated artifacts (e.g. Webpack artifacts)

Webpack

I only use Webpack for a very small fraction of its full capabilities.

Webpack is used to concatenate all the angular source files, and (for production) minify them.

It will also compile SASS into a single CSS file. (Note that Webpack will also create a JS file so you can use the CSS styles in your JS scripts. But extract-text-webpack-plugin would have already extracted the CSS into its own file, causing the JS file to be useless.)

It will also bundle 3rd party vendors into a single bundle (vendor.js). It sounds simple, until I decided I wanted to load Angular from a CDN. So I have to exclude it from vendor.js. This is done by setting the externals object in webpack.config.js.

Webpack will generate a app.js.map for the browser. ExpressJS will detect if the NODE_ENV is development and if so, it will make app.js.map publicly accessible for the browser. Try a URL like http://localhost:3000/app.js.map to see if the map file is publicly available. Please see server/WebpackRouter.js for details.

It will be good to check webpack.config.js to know what the entry points are.

UI-Router

I use ui-router for Angular routing

Angular 1.x

I use Angular 1.x

Angular and CommonJS

I separate my modules using CommonJS. There are no plans to use AMD at the moment. By using Webpack to concatenate all my application files, most of the problems that AMD tries to solve are avoided.

Angular 1.x and $resource

I use ngResource to make all the REST calls.