Share your Framer.js prototypes

Readme.md

A: Share your Framer.js prototypes

Easily serve your Framer.js prototypes using Express.js webserver and host them on Heroku

A.1: Structure your files

Create folder with the following structure for your Framer project and commit it to a git reposity:

myproject
├─ myprototype.framer/
├─ server.js
├─ Procfile
└─ package.json

A.2: Update server.js

Update server.js with the correct folder name to your project and the username and password you want to use.

A.3: Create Heroku instance

Go to heroku.com Create a free or hobby app

A.4: Deploy it

Follow the instructions for deploying your git repo to Heroku. Either install Heroku Toolbelt, connect with Github or use Dropbox.

B: Or run it locally

People can also run your framer prototype locally using the same Express.js server:

B.0: Create your project

Follow steps A.1 - A.2

B.1: Install Node

Install node.js for your platform. If you have no idea what that is, just install latest stable using Homebrew, apt-get or download latest from https://nodejs.org/

B.2: Install npm modules

In your root project folder (same folder as package.json) run the following in your terminal:

$ npm install
$ node server.js

B.3: Open prototype in browser

Access prototype on http://localhost:333

package.json

{
  "name": "my-framer-prototype",
  "description": "Share my awesome Framer prototype.",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.11.0",
    "express-http-auth": "^0.1.0"
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {}
}

Procfile

web: NODE_ENV=production node server.js

server.js

// Reguire modules
var express = require('express');
var http_auth = require('express-http-auth');

// Create app
var app = express();

// Require http auth
app.use(http_auth.realm('Name of my app'));
app.use(function(req, res, next){
  if (req.username == 'username' && req.password == 'password') {
    next();
  } else {
    res.sendStatus(403);
  }
});

// Serve static files as default
app.get('/*', express.static(__dirname + '/myprototype.framer'));

// Listen for both Heroku and local. Access locally as http://localhost:3333
app.listen(process.env.PORT || 3333);