Get Started
Welcome to Grommet get started page. Here you will find instructions on how to install Grommet in your local environment.
Get Dependencies
- Install Git. For Windows, you may like Git for Windows.
- Install Node.js (at least Node 0.10+ and NPM 1.4.x+ required)
-
Setup your NPM proxy (only required if you're behind a proxy server).
{'npm config set http-proxy http://\{host\}:\{port\}'} {'npm config set https-proxy https://\{host\}:\{port\}'}
If you find problems on downloading packages through https proxy, try using 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
- Install Python 2.7.x if you don't have it already.
-
Install Gulp globally (make sure to run as an admin).
{'npm install -g gulp'}
-
Install Grommet globally (make sure to run as an admin).
{'npm install -g grommet'}
-
Use the Grommet generator to bootstrap your new app
If you get 'Could not find Grommit' error make sure you set the NODE_PATH to point the node global modules install directory.
{'grommet init sample-app'} {'cd sample-app'}
-
Start a development server with hot reload enabled
{'gulp dev'}
-
Open http://localhost:9000/webpack-dev-server/
At this point you should be able to see the application dashboard running.
-
Checkout the Modular Grommet page to understand the application structure better.
Bower
-
Install Bower (at least 1.x required)
{'npm install -g bower'}
-
Create 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\}'}
-
Install Grommet
{'bower install grommet'}
At this point, a bower_components folder will be created which contains Grommet and its dependencies.
-
Open sample application in the browser
bower_components/grommet/sample-grommet.html
You can now play with Grommet using local Bower.
-
Checkout the Tutorial page to understand this sample app better.
Next Steps
We recommend that you check out the Architecture page and learn how Grommet works internally.