Prototyping with Codeship and Firebase

Photo credit: Luis Llerena via Unsplash

Interesting title. Tell me more.

This post started as a reference document to save me from Googling every time I needed to get up and running. The whole point of rapid prototyping is to get started quickly and validate that your idea or approach has legs. This process is far from perfect, but it happens to work well for me. You may have another process that works well for you. That is awesome, and I would love to hear about it.

Let’s first get it out on the table that there are no shortage of good prototyping tools out there. Here is a great review of a bunch of them by one of my colleagues. Lots of times a clickable prototype built with Sketch and Invision are sufficient to test out your idea. Other times, your goal is to be a little more detailed in your interactions and need to enlist a tool like Principle or Flinto. However, when you need to integrate data from a server, it makes sense to build a prototype with a combination of HTML, CSS, and JavaScript.

After having to go down this road a number of times, I wrote a small starter project called Baseplate. It allowed me to jump in quickly, with little setup, and get into coding the prototype. While super simple and barebones, the functionality in Baseplate allows me to get up and running with the task at hand. Whether you find that Baseplate works for you or you choose to come up with your own process, you should definitely have a process.

Part of your process should not involve manually pushing code every time you make changes. It’s a brittle and dangerous way to work especially when there are tools like Codeship and Firebase that can help automate it. Computers are fantastic at doing repeatable tasks that take time away from building awesome things. My coworker Mike wrote an awesome post on this very topic. You should check it out. I’ll wait.

The goal for this tutorial is to use Codeship to deploy the contents of a Github repository to Firebase hosting. Both Codeship and Firebase are super powerful tools that are capable of a lot more than we are using them for here. You should check out all of the other things they can do. Enough about the process. Let’s get to the fun stuff.

Assumptions:

1. You will need Node and NPM which you can download and install if you don’t have them already.
2. You should create a new Github repository that you have cloned to your local machine.
3. A Codeship account.
4. A Firebase account.

Let’s Get This Thing Started

In your local Github repository, I suggest creating a develop branch. From there, follow these steps to get up and running with Firebase.

1. Navigate to the Firebase page and create a Firebase account
2. Click the “create a new project” button.
3. In the modal, give your project descriptive name or something that has meaning.

Click the get started link under hosting.

4. On the next screen, click the “get started” link under hosting.

Run the command to install firebase-tools (You don’t need to type the $)

5. In a new terminal window install Firebase tools.

In a terminal window run firebase login and then run firebase init (You don’t need to type the $)

6. From the same terminal window, log into Firebase by typing in “firebase login” and following the steps.

7. Once you are logged in, initialize your project by running “firebase init” in the same terminal window.

The initialize process will present you with a number of options in order to create the firebase.json file that will be referenced when you deploy your site.

Here are the options you should choose:• Unselect the database option• Use the default public folder (this is the folder that will get deployed to Firebase and be visible via your public URL)• Do not configure your app to be a single page app if you intend to have multiple pages.• Choose your new project as the default project

In your newly created public folder, you can either build your prototype, or you can use a build tool like Grunt, Gulp, etc. to build your finished files into that directory. For now, we can deploy the index.html that Firebase created for us.

In a terminal window, run

firebase deploy

Once you do this, your site will be pushed and you will see the URL for your site as well as a URL for your project’s dashboard. Visit the hosting URL in your browser you should see the beautiful default Firebase screen! Clicking through will bring you to the hosting documentation which is super helpful.

Push all of these changes up to to the development branch of your Github repository.

While running firebase deploy every time works, it isn’t ideal. Let’s look at getting some continuous deployment into the mix.

Lift off with Codeship

1. Navigate to Codeship and create an account.
2. Create a new project.

Paste the address for your Github repository

3. On the next screen, connect Codeship to your Github repository. The goal is to have Firebase deploy automatically when you push to master branch

4. Skip the setup commands and test pipeline.

5. Click the “save and go to dashboard” button.

6. Click the “project settings” button in upper right corner and choose “deployment.”

The deployment pipeline branch should be master

7. On the next screen we want the branch to be deployed to be “master.”

8. Click the “save pipeline settings” and on the next screen, choose “custom script” as deployment.

Enter in the two Firebase commands to be run on deployment

9. In the input area, enter npm install -g firebase-tools to install the firebase tools and on the next line, firebase deploy. Click the “create deployment” button.

10. In order for Codeship to be able to run the deploy command, you need to obtain a login token from Firebase. To do so, go back to the command line and enter firebase login:ci which will generate a token. Copy the generated token.

11. Return to the Codeship UI and under project settings choose Environment Variables.

Add the environment variable to enable Codeship to deploy to Firebase

12. Create a new variable with FIREBASE_TOKEN as the key and paste in the token as the value. Save the configuration.

13. Click the url of your project in the upper left corner to return to the main screen.

14. Now that you have created an environment variable for your Firebase token, you need to tell your deployment script to use it. So, click on Project Settings once more and choose Deployment.

15. Next, click on the edit button to edit your custom script. You will want to change firebase deploy to firebase deploy — only hosting — token “$FIREBASE_TOKEN”

16. Click the Save Deployment Changes button.

You have successfully set up Codeship to automatically deploy your site. Hooray!

Now for the real fun

In just a few more steps, we can see our first successful Codeship deployment.

1. Navigate to your project on Github and create a pull request from develop into master. Once you are satisfied, confirm the merge.
2. Return to the Codeship window and you should see that a new build has been kicked off. If you click on it, you can see the progress, which should end with the firebase deploy command running.

The result of a successful Codeship build

3. Once you see that the build is successful. Go to the URL for your site on Firebase and you should see your changes.

4. Now, every time you successfully push to master, it will kick off an automatic build to to your Firebase site.

Where to go from here

Use this approach, or find an approach that allows you to have a repeatable system to allow you to spend less time on setup and more time on building prototypes.

Find or create a framework or boilerplate to get up and running quickly. Or, use mine!

Find issues or errors with the process outlined above? Let me know! Find a quicker or easier method? Let me know!

Build awesome things…

Thanks for reading! Please get in touch with me on Twitter if you run into any issues. And, please share this with others that you think would find it useful.