Writing an app with SvelteKit Part 3

In the last blog post we finished the layout and presentation of our SvelteKit app and showed off the finished and deployed version. But how does the deployment of a SvelteKit app work?

As covered in the Introduction to SvelteKit, SvelteKit works with adapters and the default project skeleton includes the adapter-auto. This allows you to automatically deploy to any of the supported environments, no configuration required. The adapter automatically detects in which environment it is build and acts accordingly. Currently supported environments are:

• Cloudflare
• Netlify
• Vercel
• Azure Static Webapps

Since I already have a Vercel account, this blog post is going to focus on how to set up a deployment with Vercel, but it should be very similar for other environments.
To get started, an account for the platform of choice is necessary.

Vercel should automatically redirect to a personal dashboard once a user has logged in. A new project can easily be created by clicking Add New and selecting Project.

In the project wizard, you can either import an existing repository from Github, Gitlab or Bitbucket or choose to clone a prepared template. To deploy an app on Vercel from a private instance of either git solution, the Vercel CLI can be used.

Since the project is already created and hosted on Github, click continue with Github. It may be necessary to authorize Vercel with your Github account if this hasn’t already been done. Afterwards, Vercel will show you all the repositories you gave it access rights to, allowing you to choose which project you want to deploy.

As you can see in the screenshot above, it will even show the framework used in the project if Vercel can detect a framework.

After choosing the project that should be deployed and importing it, the project configuration screen will be shown. After customizing the Project name, the environment variable GITHUB_API_KEY needs to be added to make sure that serverside rendering does not encounter the API rate limit.

After a click on Deploy, Vercel should automatically clone the repository and build the app. It should become available under <projectname>-<random string>-<vercelaccout>.vercel.app, the exact address will be shown in the project deployment overview, together with a preview render how the app will look for your visitors.

With that, the project is successfully deployed to Vercel. It is now possible to configure domain names for the project, set up dev environments with different sub-domains or activate the Vercel analytics API. Analytics without configuration are currently only supported for Next.js, Nuxt.js and Gatsby, SvelteKit apps need to implement the Analytics API.

Once more, you can take a look at the finished deployment here https://www.arsnouveau.wiki or view the sourcecode on github!