Building an Image Hosting App on Serverless Cloud
Tags: cloud, serverless, tutorial, app
Published: 2022-03-02 16:03:24

O‍riginally posted at [Serverless](https://www.serverless.com/blog/building-an-image-hosting-app-on-serverless-cloud)

In this tutorial, we will show you how to build an image hosting app, powered by Serverless Cloud. It is a simple app that uploads your image, and returns a direct short link that you can share with others, or more practically, reference in your markdown & html files. You will learn how to build an API with Serverless Cloud, and how to utilize Serverless Storage to save, serve and resize your images. You can see the final app [in our examples folder](https://github.com/serverless/cloud/tree/main/examples/images).

## Getting Started

Create a new empty directory called **image-hosting-app**, then open this new empty directory in your favorite IDE. This will be the directory containing your app files. Then, using your IDE built-in terminal, initialize a new Serverless Cloud project by entering the following command:
{% gist https://gist.github.com/richardgrantserverless/5d898304f904a495b3b82a66fb8049f2.js %}
You may be prompted to login if you haven’t already, then the CLI will ask you to select a template to get started with. Choose the **JavaScript API **template.

![Choose the JavaScript API template](https://cdn-images-1.medium.com/max/2536/0*CBKB16hMY2d8HrK4.png)

After you make your selection, your new app will be generated in the directory you just created, and deployed to your own live personal development instance. The CLI will also enter a dev mode that will be watching and deploying any changes you make within seconds, while still allowing you to enter commands during development if you need to.

![Dev mode watches and deploys your changes](https://cdn-images-1.medium.com/max/2688/0*Rda5RA5LpruFs-Xc.png)

Our image hosting API simply consists of two endpoints. One to upload and save the image, and the other to serve this image when requested. The syntax is very similar if not identical to any Express.js api you’ve worked with, so you should find the code very familiar.

## Uploading Images

The `api` interface from the SDK simplifies the uploading process, automatically loading the file into memory for you. Just copy the following code snippet into your **index.js** file, replacing all the boilerplate code that was automatically generated for you.
{% gist https://gist.github.com/richardgrantserverless/09dd26cebc536a21ae50a96996b60d50.js %}
You’re now capturing the uploaded image. Next, you’ll save it into Serverless Storage by calling the **.write** method on the **storage** interface, and passing it a short random identifier as the file name. This random identifier is how you will retrieve this image later, and how you will reference this image in your markdown files. Your upload endpoint should now look like this:
{% gist https://gist.github.com/richardgrantserverless/e67a1d4fed99b572a7e38635b6a02610.js %}
## Serving Images

Now that we can upload and save images, we’ll need to add the endpoint that will return your saved images. It’ll simply grab the image ID from the url, fetch it from Serverless Storage, and directly return it to the user. You can easily achieve this with the **sendFile** helper method that we’ve built for you on the response object. Here’s what that endpoint looks like:
{% gist https://gist.github.com/richardgrantserverless/9909dc4810c962014c13b09af12a3eeb.js %}
This is basically all you need to serve your images, but what would be even better is the ability to resize your images with optional query parameters to save on bandwidth and load time of your markdown & html files. For this we will use [Jimp](https://www.npmjs.com/package/jimp), which is an npm package for resizing images written completely in JavaScript. Install it by running the **install jimp **command in the cloud shell:

![You can install npm packages directly from the Cloud Shell](https://cdn-images-1.medium.com/max/2000/0*O6uZOMDwqn1CsKV1.gif)

The **Jimp** package is quite heavy, so installing and deploying to your personal development instance may take a few seconds. Once that is done, we’re going to modify our root **GET** endpoint to accept optional **w** & **h** query parameters representing the desired width and height of the image. If they’re specified, we’ll resize the image if it hasn’t already been resized before, then return the resized image, otherwise return the original image as we did before.
{% gist https://gist.github.com/richardgrantserverless/4935fd55e3cf11184b34aa303e1b1828.js %}
That’s pretty much it! Your entire API should be around 50 lines of code, and it should look something like this:
{% gist https://gist.github.com/richardgrantserverless/91586e6160d181a9d28b9b4f3f07686e.js %}
Remember, all the changes you just made were automatically deployed to your personal development instance as the CLI was watching this whole time. Let’s deploy everything we’ve built to the **production** stage. Just run the **deploy production** command in the cloud shell:

![Deploy your changes to the production stage](https://cdn-images-1.medium.com/max/2000/0*4cqTpfwm8A0bgDz2.gif)

This will return a new app url that is completely separate from your personal development instance. Unless you’re testing, we recommend that you use that **production** stage url in your frontend so that any future changes you make to your api won’t break your app. We will leave the frontend piece as an exercise for you since it’s no different from any other frontend app you’ve worked with. For reference, you can [take a look at the docs](https://www.serverless.com/cloud/docs/apps/static-assets), and how that might look like [in the examples directory](https://github.com/serverless/cloud/tree/main/examples/images).

## Summary

We’ve seen how easy it is to get started with Serverless Cloud. We’ve witnessed the power of the CLI during dev mode, how your changes are instantly deployed and how to run commands in the cloud shell. Finally, we’ve learned how to save, retrieve and resize files using Serverless Storage. There’s so much more you can do with Serverless Cloud that we couldn’t cover in this tutorial, but you should find it all in [our docs](https://serverless.com/cloud/docs). If you have any questions, feel free to [reach out to me on Twitter](https://twitter.com/eahefnawy).

[Sign up for Serverless Cloud](https://cloud.serverless.com/?view=register&utm_source=serverless-blog&utm_medium=blog&utm_campaign=image-hosting-app)