Appmaker - An exploration in making app authoring available to non-developers
HTML JavaScript CSS Ruby
Latest commit 72197e0 Nov 17, 2015 @simonwex simonwex Update
Failed to load latest commit information.
curriculum added pages activity html and images Sep 2, 2014
doc fixed dead link Sep 13, 2014
lib Add header explaining usage. Oct 24, 2014
locale/en_US Show messages when app is being cached and finishes caching etc. Jan 5, 2015
node_modules/vendor uuid fix for browserify bundling Nov 17, 2014
public left-aligned dep warning text and grew x icon Jul 29, 2015
routes Use instead of Jan 9, 2015
test Bug 1091261 - Implement login 3.0 Nov 7, 2014
vagrant Tabbing and EOF \n fixes Feb 10, 2014
views avoid use of remove() Jul 29, 2015
.bowerrc Setting bower's directory to be vendor instead of components, adding … Jul 29, 2013
.gitignore Revert "Bug 1091261 - Implement login 3.0" Nov 7, 2014
.gitmodules Using https endpoint so heroku likes the submodule. Aug 19, 2013
.jshintignore Adding requirejs optimize task to default grunt. Jan 27, 2014
.travis.yml added a basic smoke test for server. Jan 9, 2014 Update Jun 19, 2014
Gruntfile.js Generate the cache file on grunt; Jan 5, 2015
LICENSE Initial commit Jul 29, 2013
Procfile 1. fixing whitespaces Jan 23, 2014 Update Nov 17, 2015 Markup fixes Sep 29, 2013
app.js Fall back to redirect to /designer if there's no network Jan 5, 2015
appcache.js Generate the cache file on grunt; Jan 5, 2015
appmaker.sublime-project fix after bad merge Jan 20, 2014
appmakerStatsConfig.js Reverting a couple s/flathead/appmaker/ changes Jun 9, 2014
bower.json v0.0.24 Jan 14, 2015
package.json 0.0.25 Jul 29, 2015
sample.env Bug 1091261 - Implement login 3.0 Nov 7, 2014
statsd.js Killing child process on exit. Jan 6, 2014
verify-test.js 1. Removed ejs partials. Oct 1, 2013

This project is no longer under active development.

Read about why, here:


Build Status devDependency Status

Welcome to Appmaker (beta).

Appmaker is a tool that helps anyone, not just developers, create mobile applications.

Appmaker apps are composed of web components, custom/resusable HTML tags, connected with events and listeners.

To learn more about web components, check out the Polymer Project.

More resources:

Getting Started

This section covers how to get Appmaker running locally. The workflow is optimized for contributors.


Make sure you have nodejs, npm, and git installed.

grunt is required to run the test suite. To install grunt on unix and OS X, run sudo npm install -g grunt-cli.

We manage client-side dependencies using bower. In order to add/remove these dependencies, you need to have bower installed globally on your machine, which can be done on unix and OS X via sudo npm install bower -g.

Webmaker Login is required to log into the app. Follow these instructions exactly to run it locally

Forking And Cloning The Repository

Create a root mozilla-appmaker directory:

mkdir mozilla-appmaker
cd mozilla-appmaker

Fork this repository, and then clone your fork into the mozilla-appmaker directory:

git clone<your GitHub username>/appmaker.git appmaker

Your directory structure should look like this:

  ├── appmaker/

Configure remote:

cd appmaker
git remote add upstream
git fetch upstream

Environment Setup And Configuration

Install Node packages:

npm install

Configure your env:

cp sample.env .env

A short explanation of a complete .env file:

