Get Started

Installation and project setup. You'll be coding in minutes.

Installation install Node and Mimosa

1) node.js/io.js

Mimosa is a NPM module and so it must be used with node.js or io.js. Mimosa is tested against node v0.10, v0.12 and the latest io.js, so you will need to download and install one of those.

2) Mimosa

Use npm to install Mimosa.

$ npm install -g mimosa

The -g flag installs Mimosa globally so it can be run from the command line anywhere. You may need to use sudo to install this depending on your system's setup.

Starting with Development

You've got four choices all detailed below. Which you choose depends on where you want to start.

  1. Do you want a fresh application scaffold created using the mimosa new command?
  2. Would you rather hook up your existing application?.
  3. Use one of the community-contributed project skeletons if you want a little boilerplate, some client libraries and some sample code.
  4. You could choose start with a demo application if you want something meaty.

Create a starter app with Mimosa

If you want to build an app from scratch, or just play around with Mimosa, start here.

1) Create a new application

Inside the desired folder, create an app by executing mimosa new.

$ mimosa new nameOfApplicationHere

Follow the prompts and choose the desired transpilers/pre-processors, server, and server view technologies. If you aren't sure which ones to choose, that's perfect. Mimosa is a great tool to learn them.

2) Start the server

Change into the directory that was created and execute:

$ mimosa watch --server

Navigate to http://localhost:3000 in a browser to see the sample app. Mimosa will watch the assets directory of the project and compile changed files to the public directory. The web app serves assets in the public directory.

3) Start Coding

All set! To get the project started, Mimosa has delivered a bare bones web app with some code using the chosen technologies. Head over to the Commands tab to learn how to interact with Mimosa. If you want to play around with something meatier than the codebase that mimosa new delivers, try out a demo app.

Add Mimosa to an Existing App

If you want to use Mimosa with an existing app, start here.

1) Create a mimosa-config.js

Inside your project, create a mimosa-config.js file. To start, the contents of the file should look like this:

exports.config = {
  "modules": []
}

2) Tweak the config

The next step is to marry your project with Mimosa's defaults by changing either the config or your project. For instance, if you keep your code in a src directory instead of an assets directory, something will need to change because by default Mimosa expects an assets directory.

Then you need to decide what modules you want to use. There are plenty! For starters, you probably need the copy compiler which performs the simple task of copying files of certain types from assets to public where compiled code lives. To add the copy compiler, simply add the string "copy" to the modules array.

3) Fire it up

Execute mimosa watch and Mimosa will build and watch project assets. Mimosa will generate errors if something is wrong with the config.

Project Skeletons pre-built starter projects

A skeleton is a small application that includes and configures a group of UI libraries and technologies along with the necessary Mimosa modules and configuration to get you started.

Mimosa maintains a "skeleton registry" that you can pull from to start your application. From the command line execute mimosa skel:list to get a list of pre-built skeletons. Follow the instructions to install one of your choosing!

Mimosa needs more skeletons! Check out the documentation and whip something up real quick using the technologies you love so that others can benefit.

Demo Applications composed applications, ready to go

Before creating your own app, play around with someone else's! Download an app from GitHub and use Mimosa's command line interface to play with the code and get comfortable with Mimosa and the technologies inside the demo apps.

As more demo apps are built, they'll get added here. If you put a little something together using Mimosa let us know so we can add it to the list! Either open an issue or shoot a message to @mimosajs.

  • Polymer The Polymer Starter App w/ Vulcanize and Bower integration.

  • ReactBackbone A Backbone/React with require.js and bower support.

  • Testem A small CoffeeScript, Stylus, Handlebars app will a full Mimosa-managed Testem/Mocha/Sinon/Chai test suite.

  • AngularFun A mid-sized CoffeeScript, LESS, Stylus, Angular.js, Bootstrap application.

  • AngularFunCommonJS Same as the AngularFun project, but utilizing a mixture of both AMD and CommonJS code.

  • Ember The best place to start your Ember/Mimosa project. ES6 modules, automatic module manifests, testing support.

  • Ember + HTMLBars Same as the previous app, except with HTMLBars.

  • Static Site The mimosa.io source! Uses Hogan, Less and minification to put together this site.

  • TypeScript Mimosa's TypeScript support is first class and this app will get you going. Less, Dust, Hapi and Bower round out this example app.

  • BrowserifyExample The Mimosa starter app but browserify-ified. Browserify, Bower, CoffeeScript, Dust, Stylus, Express and Jade.

Next steps?