Skip to end of metadata
Go to start of metadata

Context

Set up a basic webapp using modern tools.

Tech stack: Grunt, Bower, Angular
Generate skeleton with Yeoman.

Install software

  • Setup Yeoman

    Not sure if it is necessary to install grunt-cli bower.

  • Install Ruby
  • Install compass
  • Create git project
  • Generate basic project structure for Angular app

Release and deploy to production

"yeoman-grunt error"
When yeoman/grunt/karma fails during release:perform
Rationale for strategy
  • Release: build a binary archive and deploy it to a Maven artifact repository (e.g. Nexus).
  • Deploy to production: download artifact, unpack and move to correct location, reload web server (e.g. Apache, NginX or Jetty)

It is (at least) three ways to deploy a a javascript application to a production environment:

  1. Deploy files to an existing web server (typically copy files to a folder served by Apache).
  2. Run node and/or grunt on the production server.
  3. Self-contained deployment (for example embedded Jetty in a zip or executable jar file)

Many considers option 3 the only sane solution, so we will describe how to set this up.

Self-contained deployment unit for static javascript application

Use standalone Java application with embedded Jetty to serve static files. This setup can for example be used to host a pure javascript frontend in a separate deployment unit.
Note that backend services must set up CORS to circumvent the same origin policy.

The javascript files are scaffolded with yeoman and all files are placed in a separate yo folder (both sources, downloaded dependencies and generated files).
The yeoman-maven-plugin is used to call grunt from maven.

Standard maven plugins can the be used for the rest of the build process.

Frontend developers can work only with grunt and don't even need to have Maven installed.
Backend developers need to have a some extra tools installed (node, grunt, bower++), but can call regular Maven commands to build, deploy and release as usual.

  • Configuration is handled by overriding variables in a config_override.js file which is put in a config_override folder by the deployscript. index.html typically contains

    with contents something like

Read more

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
  1. Dec 09, 2014

    Findings from two customer projects using this stack: (
    Vi bruker NPM, Bower, Grunt og Yeoman stack i to prosjekter.

    1. Basis mangel: Når en utvikler legger til et bibliotek i dependencies, så må andre utviklere selv finne dette ut, og bruke NPM til å installere dem.

    • Det er i utgangspunktet en bug i oppsettet/rammeverkene. Det skal egentlig ikke være nødvendig å installere manuelt. Det er et hack for å kompensere.
      Bower som skal håndtere den biten.
    • Funker ikke her når jeg kjører Bower manuellt... (uten yeoman-plugin fra Maven)

    2. En ulempe med Maven og Bower/NPM integrasjon er at plugin'ene er umodne. Når du kjører mvn install, så gjør ser ikke plugin'et kun på endringer. Den bygger mye, som tar veldig lang tid.
    Det betyr å re-skape en haug med filer, som igjen betyr at intellij står stille, for å indeksere alle disse nye filene.

    Som sagt integrasjonsproblem, ikke Bower sin skyld.

    3. Den tredje ulempen med stack'en er at vi nå ikke kan gjøre fullt mvn bygg på Jenkins. Dette fordi NPM, med avhengigheter må installeres der. Siden Bower/Yeoman ikke klarer å oppdatere avhengigheter så kan vi ikke stole på at en eventuell Jenkins installasjon vil fungere om 2 månder.