DEV Community

Adrián Bailador
Adrián Bailador

Posted on

9

Installing Docker in .NET 8 and React Projects

Step 1: Install Docker

First we have to download and install Docker on our machine. We will download it from the official Docker website (https://www.docker.com/).

Step 2: Create the .NET and React Projects

Create a new .NET 8 project and a new React project using the following commands in the terminal:

Create .NET project

dotnet new web -o MyDotNetProject
Enter fullscreen mode Exit fullscreen mode

Create React project

npx create-react-app my-react-project
Enter fullscreen mode Exit fullscreen mode

This will generate a .NET 8 project in a folder named MyDotNetProject and a React project in a folder named my-react-project.

Step 3: Create the Dockerfile

In the root of each project, create a new file called Dockerfile with no extension. This file defines how Docker builds your applications.

For .NET 8 application:

# Base image
FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
EXPOSE 80

# Build stage
FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
WORKDIR /src
COPY ["MyDotNetProject/MyDotNetProject.csproj", "MyDotNetProject/"]
RUN dotnet restore "MyDotNetProject/MyDotNetProject.csproj"
COPY . .
WORKDIR "/src/MyDotNetProject"
RUN dotnet build "MyDotNetProject.csproj" -c Release -o /app/build

# Publish stage
FROM build AS publish
RUN dotnet publish "MyDotNetProject.csproj" -c Release -o /app/publish

# Final stage
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "MyDotNetProject.dll"]
Enter fullscreen mode Exit fullscreen mode

For React application:

# Base image
FROM node:14 AS build
WORKDIR /app

# Install dependencies
COPY package*.json ./
RUN npm install

# Build the app
COPY . .
RUN npm run build

# Final image
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

Step 4: Build and Run the Docker Containers

Build and run your .NET and React applications in Docker containers:

For .NET project:

cd MyDotNetProject
docker build -t mydotnetproject .
docker run -p 8080:80 mydotnetproject
Enter fullscreen mode Exit fullscreen mode

For React project:

cd ../my-react-project
docker build -t myreactproject .
docker run -p 3000:80 myreactproject
Enter fullscreen mode Exit fullscreen mode

Access your applications at http://localhost:8080 and http://localhost:3000 respectively.

Docker Commands You Might Need:

Viewing Docker Containers

To view all running Docker containers:

docker ps
Enter fullscreen mode Exit fullscreen mode

To view all containers (including non-running ones):

docker ps -a
Enter fullscreen mode Exit fullscreen mode

Stopping a Docker Container

Stop a Docker container using its ID or name:

docker stop <container_ID_or_name>
Enter fullscreen mode Exit fullscreen mode

Removing a Docker Container

Remove a Docker container (after stopping it):

docker rm <container_ID_or_name>
Enter fullscreen mode Exit fullscreen mode

Viewing Docker Images

View all Docker images on your machine:

docker images
Enter fullscreen mode Exit fullscreen mode

Removing a Docker Image

Remove a Docker image:

docker rmi <image_ID>
Enter fullscreen mode Exit fullscreen mode

Make sure to stop containers before removing them.

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay