Experiment at the speed of thought.

Sometimes you don't want framework fanciness.
Sometimes good ol' vanilla JS is all you need.
Sometimes you want to get hacking quick.
Offline, in the comfort of your favorite editor & browser.

In those times, just type web
In seconds, you'll get a new folder with index.html, style.css & app.js auto-launched in your favorite editor + a server with automatic browser refreshing.
🌊🌊🌊

Getting Started

(if you already have VS Code 'code' command and browser-sync installed, skip to step 3)

1. Install Visual Studio Code, CmdShiftP and type,
Shell Command: Install 'code' command in PATH
2. Install browser-sync. First install Node and then in your Terminal type,
npm i -g browser-sync
3. Set 'Webs' root directory. In Alfred type web:folder... followed by the path to an existing folder relative to your home directory. For example,
web:folder Sites/Webs
That's it! You're good to go.

Usage

web
folder with default name in root directory
web name
folder with given name in root directory

Modifiers

+ cmd
load Bootstrap 4 external stylesheet
+ alt
load Bootstrap 4 CSS & JavaScript as external stylesheet and scripts
+ ctrl
load Tailwind external stylesheet
+ fn
load Tailwind base styles and utility classes stylesheets separately
+ shift
load a custom external stylesheet - can be set using web:stylesheet url

Workflow Environment Variables

reboot
wheteher or not to load css reset, can be set using web:reboot yes/no
default: yes
path
existing folder relative to home directory, can be set using web:folder path
stylesheet
custom external stylesheet to load, can be set using web:stylesheet url
browser
e.g. google chrome, firefox
default: google chrome
default_name
Default name for project folders
default: Web Project
editor
shell command to launch editor
default: code
server
shell command to launch server
default: browser-sync
flags
options for browser-sync, e.g.
-w: watch files
--cors: add Access Control headers to every request
--no-notify: disable the notify element in browsers