{"id":19024933,"url":"https://github.com/sonujose/angular-webpack-express","last_synced_at":"2025-08-09T12:40:37.965Z","repository":{"id":115803442,"uuid":"73946476","full_name":"sonujose/angular-webpack-express","owner":"sonujose","description":"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. ","archived":false,"fork":false,"pushed_at":"2016-11-27T10:51:39.000Z","size":1220,"stargazers_count":5,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T12:49:42.484Z","etag":null,"topics":["angularjs","express","javascript","nodejs","web","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonujose.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-16T17:58:36.000Z","updated_at":"2019-02-11T10:12:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"9c3579fc-8e10-42b9-b044-05ea20f9726b","html_url":"https://github.com/sonujose/angular-webpack-express","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sonujose/angular-webpack-express","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonujose%2Fangular-webpack-express","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonujose%2Fangular-webpack-express/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonujose%2Fangular-webpack-express/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonujose%2Fangular-webpack-express/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonujose","download_url":"https://codeload.github.com/sonujose/angular-webpack-express/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonujose%2Fangular-webpack-express/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267941250,"owners_count":24169519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","express","javascript","nodejs","web","webpack"],"created_at":"2024-11-08T20:39:35.305Z","updated_at":"2025-07-30T21:02:29.202Z","avatar_url":"https://github.com/sonujose.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularJS Nodejs full-stack Kit\n**(Webpack, ES2015, Express, Sass, Babel)**  \n\nIt is a full stack project for AngularJS web application which objects is:\n- Webpack build and bundle all the assests.\n- Provide easy to use extensibility with npm managers;\n- Mockup server for your application;\n- Supports ES2015 using Babel \n- Supports SASS for styling you application\n- Give the basic folders and modules structure of angular application;\n\n## Future Updates (Working on it)\n- Integrate MongoDB\n\n## Installation\n\n1) Create a new folder for your project, and clone this repo inside it\n```\ngit clone https://github.com/sonujose/Angular-Node-Fullstack.git\n```\n2) 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]\n   To update npm version run `npm install npm@latest -g`\n\n3) Install webpack if you don't have it already. Need webpack cli for running the application \n```\nnpm install --global webpack\n```\n4) Install all npm dependencies\n```\nnpm install\n```\n5) Run the server \n```\nnpm test\n```\n6) Run the application (Webpack --watch) [open another terminal]\n```\nnpm start\n```\n7) Wait untill webpack bundles all your files and server, Browser will open `http://localhost:8080`\n\n8) Congratulations, you've just setup your Angular Node fullstack application!\n\n### Basic folder structure\nSome job for Captain Obvious\n```\nclient/           // Client side files\nnode_modules/     // Node Modules\nserver/           // Server side files\nindex.html        // Basic page for angular project\n```\n\n### Client folder structure\n\n```\napp/          // Angular app files\nbuild/        // concatenated assets generated by gulp\nwebpack-build // concatenated assets generated by webpack\nstyles/       // Your general scss files which will includes in main entry for application scss\napp.js        // Main entry for angular app with router config\nvendor.js     // Main entry for vendor js .[currently not added , can be added if you need other modules, refer that in webpack vendor entry]\n```\n\n### Server Folder Structure\n```\ndata/         // Folder with mockup json data for server api\n  test.json     // Mockup json file whic will be returned to the client by server api\nlibs/         // Folder with server libs\n  loader.js     // Json files loader\nroutes.js     // Server routes\nserver.js     // Main server file which create and setup express application\n```\n## Usage\n\n####1) How do I start creating my own app  \nJust see angular folder structure comments and look at the existing components and shared modules.  \nIt'll give you the picture of overall application structure.  \nSo 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..\nThe 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.  \n\n####2) How can I style my app  \nFor 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.  \nscss 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.\n\n####3) How to use bootstrap styles\nInorder 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\n\n####4) How can I install extension\nTo 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. \nIf this extension has its own styles you can just `@import` it from vendor.scss  \n**note:** if you want to import `.css` file create root-relative path for it `/client/vendor/..` or `/node_modules/..`  \n\n####5) How can I use mockup server  \nWhen you've run `npm test` you automatically start the node server with express.    \nIf you want to add your api route - just go to the `server/routes.js` and create one (use test route as example).  \nAdd 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.\n\n####6) Using webpack\nHere 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`.\nThe output of bundled files are in the `client/build` file. if you need to test webpack bundling just run command `webpack` \n\n####7) ES2015 is supported (can be upgraded to ECMA Script latest version) \nAll 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`\n\n####8) Analyze your webpack modules\n1) Run \n```\nwebpack --profile --json \u003e\u003e stats.json\n```\n2) open\n```\nhttp://webpack.github.io/analyse/#modules\n```\n3) upload stats.json file from your repository\n\n## Have FuN\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonujose%2Fangular-webpack-express","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonujose%2Fangular-webpack-express","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonujose%2Fangular-webpack-express/lists"}