🕸️
[BA] Web Programming
  • Introductie
  • Cursus
    • TypeScript
      • Waarom TypeScript?
      • Nieuw project
      • Wat is een tsconfig.json?
      • Input lezen
      • Type Systeem
        • Basic types
        • Arrays
        • Functions
        • Class
        • Interface
      • Conditionele blok
      • Loops
      • Array methods
      • Exceptions
      • Modules
      • Asynchroon Programmeren
        • Promises
        • Async/Await
        • Fetch
        • JSON
    • Frontend
      • DOM Manipulatie
      • VITE
      • Deployment met Surge
    • Backend
      • Express.js
        • Basis
        • Nodemon
        • Statische Bestanden
        • Request
        • Response
        • Router
      • MySQL
    • Fullstack
      • Van Form tot Database
      • CORS
  • Labos
    • 1. TS: Basis
      • Hello Name
      • BMI Calculator
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 2. TS: Arrays & functions
      • Som van getallen
      • Math Fun
      • Array Sum
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
      • BMI Calculator Multi
    • 3. TS: Interfaces & classes
      • Recepten
      • Transportmiddelen
      • Movies
      • Filter Numbers
    • 4. TS: Async & fetch
      • Promise All
      • Slow Sum
      • Cocktails Promise All
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 5. TS: Modules & NPM
      • Math Module
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 6. Frontend: VITE & DOM
      • Verander achtergrond
      • Verander tekst
      • Verander divs
      • Verander kleuren
      • Verander kleuren random
    • 7. Frontend: APIs & DOM
      • Cocktail API met Vite
      • Weather API
      • Uitvinders
      • Rick and Morty
    • 8. Backend: Express & Requests
      • Hello Express
      • DadJoke Express
      • Reiskosten server
    • 9. Backend: MySQL & Routing
      • Reiskosten server
      • Taken server
      • Taken server met prioriteit
    • 10. Fullstack: Forms & Express & MySQL
      • Reiskosten app
      • Taken app
      • Pokémon app
Powered by GitBook

AP

On this page
  • Introductie
  • Installatie
  • Gebruik
  • Kan dit sneller?
  • CORS
  1. Cursus
  2. Frontend

Deployment met Surge

PreviousVITENextBackend

Last updated 5 months ago

Introductie

In dit hoofdstuk maken we gebruik van Surge.sh om onze webpage te hosten.

Installatie

installeer éénmalig Surge door middel van het volgende commando

npm i -g surge

of mac gebruikers:

sudo npm i -g surge

Gebruik

Geef in de terminal het volgende commando in:

surge

Surge zal dan vragen welke folder je wil publiceren. Hier geef je dus je 'dist' folder in. Surge zal dan een random domeinnaam voorstellen. Je kan deze wijzigen zolang deze maar eindigt op surge.sh.

Kan dit sneller?

ja, dit alles kan tevens in 1 commando:

surge /dist mijngewenstdomein.surge.sh

CORS

CORS staat voor Cross-Origin Resource Sharing.

Deze techniek zorgt ervoor dat je alleen dingen van een andere server kunt halen als die server dat toestaat. Dit is een beveiligingsmaatregel om te voorkomen dat iemand stiekem gegevens steelt of misbruik maakt van een website.

Als je bestanden (bijvoorbeeld json) wilt hosten in surge, moet je een CORS bestand voorzien om toelating te geven aan andere websites om jouw bestanden aan te kunnen spreken.

Voeg een nieuw bestand CORS toe in de dist folder en vul in dit bestand de domeinen toe die jouw gegevens mogen aanspreken.

Mag iedereen er aan, zet dan * in je CORS bestand.

Na het aanmaken van dit bestand moet je uiteraard opnieuw surge uitvoeren om dit CORS bestand op je hosting te zetten.

is een cloud-gebaseerde dienst die eenvoudig en snel statische websites kan hosten. Het is populair onder ontwikkelaars omdat het een zeer eenvoudige interface biedt voor het deployen van statische sites, zoals HTML, CSS, en JavaScript projecten, naar het web.

Surge.sh
Screenshot from surge.sh