CODEWITHSUNDEEP
angularjbosswildflyweb-deployment
user12
user12

Reputation: 239

Angular 5 standalone deployment on jboss 7.1.1

I have built an angular 5 app which is consuming rest api available remotely on different server and host. In my local I am using apache server to deploy the angular app which is working as expected.

To promote code to other envs, I have built the production build using "ng build --prod" (angular cli) and I see the final contents in dist folder. I think from angular standards, it will be compatible and better suggested to deploy angular 4/5 apps using apache server,Ngnix etc . But according to my organization restrictions, we have to use jboss for the web-app to host. I don't have war file. All I have is contents of dist folder. can you please help me to deploy angular app to jboss?

Screenshot of dist folder contents

Upvotes: 5

Views: 15338

Answers (4)

Spithas
Spithas

Reputation: 381

You can build your app with the following command:

ng build --prod --deploy-url='myApp/' --outputPath='dist/myApp.war'

the --deploy-url will handle the references for the produced *.js. if you have problem with your assets, create an index.prod.html with the correct references i.e

<link href="/myApp/assets/css/pe-icon-7-stroke.css" rel="stylesheet" />

Then add the following in the angular.json

"production": {
      "fileReplacements": [
        {
          "replace": "src/index.html",
          "with": "src/index.prod.html"
        }

To deploy copy myApp.war to jboss_dir/standalone/deployments, and perform touch jboss_dir/standalone/deployments/myApp.war.dodeploy

Upvotes: 0

Panneerselvam
Panneerselvam

Reputation: 421

  1. Install grunt and grunt-war using npm command
  2. Add the below Gruntfile.js in your angular project which means inside your project folder
  3. run "ng build" command and it would produce the dist folder
  4. Go to the project folder and run the "grunt war" command and it will give you the war file as the result which can be deployed into your jboss server
  5. You can change the war file name/war output path and I gave "Test" as the war file name and "warFile" is the output folder.

Gruntfile.js :

module.exports = function ( grunt ) {
    grunt.loadNpmTasks( 'grunt-war' );

    var taskConfig = {
        war: {
            target: {
                options: {
                    war_verbose: true,
                    war_dist_folder: 'warFile',           // Folder path seperator added at runtime. 
                    war_name: 'Test',            // .war will be appended if omitted 
                    webxml_welcome: 'index.html',
                    webxml_display_name: 'Test'
                },
                files: [
                    {
                        expand: true,
                        cwd: 'dist',
                        src: ['**'],
                        dest: ''
                    }
                ]
            }
        }
    };

    grunt.initConfig( taskConfig );
};

Upvotes: 1

ChokYeeFan
ChokYeeFan

Reputation: 293

We have same requirement, this is how we generate the *.war and manage to deploy into jboss/wildfly application.

Before doing this, required the gulp installed into your machine. And libraries in required('****') have be in package.json devDependencies, otherwise will hit error.

  1. index.html change to <base href="/">
  2. Use gulp to generate the *.war file.
  3. Create gulpfile.jsput the code:

`

var gulp = require('gulp')
, war = require('gulp-war')
, zip = require('gulp-zip')
, clean = require('gulp-clean')
, runSequence = require('run-sequence'),

const distWar='./distwar';
const warFileName='lovely';
// This will run in this order: 
// * build-clean 
// * build-scripts and build-styles in parallel 
// * build-html 
// * Finally call the callback function 
gulp.task('build:war', function (callback) {
runSequence(
    'war:clean-dist',
    'war:build-war',
    callback);
});

gulp.task('war:clean-dist', function () {
return gulp.src(distWar, { read: false })
    .pipe(clean());
});

gulp.task('war:build-war', function () {
gulp.src(["dist/**"])
    .pipe(war({
        welcome: 'index.html',
        displayName: warFileName
    }))
    .pipe(zip(warFileName+'.war'))
    .pipe(gulp.dest(distWar));
});

`

  1. Run command gulp build:war at your gulpfile.js directory.
  2. Your lovely.war will appear at directory ./distwar/
  3. Copy the lovely.war into standalone wildfly directory.
  4. Url will be http://localhost:8080/lovely/
  5. Done. Enjoy your life.

Upvotes: 0

Amit Nijhawan
Amit Nijhawan

Reputation: 313

Without having war i am not sure that angular app will be deployed on jboss.

To deploy your AngularJS application on JBoss, I'd suggest you to create a web project and have it builded and packaged as a ready-to-deploy WAR archive using a build manager such as Maven.

As an example, you can follow the kitchensink-angularjs quickstart provided by JBoss.

Upvotes: 0

Related Questions