Build output - war

[TomJahncke]

We have an existing angular 1 application with home grown gulp build. As we look to Angular 2 we a looking for a project just like angular-seed to perform the core build tasks that every project needs. Thank you for this project!

What I would like to be able to do is to have the output of the build be in a structure that could be packaged up into a war file and then deployed to any application server/container.

Please forgive me if my question is basic or off track I am new to this project and angular 2. If I am off track I am curious how most people run their application in production. Do you use node to server up the application? Ideally I would like to be able to have my angular 2 application severed up by Apache Web server.

To give even more context what we are doing is using spring boot to build the back-end and using the embedded tomcat server to server up the back-end. We are using that same application server to host the war file for the front-end. My angular 1 application uses npm, bower and gulp to build all the static content into a war and then the war is a dependence of the spring boot application.

Thanks!!

Tom

[RicardoD7I]

This is a very interesting question, I'm planning to deploy my NG2 application with nginx and some configurations to have the pushstate working properly. Having the application on nginx can be very fast since you can configure it very well for the static resources.

Thinking about that.... we should consider.

• angular2 universal (for SEO)
• CDN for the static resources will be great
• versioning for the static resources ( ? ) i.e.: /static/1.0/js/main.js

Some suggestions to achieve the best possible performance and SEO will be great and appreciated!

[mgechev]

For deployment I use a gulp task, which looks like this:

import * as gulp from 'gulp';
import * as util from 'gulp-util';
import * as chalk from 'chalk';
import { argv } from 'yargs';
import { PROD_DEST, APP_BASE } from '../../config';
import { bpTemplateLocals } from '../../utils';
import { getEnvConfig } from '../../utils/project/config_accessors';

const inquirer = require('inquirer');
const consume = require('stream-consume');
const branch = require('child_process').execSync('git rev-parse --abbrev-ref HEAD').toString();

const env = argv['config-env'];
const envString = chalk.bgYellow.black(env);
const currentEnv = getEnvConfig(env).DEPLOY_CONFIG;

if (env === 'prod' && branch !== 'production') {
  console.error(chalk.bgRed.white('You can deploy to production ONLY from the production branch.'));
  process.exit(1);
}

const task = (done: any) => {
  return inquirer
    .prompt([{
      type: 'input',
      message: `Are you sure you want to deploy to ${chalk.bgRed.white('production')}? (yes/no):`,
      name: 'confirm'
    }])
    .then((a: any) => {
      if (a.confirm.toLowerCase() === 'yes') {
        return gulpTask(done);
      }
    }).catch((e: any) => {
      console.log('Error while deploying to "production".');
    });
};

const gulpTask = (done?: any) => {
  console.log('Deploying');
  const stream = gulp.src(`${PROD_DEST}/**`)
    .pipe(require('gulp-rsync')({
      username: currentEnv.RSYNC_USER,
      root: PROD_DEST,
      hostname: currentEnv.RSYNC_HOST,
      destination: `${currentEnv.RSYNC_DEST}`
    }));
  if (done) {
    consume(stream.on('end', () => {
      done();
    }));
  } else {
    return stream;
  }
};

interface IRsyncHost {
  hostname: string;
  username: string;
  destination: string;
}

/**
 * Deployment tasks
 *
 */
export = (done: any) => {
  if (env === 'prod') {
    task(done);
  } else {
    return gulpTask();
  }
};

It basically rsyncs the dist/prod directory to the remote server. There's no point to build the application on the remote machine except that you may eventually save some bandwidth consumption.

[nxpatterns]

output -> war

1. define a destination directory e.g. in /tools/config/seed.config.ts

WAR_DEST = `${this.DIST_DIR}/`;

2. create a task in /tasks/project/build.war.ts:

import * as gulp from 'gulp';

var war = require('gulp-war');
var zip = require('gulp-zip');

import {
    APP_DEST, WAR_DEST
} from '../../config';

export = () => {

    return gulp.src(APP_DEST + '/**')
        .pipe(war({
            welcome: 'index.html',
            displayName: 'THE NAME OF MY APPLICATION',
        }))
        .pipe(zip('theNameOfMyApplication.war'))
        .pipe(gulp.dest(WAR_DEST));
};

3. add in gulpfile.ts your new task 'build.war' e.g. in 'build.prod' before done

[mgechev]

@webia1 added a wiki page with your comment.

[TomJahncke]

Thank you everyone for your responses.

I did realize what my challenge was ...

When I launched the application not with node/express either through webstorm or tomcat the root of my application was no longer "/" When I specified a value for the APP_BASE to match the configuration I was deploying to it worked.

Why is "/" the default APP_BASE as opposed to "" being the default.

Thanks.

[rajeev-tripathi]

@webia1 and @mgechev Thanks for putting this up.
I have the latest seed running. While following your steps

1. define a destination directory e.g. in /tools/config/seed.config.ts -- here as a good practice document says have all your modifications in project.config.ts So I moved this declaration and modified project.config.ts as
   `export class ProjectConfig extends SeedConfig {

PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');
// war destination directory
WAR_DEST = `${this.DIST_DIR}`;

2. created a build.war.ts task under folder tasks\project, the code is below
   `import * as gulp from 'gulp';
   import Config from '../../config';

let war = require('gulp-war');
let zip = require('gulp-zip');

export = () => {
return gulp.src(Config.APP_DEST + '/**')
.pipe(war({
welcome: 'index.html',
displayName: 'My App'
}))
.pipe(zip('my-app.war'))
.pipe(gulp.dest(Config.WAR_DEST));
};`

3. add in gulpfile.ts your new task 'build.war' e.g. in 'build.prod' before done
   -- Please help me in understanding the above point? With the latest seed files, I modified project.tasks.json as below
   { "test": [ "tslint", "build.test", "karma.run" ], "build.war": [ "build.war" ] }

4. Post this, I resolved gulp dependencies. And tried running npm run build.war it says 'Starting build.war'... and nothing happens. (Notes: I have already run build.prod/dev so my dest folder has those contents')

Please advice.