Nuxeo Server

HOWTO: Develop with Angular2

Updated: September 22, 2017 Page Information Edit on GitHub

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.

Our angular bootstrap comes with plenty of helpful tools:

  • Full webpack build module
  • Proxy between the webpack dev server and a running Nuxeo
  • TypeScript-based stack
  • Nuxeo JS Client included
  • All test and integration tooling
  • Build command to package application as Nuxeo bundle.

The whole tooling suite is based on AngularClass work.

Bootstrapping an Angular Project

This section will help you to get started on an Angular project. This will be covered in three steps:

  • Installing prerequisites
  • Using Nuxeo CLI
  • Building a Nuxeo Package that can be deployed on a Nuxeo Platform instance

Step 1 - Installing Prerequisites

In order to get a clean installation, we will make use of Nuxeo CLI. So let's install it along with its prerequisites:

  1. Install Git.
  2. Install node.js and ensure NPM is installed.
  3. In a terminal, use NPM to install the CLI tool:

    $ npm install -g nuxeo-cli
    

Step 2 - Bootstrap Nuxeo Bundle and Package

  1. Create a new folder.

    $ mkdir my-app && cd $_
    
  2. Call Nuxeo CLI to bootstrap Angular application with a Nuxeo Package modules.

    $ nuxeo bootstrap angular2 package
    

    You'll be prompted for some Maven or Name information, then an npm install command will be executed automatically to install dependencies.

  3. To start the built-in server to view your application:

    $ npm run start
    
  4. Navigate to http://0.0.0.0:3000/.

Step 3 - Let's code

  • myapp-web: Contains Angular application module
  • myapp-web/config: Contains all configuration files if you need to tweak some things
  • myapp-web/src/main/app: Contains base web directory
  • myapp-web/src/main/app/app: Contains application base directory
  • myapp-package: Contains Nuxeo Package module

    From here, you can now build your own Angular Component in the myapp-web/src/main/app/app/ folder, your own Angular Directives, you own Angular Services and whatever else you want.

    Nuxeo JS Client is available as a Service inside your Application. View how you can handle it in myapp-web/src/main/app/app/search/search.component.ts:

    import { NuxeoService } from '../nuxeo.service';
    
    constructor(public nuxeo: NuxeoService) {
    
    }
    
    searchDocument(value: String) {
      this.nuxeo.repository().query({
        query: `Select * from Document where ecm:fulltext LIKE '${value}' or dc:title LIKE '%${value}%' and ecm:isProxy = 0 and ecm:currentLifeCycleState <> 'deleted'`
      }, {
        enrichers: {'document': ['thumbnail']}
      }).then((docs) => {
        this.documents = docs.entries;
        console.log(docs.entries[0]);
        this.loading = false;
      })
      ...
    }
    

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

There are two possible ways to deploy your application:

  1. Embedded mode: Having your Angular application in your Nuxeo Platform instance.

    Angular Embedded Application

    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. We use this solution for projects like Nuxeo University.

    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.

  2. Isolated mode: keep your Angular web application separated from your Nuxeo Platform instance.

    Angular External Application

    By doing so, you can put your web application wherever you want it to be; this can be on a totally separate server if need be.

We are always eager to receive feedback on our projects. Please report bugs, wishes or anything related to the nuxeo-angular-sample project at answers.nuxeo.com


Related Documentation
 
3 days ago manonlumeau NXDOC-1323: Update BDE doc
2 years ago Solen Guitter 28
2 years ago Solen Guitter 27
2 years ago Thibaud Arguillere 26
2 years ago Bertrand Chauvin 25
2 years ago Bertrand Chauvin 24 | Fixed tutorial
2 years ago Bertrand Chauvin 23
2 years ago Solen Guitter 22
2 years ago Bertrand Chauvin 21 | Added bower install npm install
2 years ago Solen Guitter 20 | Reorganize content
2 years ago Solen Guitter 19 | Format and typos
2 years ago Bertrand Chauvin 18 | Added tags and related doc
2 years ago Bertrand Chauvin 16 | Formatting
2 years ago Bertrand Chauvin 17 | Formatting
2 years ago Bertrand Chauvin 15 | Added reporting info
2 years ago Bertrand Chauvin 14 | Removed todo and restriction warning
2 years ago Bertrand Chauvin 13 | Formatting
2 years ago Bertrand Chauvin 12 | Formatting
2 years ago Bertrand Chauvin 11 | Formatting
2 years ago Bertrand Chauvin 10 | Added app bootstrapping details
2 years ago Bertrand Chauvin 9
2 years ago Bertrand Chauvin 8 | Added embedded deployment first details
2 years ago Bertrand Chauvin 7 | Added dev environment setup
2 years ago Bertrand Chauvin 6 | angular-nuxeo introduction
2 years ago Bertrand Chauvin 5
2 years ago Bertrand Chauvin 4
2 years ago Bertrand Chauvin 3 | Started adding deployment options
2 years ago Bertrand Chauvin 2
2 years ago Bertrand Chauvin 1
History: Created by Bertrand Chauvin