Astro 2.0 Migration

Table of contents

Who is this guide for? #

This guide is for Astro developers looking to upgrade a project to use Astro version 2.0 and use Webpack 4 build system. It goes over what Webpack replaces and describes in detail what changes need to be made to your codebase.

Pre-requisites #

Highlight of Changes #

The biggest differences to your app after upgrading to Webpack 4 will be how mode configuration is declared. There are two ways to achieve this:

  1. Provide "mode" option in config
    module.exports = {
     mode: 'production'  
  2. Pass as CLI argument
    webpack --mode=production

We recommend the second approach, and the steps on how to add the mode config are detailed in Typical upgrade process section below.

One more change to Webpack 4 is that some of the plugins that are manually imported into webpack are now automatically enabled in production mode. E.g. UglifyJsPlugin, OccurrenceOrderPlugin

Typical upgrade process #

From the root of your project, run git clean -Xfd. This removes all ignored files from your working directory. First cd native/.

Point to the latest Astro

Update the mobify-progressive-app-sdk dependency in your package.json to 2.0.0

Point to the latest Android SDK

In build.gradle file, change the targetSDK and compileSDK version to 27.

android {
    compileSdkVersion 27
    defaultConfig {
        minSdkVersion 19
        targetSdkVersion 27

Install Webpack 4 and Eslint

npm i --save-dev webpack@4.6.0 eslint eslint-loader

Add Mode Argument

In package.json, add mode argument to the webpack command.

"scripts": {
    "build": "webpack --config --mode=$NODE_ENV"

Finally, run the app and verify all behaviour is as expected.