{translations.description}
{products.map((product, index) =>
{product.name} -
{product.level}
)}
* Navigate into the new project directory using the `cd` command. For example, if you named your project *my new project*:
```shell theme={null}
cd my-new-project
```
## Add a serverless function to the project
Once your project has been created, open it in your preferred editor, such as [VS Code](/developer-tooling/local-development/vs-code-extension). HubSpot will have automatically created a project directory along with an empty `src` directory and a `hsproject.json` configuration file.
In the `src` directory, create an `app` directory, then add the following directories and files within it:
```text theme={null}
project-folder/
└── hsproject.json
└── src/
└── app/
├── app.json
└── app.functions/
├── function.js
├── package.json
└── serverless.json
```
* `app/app.json`: the app configuration file.
* `app/app.functions`: the serverless function directory. You can use any name you'd like, as long as it ends in `.functions`.
* `app/app.functions/function.js`: the JavaScript code that will be executed when the function is invoked.
* `app/app.functions/serverless.json`: the serverless function configuration file.
* `app/app.functions/package.json`: includes necessary dependencies.
Copy the example code below into your respective local `app.json`, `function.js`, `serverless.json`, and `package.json` files.
## Invoke the function from a website page
Now that you've created the serverless function and confirmed that it returns data, implement it into a page to see the data returned in a more realistic context. For this tutorial, you'll create a page template containing some custom JavaScript and HTML to execute the function and display the response data.
First, create a new page template:
* In your local environment, create a new directory to contain your page template. For the purposes of this tutorial, create this directory outside of this tutorial's project directory.
* In the terminal, navigate into that directory using the `cd` command.
```shell theme={null}
cd Documents/Dev/serverless-page
```
* Run `hs create template "serverless-template"` to create a new template named `serverless-template`.
```shell theme={null}
hs create template "serverless-template"
```
* Select the **page** template type.
* Open the newly created page template file in your editor, then replace the boilerplate code with the code below. Be sure to replace `Click the button to fetch and display a quote.
* Click **Select template**.
* In the page editor, click **Preview** in the upper right.
* Click **Open in a new tab**.
In the new tab, you should now be able to click the button to fetch and display quotes.
## Next steps
Now that you've created and implemented a serverless function that interacts with a third-party API, there are a few ways to continue building up your serverless function usage, such as:
* [Including authentication in a request](/cms/reference/serverless-functions/serverless-functions-in-projects#authentication) to make calls to HubSpot APIs or other third-party authenticated APIs.
* Implement the button and JavaScript code into a module rather than hardcode it into the page template. This would give you a more portable option, enabling the function to be invoked from any page that the module is added to. To do so, you would create a module, then add the HTML into the module's `module.html` file, and the JavaScript into the `module.js` file.
Click the button to fetch and display a quote.