PRODUCTION: OPTIONAL - if this value is set, app.js will ignore "dev only" code paths
BUNDLE: OPTIONAL - if this has any value, components will be bundled into a single mozilla-appmaker.min.html file in ./public/bundles/components (modifying individual components will then only take effect on app start)
BUNDLE_MINIFY: OPTIONAL - if this has any value, it will also minify the resulting bundle(s)
MONGO_URL: REQUIRED - the URI for your mongod instance and database, for example mongodb://localhost/appmakerdev (or whatever your database is named)
LOGINAPI: REQUIRED - The URI of a Webmaker login server to use for user authentication. for exmaple http://localhost:3000
LOGINAPI_WITH_AUTH: - The URI of a Webmaker login server, including basic authentication credentials. for exmaple http://testuser:password@localhost:3000
COOKIE_SECRET: A long, complex string for cookie encryption (NOTE: You define this for your local use, the string can be anything).
FORCE_SSL: If using SSL, set this to true.
STORE: Storage approach for publishing apps. `local` is the default, `s3` requires additional environment variables (prefixed by S3_)
S3_BUCKET: S3 bucket name. e.g. ""
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 when publishing. Try use the URL that matches the protocol from which assets are hosted to avoid mixed content blockage.
REDIRECT_URL: The hostname and port that we want to redirect to for Appmaker
PORT: The port that the web process listens on for incomming connections
EXCLUDED_COMPONENTS: A comma-delimited list of component repositories to exclude from the mozilla-appmaker org. The name is the repo name rather than the component name, though this is usually the same.
ALLOW_CUSTOM_COMPONENTS: Optional flag to turn on using custom component for testing purposes (any value that coerces to true is accepted)
BUNDLE: Any non-null value will cause the application to bundle as many resources as possible
HSTS_DISABLED: if set to "true", [HSTS]( is disabled.  **(If you are not forcing SSL, you should turn disable HSTS by setting HSTS_DISABLED='true' in the .env)**
DISABLE_XFO_HEADERS_DENY: If set to "true", [X-Frame-Options Headers]( are not set.  If not set to "true" / left unset, XFO headers are set to DENY.
IEXSS_PROTECTION_DISABLED: If set to "true", iexss vulnerability headers are not set.  If set to false or left unset, iexss protection for IE8 will be enabled.
GA_ACCOUNT: Optional google analytics account setting. (
GA_DESIGNER_DOMAIN: Optional google analytics domain setting for the designer. (
GA_PUBLISH_DOMAIN: Optional google analytics domain setting for the published apps. (
PUBLISH_HOST: Host of URL which points to a published app. Does not include a protocol prefix (e.g. `http://`). Use `{{ip}}` in this string to automatically insert your machine's IP address (useful for debugging apps on mobile devices in dev environment).
ASSET_HOST: URL used to provide assets to published apps. Use `{{ip}}` in this string to automatically insert your machine's IP address (useful for debugging apps on mobile devices in dev environment).
PUBLISH_HOST_PREFIX: Prefix of URL which points to a published app. Usually `http://` or `https://`.
POSTMARK_API_KEY: An API key that needs to match a valid [Postmark]( API key.
POSTMARK_FROM_ADDRESS: A valid email address that acts as the "from" address on emails sent out to users. This address must be added to the Sender Signature list associated with the Postmark API key provided in `POSTMARK_API_KEY`
POSTMARK_INBOUND_ADDRESS: The "inbound email address" associated with the Postmark API key provided in `POSTMARK_API_KEY`
POSTMARK_SMTP_SERVER: The SMTP server used by Postmark (default: ``)

Install and Run MongoDB

MongoDB is used for saving the user-created apps before publishing.


Visit for platform-specific installation instructions. Be sure an install MongoDB outside of your local Appmaker repo.

Running mongod

Either configure MongoDB to run on startup or manually start the mongod daemon.

To manually start mongod once it is installed:


The mongod process will, by default listen on port 27017. If you have it configured to listen on an alternate port, be sure to adjust your MONGO_URL in your .env file.

Start the Server

node app

How you can help

Component Development

So you want to make a component? That's great, we want to work with you! Here's a guide where you can learn what components are, how they are built, how to make your own and finally how to submit your finished component to Appmaker.

Guide to Contributing a Component

Technical reading:

Ceci is a set of foundational elements used in a AppMaker app, implemented as a set of Polymer components. If you create a new component, it's really an HTML tag that Polymer processes and then injects a variety of capabilities into that tag / JS object

Example AppMaker Component

TODO link to the Counter example, provide explanation

Submitting A Pull Request

Switch to develop branch:

cd mozilla-appmaker/appmaker
git checkout develop

Pull the latest version:

git pull

Create a new branch (for example a feature branch):

git checkout -b your-feature-branch-name

Make changes to the local copy, commit your changes, and then make sure your patch still works with latest version of develop branch:

git checkout develop
git pull
git checkout your-feature-branch-name
git rebase develop

Test commits:


Submit changes:

git push origin your-feature-branch-name

Submit the pull request at For more assistance, see Github's help page on creating a pull request.


Appmaker uses the Webmaker-i18n module for localization of both the designer and (ceci) components.

Localizating component

If you have created your own component, see:

Help on translation

Spotted any typo or want to help translate appmaker into your own language?

Appmaker uses Transifex for translation platform. You can check this how to article if you want to contribute for translation and visit Appmaker on Transifex to start translate.