HOWTO: Develop with Angular2

Angular by Google is the successor of the much used AngularJS. It was also built to bring front-end developers all the tools they may need to turn a website into a modern web application across all platforms. Angular is a great all-in-one framework that provides many features and answers your front-end and mobile needs.

But your application also needs a serious back end that will allow you to build your application quickly and concentrate on features without reinventing the wheel. This is what the Nuxeo Platform provides you with. When users browse your web application, it will actually call the Nuxeo Platform through its REST API in order to handle and retrieve content.

Angular has lots of different stacks, and it can be difficult to find the one that fits our needs. That's why we created a dedicated bootstrap in Nuxeo CLI.

Step 4 - Understanding NPM Command List

All commands are accessible using the npm run base command. For instance, if you'd like to execute the start command:

$ npm run start

Take a deeper look at the package.json file to get them all; here is a list of commons ones:

start, server:dev: Start a dev server on the local port 3000, initiate a proxy between /nuxeo to http://NUXEO_SERVER/nuxeo and watch scripts files. The application is reloaded when the sources are modified.

build:prod: Package application as Maven resources in target folder

clean: Clean all webpack generated files

lint: Run the TypeScript linter on your sources

test: Run Karma tests

e2e: Run integration tests (e2e) using Protractor

ci: Run lint, test and e2e

Deployment Options

This setup is particularly interesting when using a Nuxeo Cloud instance. No setup, no administration needed, and full scalability. By configuring your Nuxeo Platform instance, people will be redirected to your custom interface and the overall setup is transparent.

If you bootstrapped your project with the Nuxeo's package, simply go to the root of your project, then:

$ cd <root_project>
$ mvn package

Your package is built under myapp-package/target/myapp-package.zip, and contains your Angular application.

Otherwise, if you prefer to handle the Nuxeo Bundle by yourself, go to the root of your Angular module, then:

$ cd myapp-web
$ mvn package

The Nuxeo Bundle under myapp-web/target/myapp-web-1.0-SNAPSHOT.jar contains your Angular application and can be deployed in NUXEO_SERVER/nxserver/bundles directly.