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?

Answer 1

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:

1. 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" } 

2. 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" } 

3. 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/', } }; 

4. 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.