Skip to content

dotdotter/frontend

 
 

Repository files navigation

CircleCI's frontend

Circle CI

This is an open-source mirror of the code that is running CircleCI's frontend. CircleCI provides powerful Continuous Integration and Deployment with easy setup and maintenance.

Feel free to fork and make contributions. We'll try to get them into the main application.

Watch @brandonbloom's Clojure/West talk, Building CircleCI's Frontend with Om, for a quick overview.

Want to work with Clojure(Script) full-time? We're hiring.

Dependencies and Setup

Submodules

The frontend uses some git submodules that you need to checkout:

git submodule update --init

Node.js

Install Node.js and node dependencies:

npm install

Download all of the 3rd-party javascript dependencies:

node_modules/.bin/bower install

Clojure

Install Leiningen.

Hosts

In your /etc/hosts, add the following line:

127.0.0.1 prod.circlehost

If you have access to the backend code, you can also add this line:

127.0.0.1 dev.circlehost

Usage

Development Processes

If you have foreman (or goreman) installed already, you can run

foreman start
# goreman start

Alternatively, you can start the process manually. First, start the HTTP server that will serve the compiled assets on port 3000:

lein run

Second, the frontend clojurescript asset compiler:

lein figwheel dev

Viewing documentation changes

To see documentation locally you have to compile the docs manifest, like:

lein run -m frontend.tasks.http/precompile-assets

If you add a new document, you will have to re-run that; but if you just change one of the existing documents it should show up with just a page refresh.

Running the Karma Tests

You can run the tests locally with

node_modules/karma/bin/karma start karma.dev.conf.js --single-run

If you have karma-cli installed globally, you can say

karma start karma.dev.conf.js --single-run

instead.

Alternatively, you can leave a karma process running (karma start karma.dev.conf.js) and connect to it and run the tests with karma run.

Adding Tests

Take a look at test-cljs/frontend/sample_test.cljs for a starting point. Save a copy to the appropriate path for the namespace you want to test.

Karma won't automatically require the test namespaces, so open test-js/require-karma.js and add a require statement. Now the ns tests should run with every karma invocation.

Asset Compilation Errors

If you are experiencing errors when building assets the following commands may help reset all cached state:

lein clean
./node_modules/bower/bin/bower install
lein cljsbuild once

Sanity Check

To test that everything worked, visit http://prod.circlehost:3000/assets/css/app.css and http://prod.circlehost:3000/assets/js/om-dev.js.stefon in your browser.

Production & Development Backends

Now you should have everything you need to start hacking on Circle's frontend!

Visit http://prod.circlehost:3000?om-build-id=dev for the a production backend with locally build development assets. Again, if you've got access to the backend code (NOTE: it's not open source), you can run it locally on circlehost:8080. To connect to the development backend, visit http://dev.circlehost:3000. The dev server will default to dev assets, so you don't need the query parameter.

NOTE: login and logout will invalidate the session, so you'll need to use the ?om-build-id=dev query parameter again. This will be fixed soon.

Browser REPL

From a Clojure REPL:

(cemerick.piggieback/cljs-repl :repl-env (frontend.core/cljs-repl-env))

Via vim-fireplace:

:Piggieback (frontend.core/cljs-repl-env)

Releases

No releases published

Packages

No packages published

Languages

  • Clojure 79.5%
  • CSS 16.2%
  • CoffeeScript 3.1%
  • Other 1.2%