Skip to content

Integreren

Jump to bottom
r20222 edited this page Jul 16, 2023 · 1 revision

Omdat ik op cyclic al 3 projecten had staan, wilde ik een andere web hosting platform gebruiken die ook gratis is. Ik begon met vercel. Helaas kreeg ik op Vercel een error 404: not found error:

image

Dit was erg frustrerend, ik probeerde erachter te komen wat er aan de hand kon zijn.

Dankzij deze bron kwam ik erachter dat ik "scripts": { "start": "node index.js" }, Vergeten was te zetten in de package.json. Dit stukje code is volgens mij belangrijk zodat duidelijk is waar er gestart moet worden met het lezen van de webapp.

Helaas werkte het na deze toevoeging nog steeds niet op vercel. Daarom ging ik een andere webprovider proberen.

Render

Ik ging net als bij vercel mijn github koppelen aan Render. Ik doorliep de stappen. Helaas lukte het deployen van de website niet. Ik had de berichten uit de logs in chatgpt gezet die mij vertelde dat ik misschien een verouderde npm versie had en dat ik moest updaten naar de allernieuwste. Dit durfde ik nog niet omdat ik bang ben voor nog meer problemen. Daarom zocht ik verder. Ik kwam op internet een hele goede bron tegen.

Na het lezen van dit artikel kwam ik erachter dat ik 2 dingen anders had gedaan. Ik had mijn PORT anders gezet, namelijk zo:

app.set('port', process.env.PORT || 8000)
app.listen(app.get('port'), function () {
  console.log(`Application started on http://localhost:${app.get('port')}`)
})

En volgens het artikel moest het zo:

const PORT = process.env.PORT || 3030;

// your code

app.listen(PORT, () => {
  console.log(`server started on port ${PORT}`);
});

Nadat ik dat gedaan had werkte het helaas nog niet. Daarom ging ik het tweede ding dat ik anders had gedaan aanpassen.

Ik heb tijdens het maken van de website npm gebruikt, daarom dacht ik dat ik bij de volgende vraag npm moest invoeren:

image

In het artikel stond dat ik yarn moest invoeren. Toen ik dat had gedaan zag ik dat het deployen was gelukt. Helaas werkte de live link niet, de browser bleef maar laden. In de logs stond UnhandledPromiseRejectionWarning: ReferenceError: fetch is not defined. Ik had in de index.js op 2 plaatsen fetch gebruikt:

// definieer de fetchJson functie
async function fetchJson(url) {
return await fetch(url)
    .then((response) => response.json())
    .catch((error) => error)
}

// om te kunnen posten heb je de postjson functie nodig

export async function postJson(url, body) {
  return await fetch(url, {
    method: 'post',
    body: JSON.stringify(body),
    headers: { 'Content-Type': 'application/json' },
  })
    .then((response) => response.json())
    .catch((error) => error)
}

Chatgpt vertelde mij dat ik het goed had gebruikt en dat het lokaal zou werken omdat de fetch functie standaard zou werken in browsers. Chatgpt zei het volgende: Echter, als je deze code uitvoert in een serveromgeving zoals Node.js, zal de fetch-functie niet beschikbaar zijn, omdat deze specifiek is voor de browseromgeving. In Node.js moet je een alternatieve HTTP-client gebruiken om HTTP-verzoeken te doen, zoals axios, node-fetch of request.

Daarom heb ik in de terminal npm install node-fetch geïnstalleerd. En daarna import fetch from 'node-fetch'; in de index.js gezet. Ik zag dat na het installeren de package.json en package-lock.json automatisch waren aangepast. Toen ik dit online zette duurde het deployen even maar na een tijdje stond het online en werkte het! 💯

Bekijk hier de live link: nasa-astronomy-picture-of-the-day

Clone this wiki locally