Firebase Cloud Functions with Typescript and Webpack

Recently Firebase launched Cloud Functions–a way to run your code on their servers. It’s a game changer! Now you can run code that you trust to manage many parts of your Firebase Project.

The downside of Cloud Functions is that it only supports NodeJs, forcing you to use Javascript. Fortunately, we can mitigate some of the issues that Javascript brings with Typescript.

In this post we’ll build Firebase Cloud Functions using Typescript and Webpack.

Complete the “Get Started” tutorial

Before we start, complete the official “Get Started” tutorial and make sure it’s working correctly. We’ll turn that sample into a Typescript project.

Get Started: Write and Deploy Your First Functions | Firebase

File structure

The final structure for our files and folders will look like this:

Some key points:

• functions This directory is the same one you created during the “Getting Started” tutorial.
• functions/index.js The single output, Javascript file. This file is 100% generated and should never be touched (and ignored in your repository). When you deploy your Cloud Functions, Firebase will use this file.
• functions/src/index.ts This is our entry file for the project. This is where all the Cloud Functions will be declared.
• functions/src/*/index.ts Sub-directories will help us organize our code into features.
• tsconfig.json and webpack.config.js We’ll create those files.

Install dependencies

If you followed the “Get Started” tutorial, you should already have a package.json and a working npm installation. We just need to install Webpack and some dependencies.

./functions $ npm install -g webpack
./functions $ npm install --save-dev ts-loader webpack-node-externals

tsconfig.json

There’s nothing special in our tsconfig.json except for the “target” option. Cloud Functions seems to require ES6.

webpack.config.js

Webpack serves an important job. It bundles all the scattered Typescript’s modules/files and bundle them into a single index.js Javascript file. This is important because the Cloud Functions will only use that single file for deployment.

Update August 09, 2017: As pointed by Michael Bleigh in the comments, we don’t have to bundle everything into a single index.js file. Typescript will work without Webpack.

Since most of our Webpack config file (webpack.config.js) remains unchanged from the “default” one, I marked the important points below:

The source code

Our entry point is the src/index.ts file. It declares all the Cloud Functions.

Each sub-directory in the src path will implement a different feature. They are just plain Typescript. They mostly differ from the “Getting Started” by their use of the async/await syntax and modules.

Building

To build the project, just run Webpack ^^

./functions $ webpack
./functions $ firebase deploy --only functions

Conclusions

Typescript makes our code safer, a good trait to have in sensitive operations on the server-side. Fortunately, as shown, we can easily use Typescript with Firebase Cloud Functions.

Webpack makes it easier for us to organize our code base into modules. In this example we separated our code by features, a common package organization from the Java world.