framer-boilerplate

A boilerplate FramerJS project that uses Gulp for live reload and CoffeScript transpilation¹ + Browserify to include modules

Why?

This project will help you if you:

Work usually editing Framer modules, that you need to change and test quickly
Have projects that depend on MANY Framer modules, and need to reorganize them in subfolders inside the modules folder
Need to work and transpile Framer CoffeeScript projects on operating systems different than OSX (mainly Windows and Linux).
Love Sublime, vi, your_favorite_editor_here and won't move to anything else :)

Before starting

To use this project, you will first need to install NodeJS. You can do it from the official website.

Get started

Run npm install from the project folder. This will install all the required dependencies
Run gulp. If you have not installed it: npm install -g gulp
Open http://localhost:3000 on Chrome
Start working in app/app.coffee. Any changes on the Framer code will refresh the browser

Exporting a project to Framer Studio

If you want to create a Framer Studio project to be shared, you just need to:

Run gulp export when you think your project is ready to be exported
Open the framer-boilerplate.framer in the exports folder with Framer Studio
Update the project if asked

There are two known limitations for this export process:

Your prototype can have errors if the versions of Framer are not aligned, depending on the Framer features you are using
If you use complex submodules folder structure, your submodules won't be loaded (see 'Submodules' below)

Submodules

You can add as many submodules as you want in the modules folder. In the sample code included, you can see a module called myModule. To include it:

MyModule = require("myModule") (same as in Framer Studio)

You can create subfolders in the modules folder and include it using:

MyModule = require("subfolder/myModule")

NOTE: At the moment, Framer Studio expects all submodules to be in a flat modules folder. If you create complex folder hierarchies inside the modules folder, you won't be able to open your project on Framer Studio.

About the 'framerjs-prebuilt' npm package

To avoid compiling Framer on Windows machine, where the make command is not available by default, this boilerplate includes a precompiled version of Framer that I keep updating on this repo. This process is done manually at the moment, so let me know if you run into problems with the current version of FramerJS included. If you have any idea to make this process cleaner or easier, please let me know.

¹Does this word even exist??

meiraleal / framer-boilerplate Goto Github PK