Webber

Powerful console tool for cooking your swifweb apps

Requirements

macOS 10.15 and Xcode 11.4 or later.

or

any ubuntu supported on swift.org

Installation

macOS

On macOS webber can be installed with Homebrew. Make sure you have Homebrew installed and then run:

brew install swifweb/tap/webber

to update already installed version run

brew upgrade webber

Ubuntu

1. Install swift manually or via swiftlang.xyz
2. Install binaryen

   apt-get install binaryen

3. Install wasmer

   curl https://get.wasmer.io -sSfL | sh

4. Install npm

   apt-get install npm

5. Install webber

   cd /opt
   git clone https://github.com/swifweb/webber
   cd /opt/webber
   swift build -c release
   ln -s /opt/webber/.build/release/Webber /usr/bin/webber
   exec bash

6. Start using it inside of your project folder

To update webber to latest version just do

cd /opt/webber && git pull && swift build -c release

Usage

If you already have a project then just go to its folder in console

If you don't then manually git clone a template and then go to its directory

New project

You can either simply execute webber new or clone one of templates manually

git clone https://github.com/swifweb/spa-template myspawebsite
cd myspawebsite
open Package.swift # to work with code
webber serve # to launch in browser

progressive web app

git clone https://github.com/swifweb/pwa-template mypwawebsite
cd mypwawebsite
open Package.swift # to work with code
webber serve -t pwa -s Service # to launch in browser

Development

if your project is single page application then this command will be enough to start working

webber serve 

This command do:

• compile your project into webassembly file
• cook needed html and js files, store them into .webber hidden folder inside project directory
• spinup local webserver
• open default browser to see your web app (it is on http/2 by default with self-signed cert, so add it into system)
• watch for changes in the project directory, rebuild project automatically and update page in browser

if you clone the pwa template then you should additionally provide the following arguments:

• -t pwa to say webber that your project should be cooked as PWA
• the name of your service worker target e.g. -s Service

so in the end serve command for pwa template could look like this

webber serve -t pwa -s Service -p 443 --browser chrome --browser-self-signed --browser-incognito

Additional parameters

-v or --verbose to show more info in console for debugging purposes

-d or --debug-verbose to show even more details about each step of webber execution

-p 443 or --port 443 to start webber server on 443 port instead of default 8888

--browser chrome/safari to automatically open desired browser, by default it doesn't open any

--browser-self-signed needed to debug service workers locally, otherwise they doesn't work

--browser-incognito to open additional instance of browser in incognito mode, works only with chrome

--toolchain to set custom toolchain e.g. webber serve --toolchain 5.9-SNAPSHOT-2023-08-06-a

Release

for SPA just run

webber release

for PWA execute it this way

webber release  -t pwa -s Service

and then grub your files from .webber/release/

How to serve release files with nginx

1. Install nginx by the official instrucation
2. Edit /etc/nginx/mime.types add application/wasm wasm; in order to serve wasm files correctly
3. Generate SSL certificate with letsencrypt (or anything else)

4. Declare your server like this

   server {
   server_name yourdomain.com;
   
   listen [::]:443 ssl;
   listen 443 ssl;
   ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
   ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
   include /etc/letsencrypt/options-ssl-nginx.conf;
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
   
   ssl_session_cache    shared:SSL:10m;
   ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
   add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
   ssl_stapling on;
   ssl_stapling_verify on;
   
   root /app/yourdomain.com/.webber/release;
   
   location / {
       try_files $uri $uri/ /index.html;
   }
   
   location ~* \.(js|jpg|png|css|wasm)$ {
       root /app/yourdomain.com/.webber/release;
       expires 30d;
       add_header Cache-Control "public, no-transform";
   }
   }

Credits

Infinite thanks to the swiftwasm organization for their

• awesome swift fork adopted for webassembly
• awesome JavaScriptKit which is used under the hood of the web package
• awesome carton tool which was an inspiration for creating webber to cover all the needs