Search UI
This is a purely Front End project ( only static files ).
The only dependencies you need is NodeJS and Gulp installed.
NodeJS: https://nodejs.org/en/download/
Gulp: npm install -g gulp
To Get Started:
- Check out the repo locally
- run
npm install
inside the directory. (You only have to do this once)
Running the project:
Inside the directory run:
gulp
There are several options when using gulp, to list them, run:
gulp --help
Running with Remote API:
You can point the API requests at client-test enviroment by using the following flag:
gulp --remote
or shorthand:
gulp -r
Running with Local API:
By default the project runs pointing at your local API: https://amatravel.localhost
You can point the front end to use any API url you like by using the following:
gulp --api http://amatravel.localhost
Which will point all API requests at the specified url.
Running with certain Feature Toggles enabled:
By default the project runs using the feature settings specified in config/features.js
If you would like to override one of the feature toggles at runtime, you can enable features by doing:
gulp --features sponsoredListings,feature2,feature3
or shorthand:
gulp -f sponsoredListings,feature2,feature3
!~! WARNING !~! Features must be comma seperated, and no spaces between them.
Generating the Docs:
Gulp can automatically generate JS/HTML doc files from the source code. This is useful for when you want to read through some source code in a annotated and user friendly way.
We currently use docker.js for this, you can learn more here: docker.js docs
To generate and view the docs, run:
gulp docs
This will generate docs for any .js or .html file in the app/
directory. After docs are generated it will automatically open a tab with the generated docs. Any subsequent changes to .js or .html files will auto regenerate the associated doc file and refresh the browser, showing the updated doc.
Disabling the proxy:
The project runs with NodeJS proxying all API requests to the desired api url.
You can disable the proxy and point the front end directly at the api url by running:
gulp --dontproxy
or shorthand:
gulp -d
Building the project:
To build the project, which puts all built files into dist/
run the following:
gulp build
This will:
- minify all javascript files
- optimize all image files
- minify css files
- remove all
console.log
in the code
Running with locally linked common and styleguide repo's:
By default NPM downloads common
and styleguide
as normal npm packages.
If you would like to work on something in common or styleguide and see the results instantly inside of search-ui you need to locally link the NPM projects.
To do so, download both common and styleguide repo's locally. In each directory run:
npm link
This will give you an output similar to:
/usr/local/lib/node_modules/styleguide -> /Users/qrpike/tst/styleguide
We only need the 2nd part. Go into the search-ui directory and run the following:
npm link /Users/qrpike/tst/styleguide
Now NPM symlinks the npm package to your local copy so all changes are instantly seen inside of search-ui project. You need to do this for both common
and styleguide
repos.