> ## Documentation Index > Fetch the complete documentation index at: https://docs.enterspeed.com/llms.txt > Use this file to discover all available pages before exploring further. # 4. Fetching data # Fetching data in the frontend Now it's time to get the data into the frontend. If you wish you can copy the demo project below, or simply follow along. ## Setting up the demo project This project uses Netlify functions to securely fetch data from Enterspeed. If you don't wish to use Netlify functions simply move the `enterspeed.js` to another folder and remove the `netlify-cli` dependency. Go to our GitHub-repo ([https://github.com/enterspeedhq/enterspeed-demos/tree/master/vanilla-js](https://github.com/enterspeedhq/enterspeed-demos/tree/master/vanilla-js)) and clone the project. cd into the **vanilla-js** folder and run: ```bash theme={null} npm install netlify dev ``` Create a file called **.env.local** and insert your environment API key generated in the Enterspeed-app under Environments like this: ```javascript title=".env.local" theme={null} ENTERSPEED_PRODUCTION_ENVIRONMENT_API_KEY = [YOUR_ENTERSPEED_API_KEY_HERE]; ``` For a production environment, your API key should be injected on build time or via a serverless function. ## Ways of fetching data Fetching data from Enterspeed can be done in three different ways: * By using **Handle** * By using **URL** * By using **ID** On our demo site, we've used **handle** and **URL**. **Handle** and **ID** are good ways of fetching data for "non-site-specific data", e.g. the navigation. In this demo, we're using the **handle** method to fetch the blog list. We're using the **URL** method to fetch all of the individual blog posts. When the data is fetched you can choose to either generate it client-side, server-side, or at build time. In this demo we're generating it all client-side. Data can be fetched using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or a library like [Axios](https://www.npmjs.com/package/axios). In our demo, we have made a component that fetches the data. You'll find it in the project under "netlify/functions/enterspeed.js". The components look like this: ```javascript title="enterspeed.js" theme={null} require("dotenv").config(); const fetch = (...args) => import("node-fetch").then(({ default: fetch }) => fetch(...args)); const API_ENDPOINT = "https://delivery.enterspeed.com/v2"; exports.handler = async (event, context) => { try { const response = await fetch(`${API_ENDPOINT}?${event.rawQuery}`, { headers: { "Content-Type": "application/json", "X-Api-key": process.env.ENTERSPEED_PRODUCTION_ENVIRONMENT_API_KEY, }, }); const data = await response.json(); return { statusCode: 200, body: JSON.stringify({ data }) }; } catch (error) { console.log(error); return { statusCode: 500, body: JSON.stringify({ error: "Failed fetching data" }), }; } }; ``` ## Creating the website Demo website example ### Setting up the HTML We start by setting up all the HTML that we need. We're including two libraries: * [Tailwind CSS](https://tailwindcss.com/) to style the page * [Navigo](https://github.com/krasimir/navigo) to have a simple JavaScript router ```html title="The HTML" theme={null} Vanilla JS demo
Enterspeed ♥ Vanilla JS
Demo by Enterspeed
``` ### Initializing the router Now that we got the structure in place, let's look at the JavaScript needed. First, let's Initialize our router, which takes one mandatory argument - the root path of our site. ```javascript title="Initializing router" theme={null} const router = new Navigo("/"); ``` ### Creating the renderHomepage function Next, let's create a function that renders our homepage. ```javascript title="renderHomePage function" theme={null} const renderHomePage = () => { fetch("/.netlify/functions/enterspeed?handle=blogList") .then((response) => response.json()) .then((data) => { const posts = data.data.views.blogList.content; posts.forEach((post) => { const singlePost = ` ${post.title}

${post.author.name} — ${post.date}

${post.title}

${post.excerpt}

`; document.getElementById("posts").innerHTML += singlePost; }); }) .then(() => { router.updatePageLinks(); router .on("/post/:postLink", ({ data }) => { renderPostPage(data.postLink); }) .resolve(); }); }; ``` The first thing we do in the function is to fetch content via our `enterspeed.js` function. We include the query `?handle=blogList` since we want to map out the blog posts in a nice grid overview. The content is stored in `data.data.views.blogList.content`, which we assign to a const called `posts`. ```javascript title="renderHomePage function -- fetch" theme={null} fetch("/.netlify/functions/enterspeed?handle=blogList") .then((response) => response.json()) .then((data) => { const posts = data.data.views.blogList.content; ``` Next, we iterate over each of these posts. We create the HTML for the "card" and map the data appropriately. Then we take each card and add it to the `posts` HTML element: ```html title="The posts HTML element" theme={null}
``` ```javascript title="renderHomePage function -- mapping posts" theme={null} posts.forEach((post) => { const singlePost = ` ${post.title}

${post.author.name} — ${post.date}

${post.title}

${post.excerpt}

`; document.getElementById("posts").innerHTML += singlePost; }); ``` Notice that we have inserted `data-navigo` in the `a` tag. This is so Navigo attaches a click handler which fires the router's navigate method. Finally, to get Navigo to recognize these links we just created, we call the `updatePageLinks` method. When any of the link which has the `data-navigo` attribute gets clicked, it should call the `renderPostPage` function, which we will create next, and give it the post link as an argument. ```javascript title="renderHomePage function -- updatePageLinks" theme={null} .then(() => { router.updatePageLinks(); router .on("/post/:postLink", ({ data }) => { renderPostPage(data.postLink); }) .resolve(); }); ``` Now, before moving on to the `renderPostPage` function, let's remember to initialize our `renderHomepage` function by calling it. ```javascript title="Initializing renderHomePage()" theme={null} renderHomePage(); ``` ### Creating the renderPostPage function ```javascript title="renderPostPage function" theme={null} const renderPostPage = (postLink) => { fetch(`/.netlify/functions/enterspeed?url=/${postLink}`) .then((response) => response.json()) .then((data) => { const post = data.data.route.content; const postPage = `

${post.title}

${post.author.name} - ${post.date}
👈 Go back
`; document.getElementById("main").innerHTML = postPage; document.getElementById("article").innerHTML = post.content; }); }; ``` Just like before, we fetch the content via our `enterspeed.js` function. We use `url=` instead of `handle=`, since we set the route to `url` in our blog posts schema. The content here is stored in `data.data.route.content`, which we assign to a const called post. We then create the HTML for the "post" and map the data appropriately. Lastly, we take our `postPage` and add it to our `main` HTML element: ```html title="The main HTML element" theme={null}
``` ...as well as the article itself and add to the article HTML element: ```html title="The article HTML element" theme={null}
``` Now when navigating to one of the blog posts, we will have a nice, simple article page. Demo website blog post example The finished results should look something like this: ```html title="The complete index.html" theme={null} Vanilla JS demo
Enterspeed ♥ Vanilla JS
Demo by Enterspeed
```