CODEWITHSUNDEEP
javascriptangularnpmsubdomain
Dov Benyomin Sohacheski
Dov Benyomin Sohacheski

Reputation: 7752

Multiple Angular2 Applications, Single Vendor Repository

I would like to host various Angular2 apps that utilize the same framework packages and node_modules from a root and subdomain:

  1. domain.com
  2. subdomain.domain.com
  3. sub2.domain.com

Folder Structure

public_html 
├── SUBDOMAINS
│   ├── sub2
│   │   ├── assets
│   │   └── src
│   └── subdomain
│       ├── assets
│       └── src
├── assets
├── boot.ts
├── index.html
├── node_modules
├── package.json
├── src
└── tsconfig.json

I want to be able to utilize the resources of the root app and not need to duplicate code.

Upvotes: 3

Views: 468

Answers (1)

AishApp
AishApp

Reputation: 4162

One method to do this is to use webpack and gulp. You need to use commonjs as module in your tsconfig.json.

  • Use webpack to pack every individual projects ts files as a bundle.
  • With the help of gulp task you can group every project in different
    destination folder.
  • Create index.html file for each projects destination folder and include your js/ts bundles in it as scripts.

  • Use webpack dev server to listen different port for every projects index.html file.

    gulp.task("webpack-dev-serverWeb", function(callback) {
var myConfig = Object.create(webpackConfig);
new myWebpackDevServer(mywebpack(myConfig), {
    publicPath: "/" + myConfig.output.publicPath,
    stats: {
        colors: true
    }
}).listen(8080, "localhost", function(err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/your_path_to_index.html_for_port_8080/index.html");
});

Upvotes: 2

Related Questions