Use TypeScript with Firebase Cloud Functions

Key Takeaways

when we write firebase cloud functions we normally do it in plain JavaScript but this tends to make them hard to debug what if we could actually write them in typescript and also throw on web pack to make them a little more modular in this quick lesson I'm going to show you how to set up your cloud function environment for typescript and web pack and then we'll deploy a few cloud functions to firebase I first want to point out that there's an article on medium that was the main inspiration for this video so I'll add a link to that the description and if you're brand new to cloud functions I recommend checking out any of the blue videos on my channel which are specifically focused on firebase cloud functions so to get started I'm assuming you have an existing project that you're working on and you'll bring up the command line and run firebase and knit functions then select all the default options during that project setup this is going to create a new directory in the root of the project called functions and that's an isolated node environment where we can build our cloud functions so the next step is to CD into that directory and then we'll create a new directory called source and we'll put a file in there called index TS instead of index j s then we can go ahead and remove the index j s file for now web pack will actually generate the index.js file automatically based on our underlying typescript code and that's the file that actually gets deployed the firebase now let's open up the package JSON file then we can install typescript and web pack and we'll specify them only for that development environment so your final node environment should look something like this and we can add a TS config file nothing really special here you can go with the default options and customize it any way you want then the last step is to create the web pack config this will tell web pack how to compile our type script to a single index.js file that can be deployed to firebase check out the link in the description for more detail on this code so now we can actually start building cloud functions we can do this by creating directories inside the source directory based on that concerns that we want to separate in this example I'm separating my email cloud functions from my images cloud functions so now we can start writing cloud functions just like we normally would the only differences we can use typescript and we also use the webpack import syntax if you've developed angular apps before this should look very familiar because it's the exact approach used by the angular CLI in this example I just created a couple of cloud functions that don't do anything named update image and resize image and just for this example we'll go ahead and add one more useless cloud function in that email directory so now we need to register these functions in the main indexed ES file in the source directory this process is very similar to an NG module we just import the functions that we want to deploy and then register that in this file any constant that's exported in this file will be picked up by web pack and that'll be included in our main index CAS file that gets deployed so now that we have our functions defined we can go ahead and deploy them there's only one extra step we just have to call the web pack command which will compile the code into that index.js file if we check it out we can see it's mostly a bunch of web pack code but our actual functions that we wrote are embedded in there and the final step is to deploy a firebase by running firebase deploy only functions and after a few seconds we should get a confirmation on the command line and if we go into the firebase console we should see these three functions there as well overall this gives you a much more easy to maintain and debug environment for writing cloud functions that's it for typescript and firebase cloud functions if this video helped you please like and subscribe and if you want help building your own custom cloud functions consider becoming a pro member at angular firebase com thanks for watching and I'll see you soon you [Applause] [Music]