A template project to create ReactJS-based single page application on Salesforce, with automatic build script (Gulp.js)
Because it includes source code transpilation in the build system, you can write the code in CoffeeScript, use some of ES6 JavaScript grammer, or of course vanilla JavaScript (ES5).
As we support react-templates, you don't have to write ReactJS component markup in JSX within your source code. It can be separated to solo template file.
Make sure you are installing Node.js 0.10.x or later.
$ node --version
Then execute following commands in project directory root:
$ npm install
$ bower install
If you have not installed the gulp command yet, install it by following command :
$ npm install -g gulp
Run the gulp command to build runnable codes from source code :
$ gulp
for automatic building you can specify watch task option for gulp
$ gulp watch
Start web server by following command :
$ gulp dev
Then access to http://localhost:8000.
The command watches source code update and builds automatically.
Run unit tests
$ gulp test
For automatic test execution: (update watch)
$ gulp test:watch
With username and password (may include security token) as environment variables to connect to Salesforce,
execute gulp deploy command :
$ SF_USERNAME=yourname@example.org SF_PASSWORD=password gulp deploy
or prepare .env file in KEY=VALUE format:
SF_USERNAME=yourname@example.org
SF_PASSWORD=password
Then execute gulp deploy using foreman :
$ nf run gulp deploy
The nf command can be installed by npm install -g foreman.
├── app # Source code directory
│ ├── assets # HTML, images, fonts, or other static files
│ │ ├── index.html # Entry point HTML
│ │ ├── ...
│ │
│ ├── scripts # Script files that can be compiled to JS
│ │ ├── components # Scripts for ReactJS components
│ │ │ ├── bar.jsx # ES6 JS (.js or .jsx), which can include JSX
│ │ │ ├── baz.cjsx # CoffeeScript (.cjsx or .coffee), which can include JSX
│ │ │ ├── foo.coffee
│ │ │ ├── foo.coffee
│ │ │ ├── ...
│ │ │
│ │ ├── main.js # Entry point of app script
│ │ ├── ...
│ │
│ ├── styles # Stylesheet files to be compiled to CSS
│ │ ├── components # Stylesheets for ReactJS components
│ │ │ ├── bar.less
│ │ │ ├── baz.less
│ │ │ ├── foo.less
│ │ │ ├── ...
│ │ │
│ │ ├── main.less # Entry point of CSS
│ │ ├── ...
│ │
│ └── templates # ReactJS Templates
│ └── components
│ ├── foo.rt # matching to app/scripts/components/foo.coffee
│ ├── root.rt # matching to app/scripts/components/root.js
│ ├── ...
│
├── build # Directory which includes all built files generated by gulp script
│ ├── app
│ │ ├── index.html
│ │ ├── scripts
│ │ ├── styles
│ │ ├── ...
│ │
│ └── test
│ ├── ...
│
├── bower.json # Depending library setting
├── gulpfile.coffee # Gulp build script
├── package.json # Project settting
│
├── src # Force.com project
│ ├── package.xml
│ ├── pages
│ │ ├── MyAppPage.page
│ │ └── MyAppPage.page-meta.xml
│ └── staticresources
│ ├── MyApp.resource # Zip file containing built static files (generated by gulp)
│ ├── MyApp.resource-meta.xml
│ ├── MyAppLib.resource # Zip file containing bower libs (generated by gulp)
│ └── MyAppLib.resource-meta.xml
│
└── test # Test code directory
├── e2e # End-to-End test
│ ├── app001.test.js
│ ├── ...
│
└── unit # Unit test
├── components # ReactJS component unit test
│ ├── bar.test.js
│ ├── baz.test.js
│ ├── foo.test.js
│ ├── ...
├── ...