A few weeks ago I decided to build a personal website. I did some research and finally decided on using React for the frontend and .NET Core for the backend.
In this tutorial, I'll go through all the steps needed to create and deploy a brand new react app with .NET Core 3.1 from a new repository on Github to DigitalOcean.
This assumes that you have .NET Core 3.1 installed on your machine.
Creating and Running React App
- Run the following command to create your react app.
This will also create the directory
dotnet new react -o my-react-app
This command uses the "ASP.NET Core with React.js" template installed with .NET core. After running the command, your new directory should contain something like this
- Click on the .csproj file and open it using your favourite IDE.
- Looking at the project, you will notice that you have a "ClientApp" folder. This folder contains all the files needed for the "React" part of the app.
- Build the project. Building the project restores the npm dependencies on the first run.
- Run the app as normal by right-clicking on the project and selecting "run". This should open a new page that looks something like this.
Deploying React App
Now that we have the app running we'll prepare the app to be deployed. To do this we're going to:
- Create a Github account and a new repository and add the project we created to the repository.
- Add a DockerFile to the root of the repository
Creating Github Account
- We'll start by creating a new account on Github. You can skip this step if you already have one. Navigate to Github and click on "Sign Up" at the top of the page. The page you'll see is 👇🏼
After filling in your details you'll get taken to a page where you can select your experience, what kind of work you do and what you're interested in. Finally, you'll be sent an email to verify your email address and voilà!
Creating Github Repository
- Now that the Github account is all set up, we'll create our new repository.
We'll clone our repository by clicking on "Code" 👇🏼
-
Copy the HTTPS URL, open the terminal on your computer and run the following:
Replace {https-url} with your HTTPS URL
git clone {https-url}
If you have just created a new Github account you will be asked to authenticate yourself and enter your username and password.
Adding Project to Github Repository
- Once we've got our new repository cloned copy the folder containing your new project("my-react-app") and paste/move it to your repository folder("my-react-app").
Run the commands below to commit and push your changes.
git add .
git commit -m "Add new react project"
git push
You should now be able to see your changes in your Github repository.
Adding Dockerfile to Github Repository
The final step to prepare your project to be deployed to DigitalOcean is to add a Dockerfile to the root of your repository.
Dockerfile
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs
FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs
WORKDIR /src
COPY ["my-react-app/my-react-app.csproj", ""]
RUN dotnet restore "my-react-app.csproj"
COPY . .
WORKDIR "/src/"
RUN dotnet build "my-react-app/my-react-app.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "my-react-app/my-react-app.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "my-react-app.dll"]
If you have Docker installed on your machine and want to test the dockerfile, navigate to the root of your repository and run the following commands
docker build -t my-react-app .
docker run -p 80:80 my-react-app
Run the commands below to commit and push your changes.
git add .
git commit -m "Add Dockerfile"
git push
Now your repository is all set and we can move on to create an account with our hosting provider(DigitalOcean).
You can find the code on my Github account here 👇🏼
Creating DigitalOcean Account
At the time of writing 9th of March 2021, DigitalOcean offer $100, 60-day credit when you create a new account with them using a referral link. I've already created an account with them so this is my Referral Link
You will need to add your billing information but you won't be charged until the end of the 2 months.
So after you've created your account, you'll be asked to create a new project. Add in the project name but skip the "Move Resources" step.
Once that's done you'll be shown to the default account page.
DigitalOcean offers some really great services but the one that we'll be using here is a new one which is the App Management feature.
Once you've clicked on "Apps", you'll see this screen.
Select "Launch Your App" and you'll be taken to a screen to select where source code will be coming from
Our source is on Github so we'll select that. Then you'll be taken to a screen where you can login to your Github account. You may need to modify the access permissions on your repository to allow DigitalOcean access
Now that your DigitalOcean account has access to your repo you will be able to select it. A great thing that DigitalOcean allows you to do is to publish from a certain branch whenever you push into it. Master will be selected as default.
When you click on "Next" DigitalOcean will go looking for your Dockerfile. If it all goes well, you should see this page
Moving on, I will keep the selected region and the app name as they are
We finally get to the final step and launch
If everything is going well you'll get transferred to this page where you'll be able to monitor your deployment.
Until it succeeds 🥳
On first deploy, you might get this error (Error code: DeployContainerHealthChecksFailed)
If that happens, navigate to "Components" and make sure that the exposed HTTP port is set to 80
As DigitalOcean isn’t a domain registrar, you can’t purchase a domain from them. If you have an existing domain you can transfer it over to DigitalOcean to manage. DigitalOcean have a great article on how to do that here
You can find the full source code on my Github account:
Top comments (0)