5min Rapid Prototyping set-up with JS

Rapid Prototyping (RP) is the crafting technique arround minimal+robust toolset to visualise your ideas super-fast. In JavaScript context, this is the fast-building-lane for your functions or features which you can handover to somebody else getting realistic play-with-feedbacks. In other words you just hack small decoupled modules for human testing. Therefore, I introduce you my working process in a JavaScript / Node.js environment. My goal is to show you how to rush a set-up for a minimal website with budo.js and surge.js
Let’s go.

Preparing environment

If you have not install node.js yet you can follow this guide: how to install node.js.

// navigate to your prefered folder location and create a new one
$ mkdir rp-fun
$ cd rp-fun

Next, install surge.js. Surge is static web publishing platform where you can deploy your web app for free.

// install surge globally via node package manager
$ npm i -g surge

// create a free account and set-up your web domain
$ surge

Now, you can drop the following commands at the terminal to create your new app.

If you need you can navigate to your prefered folder destination.

// initialise new project
$ npm init

// install budo, your local dev server incl. live reloading
$ npm i -D budo

// create the minimal web app files
$ touch index.js index.html style.css

OK, cool. Let’s build a simple ‘Hello World’ web app.

Use your prefered code editor like vim or sublime and open your package.json. Add your budo build script.

Local live coding

This start script includes live reloading, watches for any html/css changes and opens your default browser
“scripts”: {
“start”: “budo index.js -l -wg -o”,


Create your simple “Hallo World” index.html file. It looks similiar to this.

<!DOCTYPE html>
<meta charset=”UTF-8">
<title>Hallo World</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>

<h1>Hallo World</h1>
<script src=”index.js”></script>

Now, start your dev server and check the results at your browser.
$ npm start

Et voilá. Your first minimal web site.

Streamline deployment

Go back to your package.json and add another script hook.

“scripts”: {
“start”: “…”,
“deploy”: “surge — domain {place-your-domain-name}.surge.sh”


Save and execute this deployment hook.

$ npm run deploy

Finally, check your new website at your surge domain. You are done!

To sum-up, there are tonnes of tiny little node.js tool-modules out there. By using budo.js and surge.js you only need few steps to be prepared for building and publishing your simple “Hello World” website. It costs view minutes until first results are online. So, you have enough time for something meaningful.

Feel free to share your experiences and results with me at slack #BerlinLean, the Berlin Lean Prototyping Group. I’m interested in your prototypes. In Addition, I suggest to you Looping.com, a nice crowd-source feedback tool.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.