Create a gist now

Instantly share code, notes, and snippets.

@woeldiche /Procfile
Last active Jul 25, 2018

Embed
What would you like to do?
Share your Framer.js prototypes

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

{
"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": {}
}
web: NODE_ENV=production node 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);
@martin-snajdr

This comment has been minimized.

Show comment
Hide comment
@martin-snajdr

martin-snajdr Apr 24, 2017

Thanks for sharing :)

Thanks for sharing :)

@bahtiyara

This comment has been minimized.

Show comment
Hide comment
@bahtiyara

bahtiyara Jul 25, 2018

What do we do if we don't want to request username and password?

bahtiyara commented Jul 25, 2018

What do we do if we don't want to request username and password?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment