Netlify + Preact + PWABuilder

This article we see how use , Netlify with Preact and how do android and IOS apps.

For we can, create a pwa need have a https app, to it can use you can use firebase or Netlify, here we`ll use a Netlify.
The Netlify is a service for host applications statics using https protocol .

PWABuilder is very new microsoft project for create android,windows and IOS apps from PWA app, for it We`ll use a ManifoldJS a PWABuilder in CLI even using it, we have to have a android studio and xcode for create , because Manifoldjs make a gradle for android studio and xcode project for use in xcode.

let`s begin, first we create app preact using preact-cli

npm i preact-cli -g

You can see more commands in

for create a preact application, run

preact create material mypwaapp

This command to create a new app using material-components for preactjs, to create pwa we need some icons, for generate it, can use a imageGenerate if you don`t know how make a manifest.json can ready a article of mozilla about it.

After you create icons, have alter you manifest.json in src folder, it`ll be when do a build of project.

Now we create account in netlify you can use a git, facebook or google account , in deploy you select a git repository , and set a conf

publish directory is where have your build files
build command is used for make a build of your project when you send you push the netflify run a build command and make a build in publish directory and show using https protocol .

Now we do a build using ManifoldJS, for it install using npm

npm install -g pwabuilder

in project folder run a command

pwabuilder  -m src/manifest.json -p windows10,android,ios

When run it, create some folders .

for do .apk you have install android studio , import a gradle project and select a android folder in <project_name>/Polyfills/android and run build in android studio :)