Introducing svelte-cordova template

July 03, 2019

TL;DR

I made a template for scaffolding a svelte project that runs in a cordova app, including hot reload to your device. You can find it here.

To use it run:

npx degit syonip/svelte-cordova-template svelte-cordova-app
cd svelte-cordova-app
npm i
cd src-cordova
cordova platform add android/ios
cd ..
npm run dev-android/ios

Why do I need this?

Svelte - the new cool kid on the block, is a new approach to writing web apps. Svelte shifts the heavy-lifting UI work from the browser to it’s compiler, thus creating faster, more lightweight web apps. That’s what they say anyway :)

Faster more lightweight web apps? Sweet! Why not wrap it in cordova for faster and lighter mobile apps as well?

But we have to be sure to handle some crucial points before starting.

Testing on a device in crucial

When building mobile apps with web tech, testing and debugging constantly on your device is crucial. Many things don’t work the same as the web version running on your desktop:

• Cordova plugins (e.g. local filesystem access)
• It’s a different browser - things might look different
• Performance issues - mobile devices will surface performance issues not noticed on a desktop browser, because they have less processing power.

A good dev process is crucial

A good dev process is crucial for developing efficiently, and hot reloading is crucial for a good dev process. Svelte compiles your components into bundle files, which are the ones that the browser sees. It’s not good enough to be able to manually copy the generated files and re-deploy your cordova app every time you want to test on your device. This leads to a frustrating and slow dev process that will kill your creativity and motivation.

So we’ll want the dev process for mobile to be like for any web app. You write code and watch it reload in the browser on the fly, debugging in the browser. We achieve this by pointing the cordova web view to our local dev server, instead of loading a local index.html file.

It’s interesting to notice that this way of developing has an advantage even over developing a native app, because there’s no need to install a new binary on the device, it’s just a browser reloading a remote page. So you can iterate much faster.

What the template does

A few issues need to be handled whenever trying to point the cordova web view to a remote location

HTTP security features

New cordova-android versions disable cleartext by default, so we’ll need to enable it via config:

<platform name="android">
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>
</platform>

Loading the cordova.js

Loading cordova.js file (which in turn loads the JS side of the cordova plugins) is usually handled by the cordova CLI, which injects the correct file location according to the platform you’re building.

If loading a remote url however, the server (in our case sirv) won’t find the file to load. So we need to force the html file to load cordova.js locally. We’ll use cordova-plugin-file for this. We’ll copy the index.html file from public, and inject the correct file path automatically.

For android:

<script src="cdvfile://localhost/assets/www/cordova.js">

For ios:

<script src="cdvfile://localhost/bundle/www/cordova.js">

Copying static assets

The original svelte template uses the public folder for static assets, so we’ll need to copy them into our cordova app (but make sure not to override the compiled svelte bundles)

Wrapping up

We’ll end with a quote from Seneca:

“An hour invested in creating an efficient dev process is an hour well spent”

Enjoy, and tell me what you think.