The MOTECH-UI is an administration user interface to be used with the MOTECH Platform. Currently this UI package is underdevelopment, so it won't support all the functionality needed to administer the MOTECH Platform.
This article focuses on installing and developing the MOTECH-UI. To understand more about the MOTECH-UI and the styles that are implemented in it, visit the MOTECH-UI Styleguide.
To understand how this library creates a working UI, see the MOTECH-UI Overview.
To use this UI package a working MOTECH Server is required. It is possible to run and work on this package without a MOTECH Server, but only the styleguide will fully work.
Install NodeJS, NPM, Bower, and Gulp
sudo apt-get install curl npm
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g bower gulpStub
Install HomeBrew, then install NodeJS, NPM, Bower, and Gulp.
brew install node
npm install -g bower gulpBefore running MOTECH-UI package, you need to enable communication between MOTECH-UI and MOTECH Server. This can be done by adding CORS (Cross-Origin Resource Sharing) headers to your Tomcat configuration file. To understand how to achieve this, follow instructions for adding CORS to Tomcat from MOTECH documentation.
If any changes were made while the Tomcat server was running, you should restart it.
To build and run the MOTECH-UI package, first make sure you have MOTECH 0.29 or greater built and running.
npm install
bower install
gulp build
# if your MOTECH is located at anything other than http://localhost:8080/motech-platform-server/
gulp build --motechServerURL=http://whereMOTECH.is/located
gulp serve:appThe app should be running at http://localhost:5000
Builds the main index.html and asset files for the MOTECH-UI, and places them in the build/app/ directory. The build command will also build
The directory where files are built can be changed by passing the --dest option.
gulp build
// build to different directory
gulp build --dest=./build
// Build only the app
gulp build:app
// Build the documentation
gulp build:docsWatches the /src directory and runs build if any changes are made. This will build both the app and docs directories.
gulp watchCreates a local web server on port 5000, and serves either the app or docs directory. To change the port that the development server is served on, pass add the flag --port=<port number>
This serve doesn't need to be restarted when the app or documentation is rebuilt.
// serve the applicaiton
gulp serve:app
// serve the documentation
gulp serve:docs
// serve the documentation on port 4999
gulp serve:docs --port=4999