Execute npm install
in the application directory:
Get the submodules:
git submodule update --init --recursive
Copy and edit your .env file. -- This should never be committed to the repo.
cp sample.env .env
A short explanation of a complete .env
file:
COOKIE_SECRET=A long, complex string for cookie encryption.
ASSET_HOST=Location of the javascript, css, fonts, and images that will be used by the designer and published assets.
COMPONENTS_BASE_URL=An appmaker-components repo which Ceci will query. Likely "//appmaker-components.herokuapp.com/"
S3_BUCKET=S3 bucket name. e.g. "my.coolappmaker.com"
S3_KEY=An access key for the S3 bucket listed above.
S3_SECRET=The secret corresponding to the specified S3 access key.
S3_OBJECT_PREFIX=String to prepend S3 objects. Useful for storing objects in folders. E.g. "level1/level2" => <bucket>/level1/level2/<filename>.
PUBLISH_URL_PREFIX=String to prepend to filenames that are saved on S3. Try use the URL that matches the protocol from which assets are hosted to avoid mixed content blockage.
foreman start
If you need foreman:
sudo gem install foreman
Ideas to get you started: https://github.com/mozilla/appmaker/wiki/Component-Ideas
The purpose of this Style Guide is to provide a single reference for visual styles and design elements used in Appmaker.
The overall design approach is based on making building apps fun and gamelike. We want the site’s content and design to 1) encourage play and exploration 2) encourage non developers to think like programmers 3) enable anyone to build and customize apps that matter to them.
The visual guidelines outlined here are based on Appmaker’s fundamental characteristics, communicating a sense of fun, exploration, and play while building a space where developers and non developers can collaborate to create new and meaningful apps.
Looking for guidance on how to make cool Firefox OS style components? Fret not, Firefox OS has its own component guide.
The color palette describes the colors used in the Appmaker app. It is not intended to be a color guide for components, though you are certainly welcome to use it that way.
Appmaker Blue - Critical call to action
background-color: #358CCE
Appmaker Orange - Primary call to action
background-color: #FF7B00
Appmaker Green - Selected item
background-color: #55B12E
Almost Black - Page background
background-color: #111111
Gray Black - Default text
color: #222222
Dark Gray - Side Panel
background-color: #333333
Medium Gray - Secondary call to action
background-color: #555555
Gray - Side Panel
background-color: #CCCCCC
Medium Light Gray - Container background
background-color: #DDDDDD
Light Gray - Component background
background-color: #EEEEEE
Describe buttons here.
Describe elements here.
Describe layout here.