Website - Go live

Früher war der Go live im Prinzip immer gleich. Website Files per FTP oder SSH auf den Serverspielen und Datenbank per SSH, phpMyAdmin oder anderen Tools hochspielen.

Durch neue Arbeitsweisen und Tools wie Webpack, Docker etc. hat sich auch das Deployment verändert.

Webpack build

Wenn mit einem Bundler wie Webpack gearbeitet wird, muss man den Bundler anweisen zunächst eine Distribution zu erstellen. Dabei kann der Bundler einige Aufgaben übernehmen: TypeScript in JavaScript umwandeln, Sass/Less Dateien kompilieren und vieles mehr.

Terminal:

npm run build

This command will run the script located in the /package.json file in the scripts > build property.

Wait a few seconds and the files should be available in the /dist/ folder which will be created when build is executed. You can then put those files online using your favorite FTP client.

Whenever you want to upload a new version, run npm run build again even if the /dist/ folder already exists.

Vercel / Netlify / Github Pages

Vercel as an Example for modern deployment and testing

Vercel

Vercel is one of those "modern" hosting solutions and features continuous integration (automatisation of testing, deployment and others development steps like this). It is very developer friendly and easy to setup.

You can use it for complex projects, but also for very simple "single page" websites like the ones we create within this course.

Vercel mit Webpack nutzen

Quickstart

Im Terminal einmalig

 npm install vercel

oder auch mit -g global

package.json einmalig anpassen

"deploy": "vercel --prod"

im scripts Teil hinzufügen

Ab sofort im Terminal über

npm run deploy

Veröffentlichen

Wie funktioniert Vercel

Vercel kann im Prinzip den build Process Online erledigen und bietet einige Zusatzfunktionen. Auch Domains kann man verbinden etc. Vercel Modul als Dependency einbinden (lokal oder mit -g Global). Das Modul ist ein CLI (CommandLineInterface) um mit Vercel zu kommunizieren

npm install vercel

Im package.json Skript legen wir unter script eine neue Zeile - z.B, mit Namen deploy an:

   "scripts": {
    "build": "webpack --config ./bundler/webpack.prod.js",
    "dev": "webpack serve --config ./bundler/webpack.dev.js",
    "deploy": "vercel --prod"
  },

Jetzt steht für npm run die Option deploy zur Verfügung

npm run deploy

Vercel fragt beim ersten mal nach wie wir uns verbinden möchten (per E-Mail Login, Github...). Dann kann sich die cli einloggen.

Which scope do you want to deploy to? kholja

Man kann in Vercel mehrere Scopes anlegen, wir haben nur den Standardscope (Benutzername)

? Link to existing project? [y/N] n

Man kann Projekte anlegen wenn man möchte und den deploy einem zuordnen. Ansonsten wird ein neues angelegt.

? What’s your project’s name? donuts-3d-text

Achtung muss lowercase und ohne Leerzeichen sein.

? In which directory is your code located? ./

In unserem Fall sind wir schon im Hauptverzeichnis der Anwendung

No framework detected. Default Project Settings:

Wenn Vercel ein Framework wie React erkennt gibt er gleich passende Einstellungen vor. Hier zeigt er uns Standardwerte an.

- Build Command: `npm run vercel-build` or `npm run build`
- Output Directory: `public` if it exists, or `.`
- Development Command: None
? Want to override the settings? [y/N] y

Der Zweite Wert passt nicht unser Projekt liegt nach einem npm build im Ordner dist. Das kann man nun anpassen. Wenn mal ein Fehler passiert,geht das auch noch online bei Vercel.

Am Ende werden alle Daten hochgeladen. Der Build Prozess findet direkt bei Vercel statt. Vercel fügt zum eigenen Projekt eigentlich nur eine Projekt ID hinzu.