We are building single page application, using AngularJS and Spring Rest services along with spring boot. For front end build we are using grunt and for server site build maven. But we are not sure hove to build single WAR file which contains build out put from gunt and our java output.
Deployment server Tomcat.
Regards
Mahesh
You can give a try using maven-grunt plugin.
https://github.com/allegro/grunt-maven-plugin
I have the exact same setup. I am invoking grunt from maven.
From maven I invoke frontend-maven-plugin it actually downloads node binary and all node packages. And invokes grunt and bower. This essentially helps me build my project in any environment without installing node(even in Jekins server). Configure warSourceDirectory to read grunts output.
Related
First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.
I have built a basic angular 2 app. However I need to deploy it on Jboss or Tomcat as I need to use it along with my Java EE application.
Thanks for your help.
You would use a bundler such as angular-cli or webpack to create the production bundle which is then served by the HTTP server. The bundler creates all required file that go into the htdocs directory. Normally Angular apps are completely decoupled from your backend server so there shouldn't be any JBoss or Tomcat specifics.
The Angular team are going to increasingly focus on angular-cli as the premier bundling solution so it might be a good idea to start there.
If you are using angular-cli you can use ng build command. It creates all static files for deploy Angular2 app into the dist folder. You must copy and paste them in webresources folder of your Web Application (WAR). At the moment I am looking for how to deploy this files easier.
I am presently reading Manning's AngularJS in Action by Lukas Ruebbelke
The introductory part suggests,
Because you’re pulling files from a CDN, you’ll need to run
Angello Lite(the application name) from a web server. There are a few ways to do this, but one of the easiest ways is to use the npm package serve.
The steps for installing Angello Lite are as follows:
■ Install Node.js. You can find all of the information to do that at http://
nodejs.org/.
■ Install the serve package by running npm install -g serve from the command
line.
■ Download Angello Lite from GitHub, using the URL given above, and place it
on your local machine in a directory named angello-lite.
■ Navigate to the angello-lite directory from the command line and run serve.
■ Go to http://localhost:3000 in your browser to see the application.
Does learning Angular JS require previous exposure to node and git?
If I have Apache Tomcat already configured on my local m/c, what is the procedure to start with it?
Furthermore, just to keep in sync with the author, I installed git and then cloned a dir onto my local m/c from github.
Then i install node.js and Install the serve package by runningnpm install -g servefrom the command line.
Unfortunately when i navigate to the angello-lite directory from the command line and run serve, it shows me
where angello-lite is the repository where the application resides?
Any suggestions on how to configure successfully?
I have no idea regarding node.js and git. Do i really need to learn
these to begin with AngularJS then.
No, that's not a requirement. You don't even need a web server. You can have your static HTML files locally or use some online service like plnkr. Obviously if you need to work with dynamic data then you will need a web server. At some point you might want to start making AJAX calls in order to fetch some dynamic data from your server backend.
If I have Apache Tomcat already configured on my local m/c, what is
the procedure to start with it?
Just add an HTML page to the root of your website, open your favorite browser and invoke this page.
You don't need those tools to learn Angular - you can download latest package from the AngularJS website (both for development and for production).
Node.js and Git may be necessary to pull and build packages from the NPM, run tasks and many more great features, but just to learn Angular all you need is its code.
I've just used Yeoman to create an Angular project that looks great when I run grunt serve. But then I decided to view it by running http-server, and the page gets displayed without the formatting and without the images. Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?
I discovered that I had to run grunt to build the project which fixes the references and places a distribution uglified version of the project in a dist folder. This ran just fine on my other server.
"Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?"
Yes, you will run into this problem on your web hosting server.
grunt-serve serves the app used the setup on your local machine.
http-server mimics how a real web hosting server would evaluate your references.
My development routine is to use grunt-serve until I have a working version and then use http-server to test it out and see if it would work before I push it to my web hosting server. As #cdavid mentioned, running grunt build from your dist directory should be sufficient for general dependency issues.
I have recently discovered Yeoman and it's great for the iterative process of building web apps. I am using the Angular-fullstack generator and when testing it works perfectly so far.
My question relates to how the "site" is build when executing "grunt build". This creates what I assume is intended to be a deployable version of the web app for a node express server.
The folder structure is as shown, the entry "html" file is in \dist\views. I would have expected in to be in the root folder.
Is it possible to build the webapp so it can be deployed on a more traditional server (i.e. Apache or IIS)?
I'm not sure exactly what you mean by "deploy on a more traditional server." You can get Node.js running on apache by looking here.
But do you mean on a server that just serves html and javascript, with no back end code? In that case use the Angular Generator. It creates a front-end only web app; just run grunt build and drop the contents of the dist folder straight where you want it served from.