A small prototype to demonstrate how to implement emotion recognition into framer.
- Node.js (tested with 4.4.1 LTS)
- Gulp
- Webpack
- Framer.js and Framer Generator
- sketch-tool (if you want to use it, there is a specific gulp task)
- Sketch.app
-
Start by cloning this project
-
Install sketch-tool via brew:
- Make sure you have Homebrew version
0.9.5
or higher. You can check with$ brew --version
- If you don't have Homebrew Cask, run
$ brew tap caskroom/cask
- Install sketch-tool with
$ brew cask install sketch-tool
- Make sure you have Homebrew version
-
Download and install latest version of Framer Generator
-
Run
$ npm install
. At the moment it takes a lot to install and build Framer JS via Github, there should be a better solution (I had some problems with npm version of the library)
- Install gulp-cli
$ npm install gulp-cli -g
(but you can always use local version via npm scripts) - Run
$ gulp
or$ npm start
- Work on and save either
src/app.coffee
orsrc/assets.sketch
- Import with framer generator or use
$ gulp:sketch
to use sketch-tool - You can create modules in the
src/modules
folder andsrc/modules
them in yourapp.coffee
Run $ gulp clean
to delete the entire build folder.
Run the default $ gulp
task to watch our project folders, launch the server and enjoy live reload.
Run $ gulp build
to build our project and distribute.
Run $ gulp --slices
to watch using sketch-tool.
You need an active Heroku account, then you can install heroku-toolbelt.
$ brew install heroku-toolbelt
$ heroku login
$ cd *your-app-folder*
Create the app and start a Git repository.
$ git init
$ git add .
$ git commit -am "starting!"
$ heroku create *app-name*
$ git push heroku master
We serve static files using Harp, we use a super simple configuration but if you want to learn more, just take a look at the documentation. You can modify the sample _harp.json
.