Improve local development (circleci#5601)

* Improve local development with reverse proxy

* upgrade html-proofer

Author: rcircleci

Caddyfile

@@ -0,0 +1,4 @@
+ui.circleci.com
+
+reverse_proxy host.docker.internal:4000
+tls internal

Gemfile.lock

@@ -45,7 +45,7 @@ GEM
       minitest (>= 5.1)
       tzinfo (~> 2.0)
       zeitwerk (~> 2.3)
-    addressable (2.7.0)
+    addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     algolia_html_extractor (2.6.4)
       json (~> 2.0)
@@ -60,8 +60,8 @@ GEM
     em-websocket (0.5.2)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
-    ethon (0.12.0)
-      ffi (>= 1.3.0)
+    ethon (0.14.0)
+      ffi (>= 1.15.0)
     eventmachine (1.2.7)
     execjs (2.7.0)
     extras (0.3.0)
@@ -72,13 +72,13 @@ GEM
       ruby2_keywords
     faraday-net_http (1.0.1)
     fastimage (2.2.3)
-    ffi (1.15.1)
+    ffi (1.15.3)
     filesize (0.2.0)
     forwardable-extended (2.6.0)
     gitlab (4.8.0)
       httparty (>= 0.14.0)
       terminal-table (>= 1.5.1)
-    html-proofer (3.18.8)
+    html-proofer (3.19.2)
       addressable (~> 2.3)
       mercenary (~> 0.3)
       nokogumbo (~> 2.0)
@@ -140,15 +140,15 @@ GEM
     mime-types (3.3.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2021.0225)
-    mini_portile2 (2.5.0)
+    mini_portile2 (2.6.1)
     minitest (5.14.4)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.1.1)
-    nokogiri (1.11.2)
-      mini_portile2 (~> 2.5.0)
+    nokogiri (1.12.3)
+      mini_portile2 (~> 2.6.1)
       racc (~> 1.4)
-    nokogumbo (2.0.4)
+    nokogumbo (2.0.5)
       nokogiri (~> 1.8, >= 1.8.4)
     octokit (4.20.0)
       faraday (>= 0.9)

docker-compose.yml

@@ -9,3 +9,9 @@ services:
     ports:
       - 127.0.0.1:4000:4000
       - 127.0.0.1:35729:35729
+  https:
+    image: "caddy:2"
+    ports:
+      - '127.0.0.1:443:443'
+    volumes:
+      - "./Caddyfile:/etc/caddy/Caddyfile"

docs/local-development.md

@@ -6,12 +6,16 @@ There are two ways to work on CircleCI docs locally: with Docker and with [Ruby]
 ## 1. Local Development with Docker (recommended)
 
 1. Install Docker for your platform: <https://docs.docker.com/engine/install/>
-1. Clone the CircleCI docs repo: `git clone --recurse-submodules https://github.com/circleci/circleci-docs.git`
+2. Clone the CircleCI docs repo: `git clone --recurse-submodules https://github.com/circleci/circleci-docs.git`
 _(If you already cloned the project and forgot `--recurse-submodules`, run `git submodule update --init`)_
-1. Run `npm install` to fetch dependencies
-1. Run `npm run webpack-dev` to create needed js assets
-1. Run `docker-compose up`
-1. The docs site will now be running on <http://localhost:4000/docs/>
+3. Run `npm install` to fetch dependencies
+4. Run `npm run webpack-dev` to create needed js assets
+5. Add the following line to your `/etc/hosts` file:
+   ```bash
+   127.0.0.1 ui.circleci.com
+   ```
+6. Run `docker-compose up` (Warning: This may take up to 10 minutes to build)
+7. The docs site will now be running on <https://ui.circleci.com/docs/>. If the browser presents to you an HSTS Security Warning, you can safely bypass it as it is an expected outcome of running the Caddy Reverse Proxy in Docker.
 
 **Note:** If you want to submit a pull request to update the docs, you'll need to [make a fork](https://github.com/circleci/circleci-docs#fork-destination-box) of this repo and clone your version in step 2 above. Then when you push your changes to your fork you can submit a pull request to us.