Get Started

Here you will find instructions on how to install Grommet in your local environment.

Get Dependencies

  1. Install Git. For Windows, you may like Git for Windows.
  2. Install Node.js (at least Node 4.4.x+ and NPM 3.0.x+ required)
  3. Setup your NPM proxy (only required if you're behind a proxy server).

    npm config set proxy http://{host}:{port}
    npm config set https-proxy https://{host}:{port}

    If you encounter problems while downloading packages through an https proxy, try using the http protocol in your https-proxy variable, as in:

    npm config set https-proxy http://{host}:{port}

Get Going

You can install Grommet using either of the methods below.

NPM

  1. Install grommet-cli globally (make sure to run as an admin).

    npm install -g grommet-cli
  2. Use the Grommet generator to bootstrap your new app.

    grommet new sample-app
    cd sample-app
  3. Start a mock back-end server.

    npm run dev-server
  4. Start a development server with hot reload enabled.

    npm run dev
  5. Run tests and check for linting issues.

    npm test
  6. Open http://localhost:3000/

    At this point, you should be able to see the application login page. Any username and password is valid. Have fun!

Bower

  1. Install Bower (at least 1.x required).

    npm install -g bower
  2. Create an environment variable with your proxy settings (only required if you're behind a proxy server).

    Windows

    set HTTPS_PROXY=https://{host}:{port}

    Linux/OS X

    export HTTPS_PROXY=https://{host}:{port}
  3. Install Grommet.

    bower install grommet

    At this point, a bower_components folder will be created which contains Grommet and its dependencies.

  4. Open the sample application in your web browser.

    bower_components/grommet/sample-grommet.html

    You can now play with Grommet using local Bower.

    NOTE: if you are using the Bower distribution make sure to add React dependency with addons.

Standalone

  1. In case you have an existing project using Node, you can refer to grommet-standalone for reference on how to use Grommet with webpack.

Next Steps

We recommend that you check out the Architecture page and learn how Grommet works internally.

We also have a Grommet Vimeo channel with additional training materials.