{
    "path": "/home/krm/dev/mimer-academia/server/web/Tutorial/using-mustasch-for-pages.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "Använda \"mustasch.js\" för att få dynamisak sidor"
    ],
    "description": [
        "__author: krm\ncreated: 2022-04-18\nstatus: alpha\n__"
    ],
    "statments": [],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "title": [
                "# 👁️‍🗨️ Om detta avsnitt"
            ],
            "description": [
                "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 \nwebbfiler samt installerat."
            ],
            "statments": [
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./web-map-for-static-content.sv.html"
                            },
                            "Skapa webb mapp för statiskt innehåll"
                        ]
                    ]
                },
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./respons-to-http-call.sv.html"
                            },
                            "Ge ett svar på ett http get-anrop"
                        ]
                    ]
                },
                {
                    "description": [
                        "🦉 ",
                        [
                            {
                                "link": "./create-a-web-page.sv.html"
                            },
                            "Skapa en webbsida"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "title": [
                "❓ Vad är \"mustasch.js\"?"
            ],
            "description": [
                "Ett bibliotek som gör att vi kan substituera in värden i mallar."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 1,
            "title": [
                "Skapa en funktion som anropas när servern anropas"
            ],
            "description": [
                "Vill vill svara på ett anrop till rotten av sökvägen med ett ",
                [
                    {
                        "form": "strong"
                    },
                    "get"
                ],
                " anrop, det som motsvara ",
                [
                    {
                        "form": "important"
                    },
                    "inde.html"
                ],
                ". Denna kod ska vara för anra anrop inklusive midelware som skapar webbmappar."
            ],
            "lang": "js",
            "code": "app.get(\"/\", async function(req, res) {\n// CODE\n});",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Skapa webbsida som vi kan använda"
            ],
            "description": [
                "Skapa en webbsida som beskrivit i tidigare guider."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Läs index.html filen"
            ],
            "description": [
                "I funktionen ovan lägg till följande kod som läser in en fil."
            ],
            "lang": "js",
            "code": "const template = await fs.readFile(\"./template/index.html\", \"utf-8\");",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Installera paketet “mustache” och typerna till “mustache”."
            ],
            "description": [
                "Kör dessakommandon i terminalen."
            ],
            "lang": "sh",
            "code": "npm install mustache\nnpm install @types/mustache",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Importera Mustache i servern"
            ],
            "description": [
                "Skriv denna kod högst upp i programmet."
            ],
            "lang": "js",
            "code": "import mustache from \"mustache\";",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Vi vill först skapa data som vi kan använda i vår mall"
            ],
            "description": [
                "Lägg till denna kod \"callback\" funktionen ovan."
            ],
            "lang": "js",
            "code": "const data = {\"name\": \"my site\"};",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Vi vill nu rendera template med data"
            ],
            "description": [
                "Vi ska använda datan ovan till rendering av mallen med hjälp av \"mustache\"."
            ],
            "lang": "js",
            "code": "const document = mustache.render(template, data);",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Skicka ett svar på frågan"
            ],
            "description": [
                "I vår funktion ovan lägg till ett svar till servern."
            ],
            "lang": "js",
            "code": "res.send(document);",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 9,
            "title": [
                "I index.html ändra rubriken så data kan vissa istället."
            ],
            "description": [
                "Anpassa koden nedan utifrån vilka egenskaper du lägger i ",
                [
                    {
                        "form": "important"
                    },
                    "data"
                ],
                " objectet och lägg den i index filen."
            ],
            "lang": "html",
            "code": "<h1> Welcome to {{name}}! </h1>",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 10,
            "title": [
                "✔️ Starta om servern och testa anropet"
            ],
            "description": [
                "Starta om server och gå in på sidan:"
            ],
            "statments": [],
            "comment": []
        }
    ]
}