# How to build functions
## Before you begin
To get started and excel as an edge developer, it's important to:
- Be familiar with JavaScript.
- Know the concept of [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode).
- Have an [account on Azion Console](/en/documentation/products/accounts/creating-account/).
Azion Functions works on the [Azion Runtime](/en/documentation/runtime/overview/), which is a set of tools that enable the development.
It's paramount to take a look at the list of available APIs, methods, and types. [Learn more about Azion Runtime](/en/documentation/runtime/overview/).
---
## Code Editor
The [Functions Code Editor](/en/documentation/products/applications/functions/runtime-api/code-editor/) provides a development experience similar to what developers are accustomed to. The [Functions ChatGPT Integration](/en/documentation/products/applications/functions/runtime-api/ai-integration/) helps you to write, refactor, and review code.
---
## Functions and Applications
To develop your first function for Applications:
1. Access [Azion Console](/en/documentation/products/guides/how-to-access-azion-console/) > **Functions**.
2. Click **+ Function**.
3. Choose a name for your function.
4. Write your function. But wait, before that, keep reading:
**Writing an function**
First, the functions for applications work based on a [fetch event](/en/documentation/products/applications/functions/runtime-apis/javascript/fetch/). It's initialized with an `addEventListener` function, passing `fetch` as the event type, and an event. For example:
```javascript
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
```
Second, it's necessary to define the behavior of the `handleRequest` function. This function has the `event.request` as the signature. This data can be used later on to implement the necessary logic, such as:
- Manipulate cookies.
- Implement a behavior based on the request method (POST, GET, PUT, DELETE).
- Access request metadata.
The `handleRequest` function can be defined as:
```javascript
const html = `
Hello World
This markup was generated by Azion - Functions.
`
async function handleRequest(request) {
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
})
}
```
In this example, the response will be the HTML content, declared previously by the const `html`. The headers can be manipulated as well, and in the example, the content type is set.
5. Click the **Save** button.
---
## Testing and Debugging
After writing your functions, you can preview the response and inspect the code. The preview simulates a request, and this simulation can be altered to meet the developer's needs.
Learn more about [Azion Preview Deployment](/en/documentation/products/applications/functions/runtime-api/preview-deployment/).
It's possible to debug the functions through:
- [Data Stream](/en/documentation/products/guides/debugging-functions-data-stream/)
- [GraphQL API](/en/documentation/products/guides/debugging-functions-graphql/)
---
## Function instantiation
Once you've saved your function, it's necessary to instantiate it in an application.
[Learn more on how to instantiate a function on Applications](/en/documentation/products/build/applications/functions-instances/).