How to build your own portfolio website in .NET core and React

In this tutorial, we will build a personal portfolio website that will show case all of your professional skills. In this example, my website will contain software development skills, projects, previous jobs, etc. We will building a Single Page Application (SPA) in React.js and .NET Core. I recommend having some sort of programming knowledge, but it’s not required since all code will be provided. We will build each page and component step by step, then we will deploy to Microsoft Azure. I will keep this tutorial pretty straight forward so you can get this up and running. If you have any questions or feedback, please leave a comment

Click here to see what you will be building!

Click here if you would like to fork the project

Project Set up

  1. Download Visual Studio Community edition here.
  1. When you get to the Visual Studio Installer, Check ASP.NET Core Web Application and click Next. This could take awhile to install.
  1. Open Visual Studio and click Create a New Project. Select ASP.NET Core Web Application. Choose a Project name, and click Create.
  1. Choose the React.js template and click Create. 
  1. Once your project is created, select the run button at the top. This will take a few minutes since it has build all of the npm depedencies.
  1. Once it builds, you should get the following page in your browser! Let’s go over each folder to get an understanding.

Folder Structure Rundown

As mentioned before, this project will use React.js and .NET Core (C#). For those who don’t know, React is a JavaScript library created by Facebook and is used for building powerful UI components. React uses a programming language called JSX which stands for JavaScript XML. JSX allows you to write HTML in React. This will make more sense as we work on each page.
Let’s take a look at the folder structure and make some sense of it.

As you can see, the public directory contains index.html and manifest.json. You may have another file in there, you can just delete it if you want. Let’s do one thing, move index.js to your public directory.

index.html – Contains the root node HTML element. This is essentially a container of the entire application. ()

index.js – Renders the React Components BrowserRouter and App inside the HTML element “root”.

The src folder contains all of the JavaScript files that we will use. These JavaScript files are individual components of our application. You will get a better understanding later once we create our own.

The Controllers folder contains our Web API Controllers that handles HTTP requests to give data back to the front end of the application. We typically would retrieve data from a Database but in this case we will just retrieve from a JSON file. That way if you want to add more data such as Education or Jobs, you just update the JSON file.

The Pages folder contains cshtml pages, we will not be creating or touching these files.

The Program.cs and Startup.cs are required to run the application.

Now that we had an high level overview of the application, let’s move on to developing our personal resume! We will start with the About component.


Deploy .NET Core application 3.1 to Microsoft Azure for free

Microsoft Azure is the easiest way to deploy .NET Core applications and shouldn’t require any cost if you stay under the free credits. You will need to create a Microsoft Azure account and provide a credit card, but you will be using the free plan. If you already have an account and have used 12 month free credits, we will use pay as you go pricing, but will select the free tier server. This is good for applications that won’t see a ton of load, ex: your personal portfolio page. Let’s get started!

  1. Once you create an account, go to Microsoft Portal quickstart.

2. Select the first option, Create a Web App.

3. Select the first option, Build and host a web app with Azure Web Apps.

4. Choose Free Trial for subscription. Select Create new for Resource Group and name it whatever you want.

NOTE: If your Free Trial ended, choose pay as you go subscription, we are still going to choose the free tier.

5. Under Instance Details, enter a name, this will be in your site url. Select your Runtime stack, if you recently downloaded .NET Core, you most likely have 3.1, but it’s good to double check.

6. Under App Service Plan, Enter a name and if your sku and size is not Free F1, Select Change Size. Under Dev/Test, select the F1 plan.

7. Select Review and Create and create your instance.

8. Go to your project in Visual Studio, right click your project, select Publish.

9. Select New, and under App Service, Choose Select Existing. Then select your project.

10. Select Publish! Your app will now deploy to your site url. Leave any comments below.