# Använda "mustasch.js" för att få dynamisak sidor
__
author: krm
created: 2022-04-18
status: alpha
__

# 👁️‍🗨️ Om detta avsnitt

Hur vi kan använda mustasch och att läsa in filer samt de ett svar om 
någon frågar efter index filen. Du behöver läsa in 
webbfiler samt installerat.

- 🦉 [Skapa webb mapp för statiskt innehåll](./web-map-for-static-content.sv.html)
- 🦉 [Ge ett svar på ett http get-anrop](./respons-to-http-call.sv.html)
- 🦉 [Skapa en webbsida](./create-a-web-page.sv.html)

# ❓ Vad är "mustasch.js"?

Ett bibliotek som gör att vi kan substituera in värden i mallar.

# 1. Skapa en funktion som anropas när servern anropas

Vill vill svara på ett anrop till rotten av sökvägen med ett **get** anrop, det som motsvara 
*inde.html*. Denna kod ska vara för anra anrop inklusive midelware som skapar webbmappar.

```js
app.get("/", async function(req, res) {
   // CODE
});

```

# 2. Skapa webbsida som vi kan använda

Skapa en webbsida som beskrivit i tidigare guider.


# 3. Läs index.html filen

I funktionen ovan lägg till följande kod som läser in en fil.

```js
const template = await fs.readFile("./template/index.html", "utf-8");
```

# 4. Installera paketet “mustache” och typerna till “mustache”.

Kör dessakommandon i terminalen.

```sh
npm install mustache
npm install @types/mustache
```

# 5. Importera Mustache i servern

Skriv denna kod högst upp i programmet.

```js
import mustache from "mustache";
```


# 6. Vi vill först skapa data som vi kan använda i vår mall

Lägg till denna kod "callback" funktionen ovan.

```js
const data = {"name": "my site"};
```

# 7. Vi vill nu rendera template med data

Vi ska använda datan ovan till rendering av mallen med hjälp av 
"mustache".

```js
const document = mustache.render(template, data);
```

# 8. Skicka ett svar på frågan

I vår funktion ovan lägg till ett svar till servern.

```js
res.send(document);
```

# 9. I index.html ändra rubriken så data kan vissa istället.

Anpassa koden nedan utifrån vilka egenskaper du lägger i *data* 
objectet och lägg den i index filen. 

```html
   <h1> Welcome to {{name}}! </h1>
```

# 10. ✔️ Starta om servern och testa anropet

Starta om server och gå in på sidan: 

- [http://localhost:3000](http://localhost:3000)