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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay