/Angular-Meteor-Webpack

A quick & dirty sample project demonstrating use of Webpack2 as the client bundler on an Angular-Meteor project, specifically the Angular2-Meteor Boilerplate, using Meteor Client Bundler to bundle Meteor Atmosphere packages for use outside of Meteor Isobuild. For demonstration purposes only.

Primary LanguageTypeScriptMIT LicenseMIT

Angular-Meteor-Webpack

A quick & dirty sample project demonstrating use of Webpack2 as the client bundler on an Angular-Meteor project, specifically the Angular2-Meteor Boilerplate, using Meteor Client Bundler to bundle Meteor Atmosphere packages for use outside of Meteor Isobuild. For demonstration purposes only.

Prerequisities

  • node.js
  • MeteorJS

Usage

After downloading:

npm install

To launch:

npm run start

Open a browser to http://localhost:8080/

NPM Scripts

  • > npm run start - Run the Meteor application, served by webpack-dev-server at http://localhost:8080/.
  • > npm run meteor.reset - Resets Meteor's cache and clears the MongoDB collections.
  • > npm run meteor.run Runs only the Meteor server
  • > npm run webpack.dev Runs only the Angular-Meteor client via webpack-dev-server
  • > npm run meteor.client-bundle Runs meteor-client-bundler, needed when new client Atmosphere packages added`

History

How this project was made:

  • In a privileged command prompt:
git clone https://github.com/bsliran/angular2-meteor-base Angular-Meteor-Webpack
cd Angular-Meteor-Webpack
meteor add mongo
npm install
npm install --global meteor-client-bundler
mkdir meteor
move .meteor meteor\.meteor
move server meteor\server
mklink /d meteor\both both
mklink /d meteor\node_modules node_modules
mklink meteor\typings.d.ts typings.d.ts
mklink meteor\package.json package.json
  • Added meteor-client.config.json:
{
  "import": [
    "meteor-base",
    "mongo",
    "reactive-var",
    "tracker",
    "es5-shim",
    "autopublish",
    "insecure"
  ]
}
  • Bundled Atmosphere packages for loading via Webpack:
meteor-client bundle
  • Modified client\main.ts adding import 'meteor-client'; to add bundled Meteor Atmosphere packages
  • Modified tsconfig.json adding "meteor/**/*" to exclude array
  • Hacked together webpack.config.js based on
  • Modified package.json dependencies & devDependencies via npm install to add Webpack development dependencies used in webpack.config.js
  • Modified package.json scripts to function in new configuration