First make sure that you have
nvm installed. We’ll need a different version of node for
create-react-app then we will for firebase functions.
- Select functions, hosting
- Select your proejct if you’ve already created it
- Yes to ESLint
- No to install dependancies
- Yes to single page app
Now we will create our functions to generate the image. Firebase only supports node 6, so we’ll need to set that up. If you don’t already have node 6 installed, make sure you do that with
nvm install 6.
Since that’s installing another
node_modules directory inside of the
functions folder, be sure to add that to
.gitignore in the project root:
Write and test our function
We are going to combine an avatar.jpg like this:
with a mask image like this:
to make an image like this:
So right click and save the two images
results_mask.png into your
functions directory. Then create the
We can test this function using
node avatarMask.js --test, this will run the method directly so we can test out the results and print the output filename. To open that file directly, you can do
open $(node avatarMask.js --test)
This uses Jimp to:
- Load in the mask using
- Load in the avatar again using
- Load in a font file that we will use for running
- Clone the original image
- Resize, blur and darken the avatar
- Copy the original avatar onto the center point at 238, 275
- Apply the mask on top
- Write the user’s name into the attached box
- Create a tempfile to write the final image into
- Resolve the promise at the end with the name of the tempfile.
Write a Firebase function that returns the image
Lets first create a simple express function just to make sure that we can get the firebase functions to run inside of the emulator and attach to a https handler.
To run the function locally. If it starts up correctly, you should see an
localhost url that you can use, in my case
Once that works, lets actually wire up our function to use our method (again this is
Again test with
node run serve. When you go the url, you should now see the image in the browser!
Check to see that it works on firebase itself
firebase deploy will push the code to the firebase servers. If you don’t get any errors, you can see where the function is deployed either in the output logs, or by going to the Firebase Console and click on the
If you go to that url, https://us-central1-honey-b6642.cloudfunctions.net/createImage/ in the image above, (add a / at the end if you have a problem) you should see the image generated and loaded from the firebase function.
Passing in the email and name and loading from gravatar
Lets change the code a bit to pass in the email and name, load the avatar from gravatar, and customize the image:
Then start up your local firebase function with
npm run serve and test it out with an email and name, for example: http://localhost:5000/honey-b6642/us-central1/createImageemail@example.com&name=Will+S
Finally, deploy it all to firebase!
$ firebase deploy
The final code can be found https://github.com/wschenk/image_building_in_firebase