# Serverless Vue.js App mit Vercel

Vercel ist eine cloud Plattform für statische Webseiten und serverless-functions. Dabei ist das deployment sehr einfach und die Plattform skaliert eigenständig.

Und das alles kostenlos (für Solopreneure).

Voraussetzung für unser Vorhaben ist ein installiertes Node.js (https://nodejs.org (opens new window)) und GitHub Account (https://github.com (opens new window)) für die kostenlose Anmeldung bei Vercel. Außerdem benötigen wir die globalen Module Parcel und Vercel:

npm i -g parcel-bundler
npm i -g vercel

Danach erstellst du ein Verzeichnis für deine Vue.js Projekt und öffnest dieses mit der Konsole. Mit folgenden Befehlen installierst du die benötigten Module:

npm init -y
npm i vue

Die package.json sollte so ähnlich aussehen:

{
  "name": "hello",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^2.6.11"
  }
}

Danach erstellst du die Dateien index.html, main.js und App.vue und füllst diese mit folgendem Code:

index.html

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, height=device-height, viewport-fit=cover"/>
  <title>App</title>
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
<style>
</style>
</html>

main.js

//main.js
import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

App.vue

<!--App.vue-->
<template>
  <v-app>
    Hello World!
  </v-app>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

Mit dem Befehl "parcel index.html" kannst Du das Ergebnis lokal testen (meist http://localhost:1234 (opens new window)).

Für die Produktivnahme bei vercel benötigst du folgende vercel.json Datei.

{
  "version": 2,
    "builds": [
      { "src": "./dist/**", "use": "@vercel/static" }
    ],
    "routes": [
      { "src": "/(.*)", "dest": "dist/$1" }
    ]
}

Mit dem Befehl "vercel" kannst du deine Vue.js App nun produktiv nehmen. Auf der Konsole wird dir deine URL angezeigt. In meinen Fall: https://vue-hello-gray.vercel.app (opens new window)