Preactubats: Preact-cli template

Words
166
Reading
1 min
Listen
Play
8y

logo

Preact Using Bulma And TypeScript

preact-cli template using Typescript, SCSS and Bulma CSS framework. Template has the same content, with some additions, as the default preact-cli template and uses the styling from Bulma's getting started guide.

In addition Preact-async-route and Preact-helmet is used for async paths and to modify the default header. Typescript was added using preact-cli-plugin-typescript with modifications, and styling integration to .tsx files is done using typings-for-css-modules-loader.

Demo at https://preactubats.spelmakare.se

Usage

$ npm install -g preact-cli
$ preact create smjnab/preactubats my-project
$ cd my-project
$ npm install
$ npm run dev

Screenshot_20181019_140615.png

Launch VSCode and you'll find yourself with a boilerplate for a fully responsive Progressive Web App.

To test app functionality

Visit https://preactubats.spelmakare.se

  • On desktop, in Chrome select Install Preactubats... from the top-right menu.
  • On Android, in Chrome select Add to Home screen in the top-right menu.
  • On iOS, in the "square with an arrow" menu in the top-right menu, select Add to Home screen.

Source and further details can be found at https://github.com/smjnab/preactubats

Preactubats: Preact-cli template | Ecency