Skip to content

Latest commit

 

History

History
101 lines (58 loc) · 2.92 KB

README.md

File metadata and controls

101 lines (58 loc) · 2.92 KB
Raw

starter-webpack-angularjs

A starter for a project with AngularJS (1.x), Bootstrap (4.x) and Font Awesome (4.x) powered by Webpack (3.x).

  • Webpack configurations for development, production and test.
  • ES6, and ES7 support with Babel.
  • Add AngularJS DI with annotations (/* @ngInject */).
  • Source maps included in all builds.
  • Stylesheets with Autoprefixer and SASS (not required, it supports regular css too).
  • Development server with live reload and HMR.
  • Testing suite with Karma and Jasmine.

Quick start

Clone/Download the repo then edit app.js inside /src/app/app.js

# clone the repo
$ git clone https://github.com/ducrot/starter-webpack-angularjs.git my-app

# change directory to your app
$ cd my-app

# install the dependencies with yarn
$ yarn install

# start the server
$ yarn start

Go to http://localhost:8080 in your browser.

Getting Started

Dependencies

What you need to run this app:

  • node and yarn
  • Ensure you're running Node (>=v12.x and <=v14.x) and yarn (1.22.x+)

Installing

  • fork this repo
  • clone your fork
  • yarn install to install all dependencies

Developing

After you have installed all dependencies you can now start developing with:

  • yarn start

It will start a local server using webpack-dev-server which will watch, build (in-memory), and update with Hot Module Replacement (HMR). The application can be checked at http://localhost:8080.

Testing

Have a look at tests.webpack.js and src/app/components/home/home.controller.test.js.

  • Run: yarn test or yarn run test:live

Production

To build your application, run:

  • yarn build

You can now go to /dist and deploy that to your server!

FAQ

Do I need to add script / link tags into index.html ?

No, Webpack will add all the needed Javascript bundles as script tags and all the CSS files as link tags. The advantage is that you don't need to modify the index.html every time you build your solution to update the hashes.

How to include external angular libraries ?

It's simple, just install the lib via yarn and import it in your code when you need it. Don't forget that you need to configure some external libs inside /src/app/app.js.

Credits

ToDo

License

MIT License