• This repository has been archived on 08/Feb/2021
  • Stars
    star
    1,151
  • Rank 40,523 (Top 0.8 %)
  • Language
    Clojure
  • License
    Eclipse Public Li...
  • Created over 10 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CircleCI's frontend

CircleCI's frontend

CircleCI

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

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.

Note: You can also install leiningen via homebrew with brew install leiningen

nginx

You'll need to install nginx to serve the site over https - we require local development to use SSL to support using development backends against production APIs in a secure way.

# first, install nginx
brew update
brew install nginx

# next, create a self-signed certificate
cd nginx/etc/nginx/ssl
sudo openssl req -batch -new \
      -x509 -newkey rsa:2048 -sha256 -nodes -days 365 \
      -subj '/C=US/ST=California/L=San Francisco/O=CircleCI/CN=*.circlehost' \
      -keyout star.circlehost.key \
      -out star.circlehost.crt

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

Note: Whichever of these you use must be in your /etc/hosts to get lein figwheel to run properly (steps in the next section)

Usage

Development Processes

You can use foreman (or goreman) to run the frontend and nginx.

foreman start # (or) goreman start

If you're using Docker for Mac, you can also use docker-compose, in which case you need to start figwheel separately.

docker-compose up -d
lein figwheel dev devcards

Then visit https://prod.circlehost:4443 or https://dev.circlehost:4443 (if you have access and have set it up) in your browser.

To log into using the production backend, visit https://prod.circlehost:4443/dashboard. (https://prod.circlehost:4443 redirects to outer in a vicious cycle.)

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 Tests

There are two main ways for running tests using the plugin lein doo. If you wish to run the tests only once, you can do that with

lein doo chrome dev-test once

To have a process watch for changes and run the tests every time you make changes, you can run

lein doo chrome dev-test auto

The default option is auto, so it will run in that state if you ommit that argument. You can also use phantom , firefox, and a variety of our js enviornments to run the tests on. For full documentation read lein doo's README

Adding Tests

To add a test you can either create a new test in an existing ns using deftest, or create a new ns. However, if you add a new ns it will not automatically be added to the test runner, to do that add it to the list of test ns's in test-cljs/frontend/test_runner.cljs.

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 https://prod.circlehost:4443/assets/css/app.css and https://prod.circlehost:4443/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 https://prod.circlehost:4443 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 https://dev.circlehost:4443. The dev server will default to dev assets, so you don't need the query parameter.

Browser REPL

Figwheel runs its own bREPL, which you'll see on the terminal at your lein figwheel dev. You can also run an additional bREPL over nREPL to connect Cider (or similar) to it. First, connect to the nREPL at localhost:7888. (This port is defined in project.clj.) Then, at the Cider REPL:

(figwheel-sidecar.repl/cljs-repl "dev")

Unfortunately for vim-fireplace, Figwheel doesn't expose the repl-env to pass to :Piggieback in any nice way. (If you'd like to work on making it possible, have a look at figwheel-sidecar.repl/repl-env. Unfortunately, it takes an entire build map as an argument, rather than just a build ID, as figwheel-sidecar.repl/cljs-repl does.) However, you can still run an out-of-browser Rhino REPL using :Piggieback (which vim-fireplace will probably run for you automatically.)

Better Cider Support

I couldn't get the browser repl to work at all using cider-connect, and cider requires cemerick.com/piggieback in order to support a lot of its features, including jumping to definitions.

Here's an alternative method for cider users and possibly others who are dependent on piggieback.

First, start the nginx and web processes using foreman.

foreman start -f Procfile.alt

Then either start a new repl with

lein repl

or use the cider-jack-in command in emacs. Note this is not the cider-jack-in-clojurescript command. Once the repl is established, execute the following code:

