woeldiche/Procfile

## Readme.md

      
    Raw
  

              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);
	{
	"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": {}
	}
	// 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);