An unofficial boilerplate for hosting a local server that serves Framer.js prototypes generated with the Framer Generator across your devices with livereload.
Install node dependencies from your terminal:
npm install
Then run grunt to start a local server at http://0.0.0.0:4000. Access it server from your other devices through http://[your.local.ip.address]:4000.
Put your Framer prototypes inside projects/. General folder structure should look something like:
projects/
prototype1/
prototype1.sketch
prototype1.framer/
app.js
index.html
framer/
images/
imported/
...
prototype2/
...
The server is setup to redirect from prototype1/ to prototype1/prototype1.framer as the prototype1.framer folder is generated by Framer Generator alongside your Sketch/Photoshop file.
Your prototypes are available offline after retrieving it once from your local server. The build script will generate a cache.manifest file in your project's Framer folder to allow browsers with HTML5 application cache support to store the assets for offline use.
To disable offline, you can go into Gruntfile.js and set enableOffline to false:
// User preferences
var preferences = {
enableOffline: false,
projectsPath: 'projects/'
};
Add this snippet in the <head> of index.html to enable iOS fullscreen mode when adding the page to homescreen:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=750,initial-scale=0.5,user-scalable=no">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Be sure to adjust the viewport width and initial-scale to match your prototype target screen size.