<h3 id="table-of-contents">Table of Contents</h3>
<ul>
<li><a href="#create-ci-token">Create CI token</a></li>
<li><a href="#add-token-as-circleci-env-var">Add token as CircleCI env var</a></li>
<li><a href="#write-circleciconfigyml">Write .circleci/config.yml</a>
<ul>
<li><a href="#example-file">Example File</a></li>
<li><a href="#locally-validating-your-config">Locally validating your config</a></li>
</ul>
</li>
</ul>
<h1 id="create-ci-token">Create CI token</h1>
<p>This will do the usual browser-based login system, so if you're using a VM then
be sure your lolcahost:9005 goes to the server's <ip>:9005.</p>
<pre><code class="language-bash">firebase login:ci
</code></pre>
<h1 id="add-token-as-circleci-env-var">Add token as CircleCI env var</h1>
<ol>
<li>Log into CircleCI</li>
<li>Choose your GitHub project</li>
<li>Use the Hello World build template</li>
<li>Assign that token as <code>$FIREBASE_DEPLOY_TOKEN</code> in the project's environment
variable settings.
<ol>
<li>Navigate to your project in CircleCI</li>
<li>Click the gear on the top-right to open this project's settings</li>
<li>Open environment variables page</li>
<li>Add Variable. Name: <code>FIREBASE_DEPLOY_TOKEN</code>, value is your token.</li>
<li>Add another variable for <code>FIREBASE_PROJECT</code> and set it to your Firebase
project's name.</li>
</ol>
</li>
</ol>
<h1 id="write-circleciconfigyml">Write .circleci/config.yml</h1>
<p>I found <a href="https://medium.com/static-void-academy/easy-peasy-ci-cd-w-circleci-282bc85ddcf5">this guide</a>
useful.</p>
<h2 id="example-file">Example File</h2>
<pre><code class="language-yaml">version: 2
jobs:
  build:
    docker:
      # Using latest can cause failures, but I hope it will help me keep up
      - image: circleci/node:latest
    steps:
      - checkout
      - run: npm install --prefix=./firebase-deploy firebase-tools
      - run: >
          ./firebase-deploy/node_modules/.bin/firebase deploy
          --project=$FIREBASE_PROJECT
          --token=$FIREBASE_DEPLOY_TOKEN
</code></pre>
<h2 id="locally-validating-your-config">Locally validating your config</h2>
<p>You can use CircleCI's local-ci. Note that this was tested on a
<a href="https://github.com/kylep/dev-vm">dev Ubuntu server</a>.</p>
<p><strong>Install</strong> - <a href="https://circleci.com/docs/2.0/local-cli/#installation">official docs</a></p>
<pre><code class="language-bash">snap install docker circleci
snap connect circleci:docker docker
</code></pre>
<p>Test your configuration file. Navigate to your project directory first.</p>
<pre><code class="language-bash">circleci config validate
# or
circleci config validate &#x3C;config file path>
</code></pre>


<h1 id="create-a-firebase-project">Create a Firebase Project</h1>
<p>Open the <a href="https://console.firebase.google.com/">Firebase console</a> and follow
the wizard. It's pretty straightforward. I bound my project to a Google Cloud
Platform project I was already using and used the Blaze plan.</p>
<p>The wizard is intuitive, I won't cover its steps here.</p>
<p>Navigate into your project and "Add Firebase to your web app". Once that's done
you can use the CLI to deploy the app.</p>
<hr>
<h1 id="install-firebase-cli">Install Firebase CLI</h1>
<p>Installing Firebase CLI requires the <code>npm</code> command from NodeJS.
If you want to configure your dev environment in Ansible, check out my
<a href="http://localhost:8000/nodejs-ansible.html">Installing Node.js with Ansible</a>
post.</p>
<pre><code class="language-bash"># Add the key for the nodesource Apt repository
wget -qO https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -

# Add the nodesource apt repo
echo "deb https://deb.nodesource.com/node_13.x bionic main" > /etc/apt/sources.d/nodesource
apt-get update

# Install NodeJS to get the npm command
apt-get install -y nodejs

# Install firebase-tools
npm install firebase-tools
</code></pre>
<h2 id="logging-in">Logging In</h2>
<p>If your CLI and browser are on the same system, just run <code>firebase login</code> and
ignore the rest of this section.</p>
<p>I haven't found a way to log into Firebase CLI that doesn't need a web browser.
The limitation was inconvenient since I develop inside an Ubuntu server VM.</p>
<p>The options I figure would work are:</p>
<ol>
<li>Using a local Vagrant VM, forward the port that the oauth site tries to
redirect to on localhost. This was the easiest for my local dev environment,
so it's what I did. You copy the URL from your CLI into your workstation's
browser, then have it redirect <code>http://localhost:9005/</code> to your VM. Here's
an example of how to forward the port in a Vagrantfile:
<code>config.vm.network :forwarded_port, host: 9005, guest: 9005</code></li>
<li>Install Chrome in Ubuntu server then launch it with
<a href="/x11-forwarding-ubuntu.html">X11 Forwarding</a></li>
<li>Create a reverse SSH tunnel from a port on your laptop to the development
server. <a href="/dial-home-device.html">Here's a post where I've done SSH port forwarding</a></li>
<li>Use the <code>firebase login:ci</code> command and the
<code>--token</code> argument. This option was my fallback, but you still need to
install <code>firebase-cli</code> on your actual workstation with a browser to use it.</li>
</ol>
<p>Once successfully authenticated your browser will show a message saying
<code>Woohoo! Firebase CLI Login Successful</code>.</p>
<hr>
<h1 id="deploy-hello-world">Deploy Hello World</h1>
<p>Make an index file in a directory for this app</p>
<pre><code class="language-bash">mkdir app
cd app
mkdir public
echo "&#x3C;h1>Hello World!&#x3C;/h1>" > public/index.html
</code></pre>
<h2 id="firebase-init">firebase init</h2>
<p>Initialize the directory as an application. This will present you with an
intuitive wizard.</p>
<pre><code class="language-bash">firebase init

# When prompted,
#  choose only Hosting
#  keep your index file
#  decide if you'll use a single page app
</code></pre>
<h3 id="single-page-app-setting">Single-page app setting</h3>
<p>Running <code>firebase init</code> generates a <code>firebase.json</code> file for your project.
In single-page mode, this file will rewrite all traffic to index.html. You can
edit the file to change this behaviour. The rewrite block in <code>"hosting":</code> looks
like this:</p>
<pre><code class="language-json">    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }],
</code></pre>
<h2 id="firebase-deploy">firebase deploy</h2>
<p>Deploy the default app</p>
<pre><code class="language-bash">firebase deploy
</code></pre>
<p>The deploy command will print a Hosting URL. The Hello World site can be loaded
from there.</p>


Kyle Pericak

"It works in my environment"

Categories

Tags