# Serverless Jamstack, Part 3: Connect Serverless Functions to Website

Functions are blocks of code that run on demand without the need to manage any infrastructure. Develop on your local machine, test your code from the command line (using `doctl`), then deploy to a production namespace or App Platform — no servers required.

Now that you have deployed the app’s functions, you can connect them to the static website and deploy the entire application to App Platform.

In this part of the tutorial series, you:

1. Retrieve the URLs of each function and test them in the static website’s JavaScript code.
2. Test the site’s functionality using `live-server`.
3. Redeploy the entire application to App Platform.

## Prerequisites

To complete this part of the tutorial, you need:

- To install [Live Server](https://www.npmjs.com/package/live-server), or your preferred development server, to test and serve the website on your local machine.

## Step 1: Connect Functions to Static Website

Each function you deploy to DigitalOcean receives a public URL that you can use to invoke the function. Similar to traditional API endpoints, you can append query parameters to the URL that your function can access and use as arguments.

For example, in the previous tutorial, you deployed a function named `cloud/postEmail` that adds email addresses to a database. This function takes the argument `args.email`. To pass that argument via the function’s URL, you would append a query parameter called `email` to the end of the function’s URL with an email address as its value. The resulting URL looks similar to this:

```shell
https://APIHOST.doserverless.co/api/v1/web/fn-EXAMPLE-ID/cloud/post-email?email=youremail@example.com
```

In this tutorial, the static website takes user input from the email subscription field, concatenates the user’s email address to the `cloud/postEmail` function’s URL, and then invokes the function by sending an HTTP request to it.

The vanilla JavaScript provided in the HTML website contains all of the logic necessary to handle this process. To test the project, you need to provide the deployed function’s URL to the app’s code.

To do this, retrieve the URL for the `cloud/postEmail` function:

```shell
doctl serverless functions get cloud/postEmail --url
```

Once you retrieve the function’s URL, navigate to the root folder in the `serverless-jamstack` repo on your local machine and open the `script.js` file.

On line 76 of the file, replace the `/api/cloud/postEmail` string value of the `emailUrl` variable with the URL of your `cloud/postEmail` function.

The resulting code looks similar to this:

`script.js`

```js
...
  let emailUrl = "https://APIHOST.doserverless.co/api/v1/web/fn-EXAMPLE-ID/cloud/postEmail" + "?email=" + email;
  await axios.post(emailUrl);
...
```

After updating the `emailUrl` variable, retrieve the `cloud/getCoffee` function’s URL:

```shell
doctl serverless functions get cloud/getCoffee --url
```

Then replace the `/api/cloud/getCoffee` argument of the Axios request on line 4 with the URL of the `cloud/getCoffee` function. The resulting code looks similar to this:

`script.js`

```js
const getInventory = async () => {
    let results = await axios.get('https://APIHOST.doserverless.co/api/v1/web/fn-EXAMPLE-ID/api/getCoffee');
results.data.forEach(item => {
    let pic = item.pic;
...
```

Once you’ve updated the `results` variable, save the changes to the file but don’t close it.

## Step 2: Test Site Functionality

After you update the JavaScript file, you can test the site’s functionality using Live Server. From the `public` directory of the local repo, start Live Server:

```
live-server
```

`live-server` automatically detects the `index.html` file and serves it in your local browser. Upon loading, the site automatically populates with the sample coffee data from the database using the `cloud/getCoffee` function.

Enter a sample email address into the email newsletter subscription box and then click **Subscribe**. Upon submission, the `cloud/postEmail` function adds the email address to the `email-list` collection in the database. You can verify this by opening MongoDB Compass, [connecting to the database](https://docs.digitalocean.com/products/functions/getting-started/serverless-jamstack/deploy-mongodb/index.html.md#step-3-connect-to-the-database), and reviewing the contents of the collection.

## Step 3: Save Changes to the Repo

Once you have verified that the entire app is working, revert the URLs back to their original endpoints in the `script.js` file: `/api/cloud/getCoffee` and `/api/cloud/postEmail`. App Platform makes these endpoints available to your app at its own URL upon deployment.

To deploy the site, stage and commit all of the changes made to the repo using `git`:

```shell
git add -A; git commit -m "completed tutorial"
```

Once you’ve committed the changes, push them to the remote repo’s `main` branch:

```
git push
```

After pushing the changes to the repo, you are ready to deploy the application.

## Step 4: Deploy Application to App Platform

In this step, you deploy the entire application to App Platform from GitHub. [DigitalOcean’s App Platform](https://docs.digitalocean.com/products/app-platform/index.html.md) is a Platform-as-a-Service (PaaS) offering that gives developers the ability to publish entire applications directly to DigitalOcean’s servers.

To start deploying the static website from the [DigitalOcean Control Panel](https://cloud.digitalocean.com), click **Create** in the top left, and then click **Apps**.

On the **Choose Source** screen, select GitHub. In the **Repository** menu, select the `serverless-jamstack` repo that you forked into your GitHub account. If this is your first time using App Platform with GitHub, GitHub prompts you to provide DigitalOcean read access to the repository.

In the **Source Directory** field, leave the value as the repo’s root (`/`). This tells App Platform which directory contains the website.

Leave the **Branch** selection as **main** and make sure **Autodeploy code changes** is checked, then click **Next**.

App Platform auto-detects the type of application inside the GitHub repo and displays its components on the **Resources** page. The page displays the static HTML website and the two functions you created.

App Platform needs to know where to listen for HTTP requests for the functions. To set up an HTTP route to the functions, click the edit button beside the function component. Under **HTTP Request Routes**, enter `/api` into the **Routes** field.

Once you’ve added the HTTP route to the functions, click **Save** then **Back** to return to the **Resources** page. Review your resources then click **Next** to go the **Environment** page.

The **Environment** page lets you configure environment variables for your application. App Platform detects that the Jamstack app’s functions require two environment variables. Click **Edit** beside the functions component to configure them.

The key field contains the `DATABASE_URL` environment variable key you set up in the `project.yml` file. Enter the database’s connection string into the **Values** field, then click **Save**.

Once you have configured the environment variables, click **Next** to continue.

On the **Info** screen, you can edit the name of the app. Set the name to `serverless-jamstack` and then click **Next**.

On the **Review** screen, you can review your app, its components, and your selected plan before deploying it. Review the list of components and then click **Create Resources** to deploy the website to App Platform.

Once the site has been deployed, App Platform adds the app’s URL to the app’s **Overview** page. Click the URL to check that the deployment was successful.

The site opens and populates with the data from the MongoDB database. When you enter an email address into the email newsletter field and click **Submit**, the email address is added to the database’s `email-list` collection.

## Summary

In this part of the tutorial series, you:

- Added each function’s URL to the static website component of the app.
- Tested the site’s functionality using `live-server`.
- Deployed the app to App Platform with its new functionality.

## What’s Next?

Now that you’ve set up a functional Jamstack website using serverless functions, you can [learn more about DigitalOcean Functions](https://docs.digitalocean.com/products/functions/index.html.md).

You can also deploy these sample functions to learn more about how functions work.

[Sample Functions](https://docs.digitalocean.com/products/functions/getting-started/sample-functions/index.html.md): Use our example repositories with sample projects and functions to get started quickly with DigitalOcean Functions.