Deploy Your C# Blazor App To Vercel

max_onit

Maximilian Leodolter

Posted on June 17, 2024

Deploy Your C# Blazor App To Vercel

Vercel, known for its seamless deployment and scalability, is a popular choice among developers. While Vercel primarily supports JavaScript frameworks, it’s entirely possible to deploy C# applications too. Let's dive into how you can deploy your C# projects to Vercel, making your build fast and shipping faster.

Why Choose Vercel?

Vercel offers a robust platform for deploying applications with ease. Its features include:

  • Automated Deployments: Every push to your Git repository can automatically deploy your app.
  • Scalability: Vercel’s infrastructure scales your application effortlessly.
  • Global Edge Network: Your applications are served from the edge, ensuring low latency and fast load times.
  • Built-in CI/CD: Vercel integrates continuous integration and continuous deployment, streamlining your development workflow.

Prerequisites

Before we start, ensure you have the following:

  • A Vercel account
  • Node.js installed on your machine
  • .NET SDK installed
  • Git installed and configured

Check if .NET is installed correctly:

 dotnet --version
Enter fullscreen mode Exit fullscreen mode

Thid command should output:

 8.0.XXX
Enter fullscreen mode Exit fullscreen mode

Create a New C# Project

First, let's create a new C# Blazor project. Open your terminal and run the following commands:

dotnet new blazorwasm -o NameOfYourProject
Enter fullscreen mode Exit fullscreen mode

This will create a new Blazor project in a directory named NameOfYourProject.
The directory contains by default an example project for you to play around.
To get into more details read this tutorial from the official microsoft website: https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro

To run the project locally navigate into the project folder:

cd NameOfYourProject
Enter fullscreen mode Exit fullscreen mode

Use this command to start up the local development server:

dotnet watch
Enter fullscreen mode Exit fullscreen mode

It even has hot reloading!

Build your Project for Deployment

To deploy your C# application to Vercel, you need to build it first on your machine.
Use this command to generate the output files.

dotnet publish -c Release
Enter fullscreen mode Exit fullscreen mode

The output files will be located in this folder:

bin/Release/net8.0/publish/wwwroot
Enter fullscreen mode Exit fullscreen mode

Please note that the exact path my vary a bit. Depending on your .NET version.

Initialize a Git Repository

Next, initialize a new Git repository and commit your code:

git init
git add .
git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

No push the code to your git repository.
First connect the github repo to your local repository:

git remote add origin https://github.comXXXXX
git push origin master
Enter fullscreen mode Exit fullscreen mode

Deploy to Vercel

Now, it’s time to deploy your application to Vercel. Follow these steps:

  1. Go to Vercel
  2. Add New Project
  3. Select the repository from your github account
  4. Set custom Build & Development Settings
  5. Override the Output Directory to: bin/Release/net8.0/publish/wwwroot

Thats it!
You should now see a preview of your deployed C# Blazor App.

If you want to publish changes follow these instructions:
1.

bash dotnet publish -c Release

2.

git add . && git commit -m "Your Commit Message"

3.

git push origin master

Vercel will take care of the rest and you should see the live changes in 1-2 minutes on your website.

Final Thoughts

Deploying C# applications to Vercel may seem unconventional given its JavaScript-centric nature. Vercel’s powerful platform allows you to build and ship your C# Blazor applications faster than ever.

By following the steps outlined above, you can harness the power of Vercel for your C# projects, ensuring smooth deployments and high performance. So, gear up, start building, and ship your applications faster with Vercel!

Checkout our services: https://onit.eu
we have more interesting articles on: https://www.onit.eu/blog

💖 💪 🙅 🚩
max_onit
Maximilian Leodolter

Posted on June 17, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related