Zero Cost Web App Part 1
Tags: zerocostwebapp, ember, firebase
Published: 2019-06-19 11:20:16

> This app is going to be revolutionary…
> This is going to be the next Facebook…
> It’s like Instapaper meets Kickstarter and a little bit like Quora but without the questions…

As a developer, if you had a dollar for every time you heard statements like these… well, then you wouldn’t need to actually create anything because you would already be minted.

We are in an age where everyone, *including you*, believes they have the next billion dollar idea. As much as we would love to develop anything and everything, the sheer amount of resources needed to build a web application is immense. You would need a server, database, hosting provider, SSL certificates, etc. With your limited income, how could you even begin to create the “*next big thing*” without burning a hole in your pocket?

![Empty Pockets](https://cdn-images-1.medium.com/max/2000/1*ZOiQh3jJNkG3Qt8xhLCVAw.jpeg)
<center><i>Empty Pockets</i></center>

This is part 1 of a 3 part series that delves into a possible solution to ensure you don’t spend a dime building your app at least until you have a plethora of users.

There are a number of ways to achieve the above statement but we have chosen to use [Ember](https://emberjs.com/) as our frontend framework and [Firebase](https://firebase.google.com) as our backend solution. We have found that this proposed solution is an extremely simple yet effective way of developing your web application.
> Ember is a mature, opinionated, full-featured, Javascript framework that makes it easy to build large scale applications. It considers itself “A framework for ambitious web developers.”

> Firebase is a comprehensive development platform that gives you the tools to develop high-quality apps, grow your user base, and earn more money. It covers the essentials so you can monetize your business and focus on your users.

Let’s start by diving into three concepts that will be the basis for transforming your idea into an *awesome* web app.

## Free Tiers

[Firebase](https://firebase.google.com) started out as just a real-time database but has grown to be much more now.

You are now provided with two different types of databases, authentication, file storage, hosting, a global CDN, and SSL right out the box all with a very generous free tier.

With [Firebase](https://firebase.google.com) Hosting we leverage Google’s globally distributed edge points of presence to accelerate content delivery. The sheer scale of Google data centres allows your app to scale efficiently under the stress of a large number of users.

![Firebase Key Capabilities](https://cdn-images-1.medium.com/max/2000/1*2ZTwzABzw6ZWb-u0bcVH0w.png)
<center><i>Firebase Key Capabilities</i></center>

## SSR (Server-Side Rendering)

We will ensure that even though we are building a single page application each page can be rendered server-side as this will be crucial for the next step.

We will use [Ember Fastboot](https://ember-fastboot.com/) and [Firebase Functions](https://firebase.google.com/docs/functions), a wrapper around serverless functions, to fully render the initial page and rehydrate as soon as the Javascript file is parsed.

With SSR we get multiple benefits without losing the speed and dynamicity of a SPA (Single Page Application).

* SEO

* Graceful Degradation

* First Meaningful Paint

![Ember Fastboot](https://cdn-images-1.medium.com/max/2570/1*H6mLWQKlvs8P9eA_3LcTWg.png)
<center><i>Ember Fastboot</i></center>

## Browser Caching

You want to minimize round trips to the server for *speed*, *efficiency*, but most of all, *cost*!

[Firebase](https://firebase.google.com) has a limit for its free tier both on the data transferred and the number of functions called per month. We can cut down our chances of hitting these limits by ensuring we call the server only once unless a resource has been modified.

Browser caching along with SSR speeds up your app massively by cutting down the time to *`First Meaningful Paint`.*

![Google Developer Page Insights](https://cdn-images-1.medium.com/max/2314/1*TWufGZRJbDxDKHAnPUZ5dA.png)
<center><i>Google Developer Page Insights</i></center>

This guide will help you easily accomplish the stated concepts above.

*Note: You will be retrieving preconfigured files from [Github Gists](https://gist.github.com/devotox/94e56ee31adff980d148506f2368a0d1) rather than modify these files yourself.*

Soooo let’s get developing!

## Prerequisites

* Install [NodeJS and NPM](https://nodejs.org/en/download/)

* Go to the [Firebase Console](https://console.firebase.google.com)

* Create a firebase project called zero-cost-web-app

*Note: Project ID will be used as the subdomain for your app later*

![Create a Firebase Project](https://cdn-images-1.medium.com/max/2000/1*hNLgH9cY5FaT7q5ZppWNwA.png)
<center><i>Create A Firebase Project</i></center>

## Tools

Install global packages

```console
# npm install -g ember-cli
# npm install -g firebase-tools
```

## Web App

Setup a new Ember app

```console
# ember new zero-cost-web-app
# cd zero-cost-web-app
# ember install ember-cli-fastboot
# ember install ember-fetch
```

Add a set of commands needed to build & deploy the application

* Builds the Ember app

* Runs a local server

* Deploys to Firebase Hosting

```console
# curl https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/7de88b9b4dbb448e3c3103d993af594196800a1f/package.json -o package.json
```

Add Fastboot host whitelist to environment config

```console
# curl https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/23de6376bb2f6bb5d839d93796c105f52dee4ab0/config%2520%257C%2520environment.js -o config/environment.js
```

Add option to include the welcome page in production

```console
# curl https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/63e94551c6cc6dda827b4dd1cd83d37b5d9ffd2b/ember-cli-build.js -o ember-cli-build.js
```

Ensure the right package versions are installed

```console
# npm install
```

## Firebase

Setup Firebase project

```console
# firebase login
# firebase init
```

Follow prompts to set up a new project

* Select each option by using the space bar, navigating to the next option with the down arrow. Then press enter after all options selected

![Firebase Prompts](https://cdn-images-1.medium.com/max/2000/1*7c5eNIXvz0NMNgK6XzMOdA.png)
<center><i>Firebase Prompts</i></center>

* When you get to the next set of questions. Press enter to choose each default option

Add Firebase config for SSR and caching

```console
# curl [https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/d3a7fd29af85fcc25c3fedff1d2729058d4154f9/firebase.json](https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/d3a7fd29af85fcc25c3fedff1d2729058d4154f9/firebase.json) -o firebase.json
```

Remove index file that may have been created on firebase init

* We don’t need this as the Ember app will provide us with its own index file

```console
# rm -rf public/index.html
```
## Firebase Functions

Setup Firebase Functions

```console
# cd functions/
# npm install fastboot
# npm install fetch
# npm install ember-fetch
```

Update index file to export SSR cloud function

```console
# curl https://gist.githubusercontent.com/devotox/94e56ee31adff980d148506f2368a0d1/raw/e446fd671489a5bafb86373c3ccef7da8d4d3b20/functions%2520%257C%2520index.js -o index.js
```

Return to the root directory

* Since we are in the functions subdirectory. We need to go back to the root of the project to run the next commands

```console
# cd ..
```

## Start Application

```console
# npm run build:firebase
# firebase serve
```

Launch app in your default browser

```console
# open [http://localhost:5000](http://localhost:5000)
```

## Deploy

* Compile and build the application (production ready)

* Build cloud functions

* Zip it all up and upload the artefact to Firebase

```console
# npm run deploy:firebase
```

Go to URL provided in your terminal

* The Project ID you noted down earlier will be used as the subdomain.

* URL should look something like: *`https://<project-id>.firebaseapp.com`*

![Get Hosting URL](https://cdn-images-1.medium.com/max/2000/1*qdotVrYslAmY3S3aSRWBMg.png)
<center><i>Get Hosting URL</i></center>

## Expectations

* Open the developer tools and click on the network tab

* Find the index page URL: *`https://<project-id>.firebaseapp.com`*

* You should notice that the full HTML is rendered for the page without the need for javascript to be executed.

* You should also notice that after the first hit most of the assets should now be retrieved from 
*`memory cache`*

![Memory Cache](https://cdn-images-1.medium.com/max/2000/1*xDy08QZrpgOpnDi8wHY-hA.png)
<center><i>Memory Cache</i></center>

## Wrap Up

With the massive reach of Google servers as your content delivery network and extensive use of caching, you now have the ability to build *fast*, *efficient*, *scalable*, and *ambitious* web applications without going bankrupt before the money starts rollin’ in.

Now go forth and conquer the web app landscape!

*In part 2 of this series, we will delve deeper into how to turbocharge your app by converting it into a PWA (Progressive Web App) and adding service workers allowing you to run your app offline!*

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/2-L3Kgc6Y7E" frameborder="0" allowfullscreen></iframe></center>
<center><i>Vooza</i></center>

## What We Built

* [Finished Product](https://zero-cost-web-app.web.app/)

* [Github Repo](https://github.com/devotox/zero-cost-web-app)

* [Github Gists](https://gist.github.com/devotox/94e56ee31adff980d148506f2368a0d1)

## Further Reading

* [Firebase](https://firebase.google.com): Used as our hosting & SSL provider

* [Firebase Functions](https://firebase.google.com/docs/functions): Allows us to have SSR without a server

* [Ember](https://emberjs.com/): Javascript framework used to create our SPA

* [Ember CLI](https://ember-cli.com/): Command line utility that builds the application

* [Ember Fastboot](https://ember-fastboot.com/): Adds server-side rendering to the application