| 1 | # Updating a project in Monaca
|
| 2 |
|
| 3 | Sometimes breaking changes are introduced in order to improve existing features. In most cases, these changes are related to new dependencies and files which do not require complex updates. Review the next version, in the list below, to see the necessary steps to bring your project up-to-date.
|
| 4 |
|
| 5 | Before doing any change we recommend to **make a backup of your project**. If after following these steps you still have any issue, please ask for support in the [community forum](https://community.onsen.io/).
|
| 6 |
|
| 7 |
|
| 8 | ## Version list
|
| 9 |
|
| 10 | ### Updating to v2.1.0 (Only React and Angular2 projects)
|
| 11 |
|
| 12 | New dependencies have been introduced to provide a robust transpiler for React and Angular2. Some of these dependencies are Stylus and react-hot-loader. All of this will be available for newly created projects.
|
| 13 |
|
| 14 | For existing projects, please follow these steps below for basic support:
|
| 15 |
|
| 16 | 1. Generate Webpack configuration files and install the new build dependencies:
|
| 17 |
|
| 18 | a. For Monaca CLI: Run `monaca reconfigure`
|
| 19 |
|
| 20 | b. For Monaca LocalKit: When trying to transpile a project you will see a dialog about project misconfiguration. Follow the instructions.
|
| 21 |
|
| 22 | 2. Update `src/main.js` content:
|
| 23 |
|
| 24 | Find
|
| 25 | ```javascript
|
| 26 | // Load Onsen UI library
|
| 27 | import 'onsenui';
|
| 28 | ```
|
| 29 |
|
| 30 | Below insert
|
| 31 | ```javascript
|
| 32 | // Onsen UI Styling and Icons
|
| 33 | require('onsenui/stylus/blue-basic-theme.styl');
|
| 34 | require('onsenui/css/onsenui.css');
|
| 35 | ```
|
| 36 |
|
| 37 | 3. Remove distribution file `www/dist.js`.
|
| 38 |
|
| 39 | 4. Remove Onsen UI CSS `www/css`.
|
| 40 |
|
| 41 | 5. Create directory `<project>/src/public`.
|
| 42 |
|
| 43 | 6. Update `index.html` content:
|
| 44 | Remove the following lines:
|
| 45 |
|
| 46 | ```html
|
| 47 | <link rel="stylesheet" href="css/onsenui.css">
|
| 48 | <link rel="stylesheet" href="css/onsen-css-components.css">
|
| 49 |
|
| 50 | <script src="dist.js"></script>
|
| 51 | ```
|
| 52 |
|
| 53 | Add the following lines to `<head></head>` element:
|
| 54 |
|
| 55 | ```ejs
|
| 56 | <% for (var dep in htmlWebpackPlugin.options.externalJS) { %>
|
| 57 | <script type="text/javascript" src="<%= htmlWebpackPlugin.options.externalJS[dep] %>"></script><% } %>
|
| 58 | <% for (var dep in htmlWebpackPlugin.options.externalCSS) { %>
|
| 59 | <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.externalCSS[dep] %>"><% } %>
|
| 60 | ```
|
| 61 |
|
| 62 | 7. Move `<project>/www/index.html` to `<project>/src/public/index.ejs`. Notice that the extension changes to `ejs`.
|
| 63 |
|
| 64 | 8. Move other static assets from `<project>/www/*` to `<project>/src/public/*`.
|
| 65 | |
| \ | No newline at end of file |