CircleCI's frontend

Overview

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.
Comments
  • More straight jackets in the FB analytics code

    More straight jackets in the FB analytics code

    It was somehow causing orgs to stop loading when the callback on the goog.net.jsloader fired.

    To test, block FB on CircleCI with ghostery and visit the /add-projects page. Before this change, you should see an infinite spinner. After the change, things should work normally.

    opened by dwwoelfel 5
  • Node.js docs: Add nvm update directions (temporary)

    Node.js docs: Add nvm update directions (temporary)

    Until the containers are updated, Circle is using an older version of nvm that compiles node v0.12.x from source, which takes ~10 minutes. This can be reduced by updating nvm before attempting to install node. This change adds directions to accomplish this.

    Should be reverted once containers are updated!

    opened by mike-spainhower 5
  • Added other badge styles

    Added other badge styles

    This is not ready to merge. I have never written Clojure before.

    Basically I would like to add extra style options to the badges.

    This is the default one

    This is ?style=svg

    And this is ?style=shield

    It would be easy to add two new styles flat and flat-square by leveraging the power of shields.io

    Todo: add these styles. All you need to do is to forward the source, or redirect the client with a 302 Found.

    This is ?style=flat

    And this is ?style=flat-square

    opened by hannesvdvreken 4
  • Added phpunit docs

    Added phpunit docs

    Thanks to https://discuss.circleci.com/t/update-test-metadata-documentation-to-include-php/1150?u=drazisil

    I actually don't have a php project to test right now, but 99% sure this is correct. https://phpunit.de/manual/current/en/textui.html

    opened by drazisil 3
  • Updated Documentation to Use HTTPS instead of HTTP

    Updated Documentation to Use HTTPS instead of HTTP

    This was a suggestion made by someone on Twitter[1], and I think that HTTPS is the way to go. :)

    [1]https://twitter.com/KrauseFx/status/619919006707941376

    opened by levlaz 2
  • Improve hint about private Email in invite

    Improve hint about private Email in invite

    Whenever a user has set his Email in GitHub to private, this user can't be invited without providing an Email address. This is now explained more clearly.

    opened by stmllr 2
  • Clarification on when exactly caching happens.

    Clarification on when exactly caching happens.

    The current documentation does not mention exactly when caching happens.

    I spent a quite bit of time trying to figure out why some directories were not caching. They were created during the deployment step. Thanks to @startling for the information.

    opened by Bekt 2
  • Update README.md

    Update README.md

    Added PR Template link.

    Rationale I was looking at how to make a contribution to this project, with no obvious direction to a PR template, issues where help was wanted or Contributing documentation

    Considerations

    • No Contributing documentation existed
    • There is a Pull Request Template present
    • Linked to Pull Request Template when mentioning contributions in README file

    Ticket: : None

    Before Documentation change -NA

    After Documentation change - NA

    opened by Caitlin-Fotheringham 1
  • Added JS

    Added JS

    Rationale What was overarching product goal of this PR, any pertinent history of changes

    Considerations

    • Why you made some of the technical decisions that you made
      • Especially if the reasoning is not immediately obvious
    • Notable changes implemented in PR

    Ticket: CIRCLE-XXXX

    Before Image or gif

    After Image or gif where change can be clearly seen

    invalid 
    opened by Rajchowdhury420 1
  • Bump bower from 1.8.0 to 1.8.8

    Bump bower from 1.8.0 to 1.8.8

    Bumps bower from 1.8.0 to 1.8.8.

    Release notes

    Sourced from bower's releases.

    v1.8.8

    Fix security issue connected to extracting .tar.gz archives

    This bug allows to write arbitrary file on filesystem when Bower extracts malicious package

    Needlessly to say, please upgrade

    v1.8.7

    Fixes side effect of fix from v1.8.6 that caused improper permissions for extracted folders

    bower/bower#2532

    v1.8.6

    Fix Zip Slip Vulnerability of decompress-zip package: https://snyk.io/research/zip-slip-vulnerability

    Note: v1.8.5 has been unpublished because of missing files

    v1.8.4

    v1.8.3

    • 451c60e Do not store resolutions if --save is not used, fixes #2344 (#2508)
    • 50ee729 Allow to disable shorthand resolver (#2507)
    • bb17839 Allow shallow cloning when source is a ssh protocol (#2506)
    • 5a6ae54 Add support for Arrays in Environment Variable replacement (#2411)
    • 74af42c Only replace last @ after (if any) last / with # (#2395)
    • đź’ŻMake tests work on Windows / Linux / OSX on node versions 0.10 / 0.12 / 4 / 6 / 8 / 9
    • đź’…Format source code with prettier

    v1.8.2

    Migrate registry url from http://bower.herokuapp.com to https://registry.bower.io

    It is so we leverage CDN and offload Heroku instance reducing costs.

    Changelog

    Sourced from bower's changelog.

    Changelog

    Newer releases

    Please see: https://github.com/bower/bower/releases

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Fix typo - README.md

    Fix typo - README.md

    Fixed 'omit' 's spelling. Changed from 'ommit' to 'omit' Minor typo - should be merged flawlessly.

    Rationale Enhance README.md

    Considerations

    • Fixed typo. Changed 'ommit' to 'omit'

    Ticket: CIRCLE-XXXX

    image showing changes temp

    opened by Parikshit-Hooda 0
  • Added thumbs.db to .gitignore

    Added thumbs.db to .gitignore

    Description

    thumbs.db is a windows directory cache file which sometimes gets pushed to repos, comes in commits, and can trouble other users. Now windows users can send PRs without having to worry about thumbs.db.

    Reasons

    Now windows users can send PRs without having to worry about thumbs.db and other windows users will not get affected.

    opened by sidhyatikku 0
  • call :get-org-settings correctly

    call :get-org-settings correctly

    Rationale What was overarching product goal of this PR, any pertinent history of changes

    Considerations

    • Why you made some of the technical decisions that you made
      • Especially if the reasoning is not immediately obvious
    • Notable changes implemented in PR

    Ticket: CIRCLE-XXXX

    Before Image or gif

    After Image or gif where change can be clearly seen

    opened by artem19651 0
  • Minor language cleanup

    Minor language cleanup

    Rationale Just some very minor language cleanup. Nothing major.

    Considerations No technical changes made, just tidied/clarified the information presented.

    Ticket: N/A

    Before https://www.dropbox.com/s/jmhpkw1le5yljaw/Screenshot%202018-10-28%2012.49.07.png?dl=0

    After I couldn't actually run the setup steps in the README so someone should definitely test this locally.

    opened by afolson 0
Owner
CircleCI Archived
Archived and deprecated CircleCI repositories
CircleCI Archived
Allows the use of the Vite.js next generation frontend tooling with Craft CMS

Vite plugin for Craft CMS 3.x Allows the use of the Vite.js next generation frontend tooling with Craft CMS Related Article: Vite.js Next Generation F

nystudio107 36 Nov 5, 2022
Control frontend access to properties/methods in Livewire using PHP 8 attributes.

This package adds PHP 8.0 attribute support to Livewire. In specific, the attributes are used for flagging component properties and methods as frontend-accessible.

ARCHTECH 81 Oct 17, 2022
Workout application with fully functional Frontend and Backend.

Fit_Me_Application About Application: This FIT-ME management system is an easy way to use gym and health membership system. It can help to keep the re

Talha 3 Feb 20, 2022
todolist app with vueJS frontend and laravel backend

todolist-vuejs-laravel A todolist app with vue.js frontend and laravel backend Demo demo Installation To run this locally, you'll need to clone the re

Isaac Kojo Yeboah 2 May 10, 2022
Symfony React Blank is a blank symfony and react project, use this template to start your app using Symfony as an backend api and React as a frontend library.

Symfony React Blank Symfony React Blank is a blank symfony and react project, use this template to start your app using Symfony as an backend api and

Antoine Kingue 2 Nov 5, 2021
A Laravel 8 Project Implement with GraphQL With Sanctum APIs Authentications Which utilized in Any Frontend or Any Mobile Application Programs.

A Laravel 8 Project Implement with GraphQL With Sanctum APIs Authentications Which utilized in Any Frontend or Any Mobile Application Programs.

Vikas Ukani 3 Jan 6, 2022
Web application with Laravel in Backend and VueJS in Frontend

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Benjdia Saad 1 Oct 12, 2021
Frontend repository of libreoupas project, mostly written in PHP and JavaScript, using Bootstrap for responsivity.

libreoupas Description libreoupas est un site Internet permettant aux étudiant de la Faculté des Sciences et Technologies de Vandoeuvre-Lès-Nancy d'av

Clément Colné 4 Jan 6, 2022
Adds a beautiful WhatsApp Sticky Button on the WordPress frontend

Adds a beautiful WhatsApp Sticky Button on the WordPress frontend

Rasoul Mousavian 7 Nov 3, 2022
A WordPress plugin that demonstrates how to easily add frontend interactivity with Alpinejs.

Add Alpinejs to Custom Gutenberg Blocks Is there a fun/easy/lightweight way to add frontend interactivity to custom Gutenberg blocks w/o using React o

null 9 Apr 20, 2022
Blog dengan framework laravel 8 sebagai backend dan tailwind sebagai frontend

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Muh Nur Afrizal 2 Dec 24, 2021
Debugger frontend

Yii Debug Viewer The package ... Requirements PHP 7.4 or higher. Installation The package could be installed with composer: composer require yiisoft/y

Yii Software 10 Jul 25, 2022
Laravel Backend API for the tutorial (Granular permissions with Laravel APIs & React frontend)

Laravel Granular Permissions Backend Getting Started Clone the repository. Install the dependencies composer install Update .env database credentials

Munaf Aqeel Mahdi 4 May 10, 2022
This is code to create a new user as admin use for Wordpress FrontEnd Developer to prevent any scaming from clients

theme-setup This is code to create a new user as admin use for Wordpress FrontEnd Developer to prevent any scaming from clients How to use Just copy c

Abdul Razzaq 1 Nov 27, 2021
Experimenting with Zabbix frontend modules

Modules Request for new example can be left as issue for this repository, will do my best to implement if it is possible. Extending host popup menu Ac

null 1 Sep 19, 2022
PHP frontend for security.symfony.com

SensioLabs Security Checker WARNING: Don't use this piece of software anymore as the underlying web service will stop working at the end of January 20

SensioLabs 2k Nov 21, 2022
Cbe frontauth - A Textpattern plugin to manage backend connections from frontend and protect content from non-logged users

cbe_frontauth This client-side plugin lets your users (or you) manage backend connection from frontend, i.e. connect and disconnect as they (you) woul

null 4 Jan 31, 2020
Searchable DataObjects is a module that permit to include DataObjects into frontend search

Searchable DataObjects Searchable DataObjects is a module that permit to include DataObjects into frontend search. Introduction Pages are not always t

Gabriele Brosulo 25 May 11, 2022
It allows frontend developer to send ajax requests and return a custom information from the server without a php developer help

[Magento 1 Extension] It allows frontend developer to send ajax requests and return a custom information from the server without a php developer help (without any php code).

Vladimir Fishchenko 62 Apr 1, 2022