AppSuite:Upgrade app using yo

Upgrade an app using yo

With the release of App Suite version 7.6.0, we moved towards more easy dependency management for UI modules. We switched to grunt as a task-runner and are using npm and bower to handle dependencies. This article should provide a short guide on what to do in order to upgrade your app to the latest and greatest version of our shared grunt configuration and other development tools.

Development Tools

First, you might want to check on the versions of the tools which are necessary for UI development.

$ npm outdated -g grunt-cli bower yo generator-ox-ui-module

It's good to have those up-to-date, especially generator-ox-ui-module. You can update them by running npm install -g <pkg>.

Upgrading a Workspace using yo

You can generate a new version of your workspace using:

$ yo ox-ui-module

It will prompt for every file that will be overwritten with a different version and ask whether you want to overwrite or not. It is possible to view a diff between both versions. If you have not changed any of the defaults, it is save to say yes in all of these cases. If you have changed any of these files, you might still want to overwrite the file and later only commit parts of the new things or just reset to the old version. This can be done easily with your favorite SCM tool, like git or cvs (okay, in this case may be not as easy as promised).

Please pay special attention to package.json and bower.json files, since those are the files you might have changed before. Those contain meta-information unique to your app, so they will be different from the initially generated ones.

Manually upgrading single node modules

If the approach above is a little to radical for you, because you have customized everything, you might only want to update to the latest shared grunt configuration. Go to the releases page of shared-grunt-config and add the name of the latest tag to your apps package.json. It should look something like

   "shared-grunt-config": "Open-Xchange-Frontend/shared-grunt-config#v0.5.0"

where the string after the # is the tag-name that will be checked out. Save the file and run:

$ npm install --no-shrinkwrap

to make sure all your node_modules are up-to-date. If something fails, remove the node_modules directory and try again.

Testing the most important tasks

A quick way to check if everything still runs fine is to run the following grunt tasks

grunt dist
grunt install:dist --prefix backend --htdoc www

After that, check if the directories backend and www contain files that look a little familiar. If everything seems to look fine, you can remove those directories, again.

During this test, keep an eye on the output and check any warning or error message. If everything looks fine, use grunt dev task to test your app in a browser.

Packaging

For packaging it works similar as for the app mentioned above. You can re-run the yo generators

 $ yo ox-ui-module:deb-pkg
 $ yo ox-ui-module:rpm-pkg

to generate new versions of the files. However, in case of packaging the chance is even higher, that you have changed the generated files. So the best advice would be to to check the differences and cherry pick the changes into your packaging information, i.e. manually add the changes you need to your files.

Further Reading

• In case you want to create a new app for OX App Suite, read the getting started guide.