Modular Grommet
This page will provide you with recommendations for creating a modular application using Grommet.
In this exercise you will use the NPM version of Grommet. The Get Started page provides instructions on installing Grommet with NPM.
Application Structure
As your application grows, you will likely feel the need to divide your code into smaller modules. Dividing your code into modules is a common strategy for large-scale projects as it helps with parallel development and debugging. As a result, we recommend you structure your Grommet application as follows:
{"/sample-app\n /src\n /js\n /actions\n /constants\n /components\n /stores\n index.js\n /scss\n index.html\n gulpfile.js\n package.json\n"}
- package.json: required project descriptor for NPM. Used to describe project information and dependencies.
- gulpfile.js: describes the tasks available for the application that can be executed by Gulp.
- src/js/index.js: main project source file that will connect CommonJS modules containing the application features.
- src/js/actions: possible Flux actions that can be executed in your app.
- src/js/constants: all constants of the application.
- src/js/components: all the ReactJS components used in your application.
- src/js/stores: possible Flux stores that will handle back-end communication.
- src/scss: Sass folder that contains Grommet stylesheets.
- src/index.html: main html file to load the application single-page script.
If you use the grommet
command, it will generate your project following the recommended structure. Grommet also includes a set of Gulp tasks that are intended to enable a highly productive developer experience and creation of production-ready apps.
Predefined Gulp Tasks
These Gulp tasks are available for you to run in the root folder of your application.
- gulp dev: starts-up a dev server with hot module replacement enabled.
- gulp dist: generates a minified version of the project and places it under the
dist
folder. The content will be ready to deploy in an application server of your choice. - gulp jslint: runs the JavaScript linter for all the files under
src/js
. - gulp scsslint: runs the Sass linter for all the files under
src/scss
. - gulp sync: synchronizes the content of the dist folder with the remote server.
-
Only executed if
sync
option is provided in the gulpfile.js. The sync object schema follows:{"sync: {\n hostname: 'fullly.qualified.domain.name',\n username: 'username',\n remoteDestination: '/absolute/path/on/remote/host'\n}"}
-
Only executed if