What is the recommend way to arrive at AngularJS 1.5.+, with LiveReload when upgrading from 1.3.7?

Question

I have a Wakanda 10, community version, solution that uses AngularJS 1.3.7, and it does not yet use LiveReload.

I want to upgrade to Wakanda 11, community version,AngularJS 1.5+, with LiveReload.

What is the simplest way to do this?

I understand that I may have to do coding changes.

Should I download the Wakanda 11, community version, and start a new project with it that has LiveReload built-in, and then copy my Project into it and debug?

score 3 · Answer 1 · answered Jun 07 '16 at 08:57

In order to upgrade your application you have two face two different problematics:

A) Upgrade AngularJS from 1.3.7 to 1.5.x.

This step is pretty straight-forward. It's necessary to replace your AngularJS library inside your application with the version you desire. If a bower.json is included in your application (and it should be since we are speaking of a Wakanda scaffolded application) then you can modify the following lines:

"dependencies": {
  "angular": "~1.4.4",
  "angular-wakanda": "~1.0.4"
}

and run in terminal from the folder of the application the command bower update to do it automatically.

Update angular-wakanda to the latest compatible version.

Please note that you are upgrading minor versions of AngularJS and probably also angular-wakanda. Minor changes in API and methods can be present and break your application.

B) Add live-reload to your application

Many efforts have been done in the latest Wakanda Studio versions to achieve agnostic compatibility with different scaffoldings. Adding live-reload to your Wakanda application means adding a standard live-reload kit as you normally do with web applications.

It can be made with Gulp, Webpack, Grunt, Browserify. Wakanda Studio would try to run any environment.

Since the angular-wakanda + Gulp live-reload environment is the one included in the actual scaffolding, I suggest you to start with it as follows:

In the package.json file add the following devDependencies:

"devDependencies": {
  "gulp": "^3.9.0",
  "gulp-connect": "^2.2.0",
  "http-proxy-middleware": "^0.9.0",
  "minimist": "^1.2.0"
}

In order to trigger gulp, add to the same files the following scripts to your package.json file:
```
"scripts": {
  "serve": "gulp serve",
  "start": "npm run serve"
}
```
Create or copy from an existing Wakanda solution the gulpfile.js file. You can copy this gulpfile.js if you prefer a more generic approach than the actual included in the base solution. It's important to adapt the configuration parameters to your actual application scaffolding if necessary:
```
var defaultOptions = {
  default: {
    serverUrl: 'http://127.0.0.1:8081',
    port: 8000,
    livereloadPort: 35729,
    app: 'app/',
    output: 'app/',
  }
};
```
Finally re-open the solution and click Run Page. This should trigger an npm install and an npm start, which will trigger gulp serve which will enable live-reload.

Please note that the implementation can have minor configuration differences depending on the Wakanda Studio version you are using. I suggest you to always update to the latest available.

For a deeper understanding on Wakanda Studio build process I also suggest you to check out this tutorial which also explain how to add SASS precompilation to the application.

What is the recommend way to arrive at AngularJS 1.5.+, with LiveReload when upgrading from 1.3.7?

1 Answers1