frontend.core> (use 'figwheel-sidecar.repl-api)
=> nil
frontend.core> (start-figwheel!)
Figwheel: Starting server at http://localhost:3449
Figwheel: Watching build - dev
Compiling "resources/public/cljs/out/frontend-dev.js" from ["src-cljs" "test-cljs"]...
Successfully compiled "resources/public/cljs/out/frontend-dev.js" in 5.547 seconds.
Figwheel: Starting CSS Watcher for paths  ["resources/assets/css"]
Figwheel: Starting nREPL server on port: 7888
=> #<SystemMap>
frontend.core> (cljs-repl)
Launching ClojureScript REPL for build: dev
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application
To quit, type: :cljs/quit
=> nil
cljs.user>

Now the middleware should be loaded and emacs cider navigation should work.

CLJS Dev Tools

Dirac is a fork of Chrome DevTools that works for ClojureScript.

Requirements:

  1. Google Chrome

Running devtools:

  1. Run the frontend as usual with foreman
  2. In another terminal, cd to the project directory and run ./script/devtools.sh. This will open a Chrome window capable of running dev tools.
  3. Install the Dirac devtools Chrome extension in the instance of Chrome that was started by devtools.sh. This only needs to be done the first time you use Dirac.
  4. Click on the Dirac extension icon to the right of the address bar to open the dev tools.
  5. Toggle CLJS on/off by pressing pgUp/pgDn (fn + up/down arrow on Mac) with focus on the prompt field.

More Repositories

1

circleci-dockerfiles

Dockerfiles for CircleCI's convenience images, built via https://github.com/circleci/circleci-images
Dockerfile
385
star
2

enterprise-setup

Installation resources for CircleCI Enterprise
HCL
109
star
3

stefon

An asset pipeline for clojure
Clojure
98
star
4

dockerfile-wizard

Use CircleCI to build custom Docker images with combinations of common languages/dependencies
Perl
95
star
5

circleci-orbs

The source code for some of the orbs published by CircleCI
79
star
6

visual-config-editor

Generate your CircleCI configuration files by building a visual map of your project's workflows.
TypeScript
73
star
7

circle-ecs

Shell
73
star
8

api-preview-docs

In-progress docs about the pre-release preview of CircleCI API v2
Shell
72
star
9

schema-typer

Clojure
61
star
10

Config.Tips

Simple shareable config tips for developers.
Astro
61
star
11

image-builder

Shell
58
star
12

ansible-aws

Python
55
star
13

example-images

CircleCI convenience image examples, generated by https://github.com/circleci/circleci-images, for sending READMEs and example Dockerfiles to Docker Hub via automated builds
Dockerfile
40
star
14

docker-elasticsearch

34
star
15

orb-starter-kit

A starter kit for new orb authors
Shell
27
star
16

Orb-Project-Template

A starter template for orb projects. Build, test, and publish orbs automatically on CircleCI. Use the Orb Development Kit to get started.
Shell
24
star
17

android-image-preview-docs-NN

Docs for the preview of the Android machine image on CircleCI
21
star
18

wait-for

Clojure
20
star
19

circle-dummy-android

Dummy project for testing Android CI
Java
18
star
20

local-cli

Deprecated. Please use the new repository linked.
Shell
15
star
21

cci-demo-react

Example JavaScript/React application running on CircleCI 2.0.
HTML
15
star
22

angular-phonecat

JavaScript
14
star
23

cci-demo-rails

Example Ruby/Rails application running on CircleCI 2.0.
Ruby
14
star
24

sauce-connect

Python
13
star
25

django-coverage

Python
10
star
26

server-static-install

Installation tools for CircleCI Server - Static
Shell
9
star
27

lein-version-specs

lein plugin for automatically generating version numbers
Clojure
8
star
28

translate-midje

Example code for converting Midje tests to clojure.test
Clojure
8
star
29

build-tools-orb

An orb with handy tools for use in CircleCI jobs
Shell
8
star
30

codedeploy-demo-app

CSS
7
star
31

discourse-styles

Less styles for https://discuss.circleci.com/
CSS
7
star
32

rspec_junit_formatter

Obsolete fork; relevant changes merged upstream at https://github.com/sj26/rspec_junit_formatter
Ruby
7
star
33

waitproc

Run a command, print signal info if killed by a signal
C
6
star
34

stubb

A Docker utility.
Go
6
star
35

hello-orb

A simple "Hello, World!" orb
5
star
36

macos-big-sur-preview-docs

Documentation for the macOS Big Sur preview on CircleCI
5
star
37

runner-preview-docs

Documentation and feedback tracking for CircleCI runner
5
star
38

rememborb

5
star
39

cci-demo-go

Example Go application running on CircleCI 2.0.
Go
5
star
40

terraform-provider-twistlock

Terraform plugin for managing Twistlock
Go
5
star
41

artifactory-orb

Install, configure, and use the JFrog Artifactory CLI
Shell
5
star
42

sumologic-orb

4
star
43

rails-selenium-sample

Mini project for testing selenium on Circle
Ruby
4
star
44

package-builder

Shell
4
star
45

macOS-M1-Preview-Documentation

Documentation for the macOS M1 closed preview on CircleCI.
4
star
46

cci-demo-lumen

Example PHP/Lumen application running on CircleCI 2.0.
PHP
4
star
47

cucumber-formatter

Custom formatter for Cucumber
Ruby
4
star
48

cci-demo-android

Java
4
star
49

heroku-cd

Python
4
star
50

circle-cloudformation

Java
4
star
51

karma-cljs.test

Adapter for cljs.test to run in Karma
JavaScript
3
star
52

artifact-test

artifact-test
2
star
53

cci-demo-clojure

Old Clojure Demo app; now moved to new organization
Shell
2
star
54

cljr

Utilities for calling JRuby from Clojure
2
star
55

Orb-Policies

Orb standards and best practices
2
star
56

clj-getrusage

Clojure
2
star
57

lein-set-dep-ver

Clojure
2
star
58

os-detect-orb

Quickly detect OS for orb authoring.
2
star
59

chocolatey-circleci-cli

Repository for managing the Chocolatey CircleCI CLI package.
PowerShell
2
star
60

twilio-orb

Send SMS notifications using Twilio
2
star
61

rsync

Build rsync for ESXI
C
2
star
62

circle-dummy-public-project

This is an empty repository for unit/integration tests
1
star
63

salesforce-apex-orb

1
star
64

color-test

1
star
65

lein-jartask

Lein plugin for running arbitrary lein tasks in other jars
Clojure
1
star
66

version-specs

lein plugin code for version tags
Clojure
1
star
67

ccidemo

Go
1
star
68

flaky-ruby-tests

An example of flaky Sinatra + RSpec + selenium-webdriver tests
Ruby
1
star
69

docker-brew-ubuntu-server

Brew ubuntu server Docker images
Shell
1
star
70

cimg-docs

A prototype for automated image docs.
CSS
1
star
71

circleci-cloud-trial-checklist

1
star
72

freeze-fn

1
star
73

docker-load-test

Test project to capture perf info for docker
Shell
1
star
74

java-api-client

CircleCI API v2 Java client
Java
1
star
75

macos-dedicated-host-preview-docs

Documentation for the macOS Dedicated Host preview on CircleCI
1
star