DEV Community: Jayavardhan Reddy J

React and .NET Core 6.0 Sample Project with Docker - Part 3

Jayavardhan Reddy J — Tue, 25 Oct 2022 10:22:46 +0000

In this article we are going to Dockerize ASP.NET Core with SQL Server into micro-services.

Please refer to my previous article to create ASP.NET Core Web API.

React and .NET Core 6.0 Sample Project with Docker -Part 1

The sections of this post will be as follows:

Create the Docker file
Writing docker compose
Configure Web API to use SQL Server
Build and Run Docker Compose
Test the Web API End Points

To follow along with this tutorial, you need to have:

Docker Desktop
A Windows, Linux, or Mac machine

If you are ready, let’s get started.

Before this make sure that docker engine is up and running. Open a terminal and run.

docker info

1) Create the Docker file

We need to create a docker file within our root directory to build and run the Web API as a image.



FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["MoviesAPI/MoviesAPI.csproj", "MoviesAPI/"]
RUN dotnet restore "MoviesAPI/MoviesAPI.csproj"
COPY . .
WORKDIR "/src/MoviesAPI"
RUN dotnet build "MoviesAPI.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "MoviesAPI.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "MoviesAPI.dll"]

This file is responsible for instructing Docker how we want to build our Web API image. Once we build this file it will fetch the .NET Core image and add the all required dependencies and copy it to app/publish folder and start the application at MoviesAPI.dll

2) Writing docker compose

We will add docker compose file by selecting container orchestrator support for the application. Please follow the below steps to add docker compose file.

Application => Right Click => Add => Select container orchestrator support.

select Docker Compose option and Click on Ok.

Select Docker support options as Linux and click on Ok.

Add the following code to docker compose and override file to download the sql server docker image and run the movies db on port 1433.

docker-compose.yml



version: '3.4'

services:
  moviesapi:
    image: moviesapi
    build:
      context: .
      dockerfile: MoviesAPI/Dockerfile

  db:
    image: "mcr.microsoft.com/mssql/server:2017-latest"

docker-compose.override.yml



version: '3.4'

services:
  moviesapi:
    environment:
      - ASPNETCORE_ENVIRONMENT=Development
    ports:
      - "80"

  db:
    container_name: Movies
    environment:
        SA_PASSWORD: "Password123"
        ACCEPT_EULA: "Y"
    restart: always
    ports:
        - "1433:1433"

3) Configure Web API to use SQL Server

Update the appsettings.json file.



{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MovieConnection": "Server=Movies;Database=Movies;User Id= sa;Password=Password123;"
  }
}

Add the following logic for EF Core migration. after builder.Build() in Program.cs



if(app.Environment.IsDevelopment())
{
    using(var scope = app.Services.CreateScope())
    {
        var movieContext = scope.ServiceProvider.GetRequiredService<MovieContext>();
        movieContext.Database.EnsureCreated();

    }
}

4) Build and Run Docker Compose

Now go to Docker desktop and click on containers. Here we can see docker container up and running.

Movies Web API running on 56711 port and Movies db is running on 1433 port.

5) Test the Web API End Points

We will test POST and GET requests to verify the functionality like we tested in part 1.

Go to Postman and create a new http request.

POST Method:

http://localhost:port/api/movies/

GET Method:

http://localhost:port/api/movies/

Conclusion:

If we install SQL Server on our local machines and then try to run the application will take a lot of time and disk space. If we the containerized databases it will be easy to start the database and also we can delete with in seconds.

Thanks for reading!

Please leave a comment if you fine this helpful. Any feedback or suggestions are welcome

React and .NET Core 6.0 Sample Project with Docker - Part 2

Jayavardhan Reddy J — Sun, 16 Oct 2022 16:38:06 +0000

This article will explain how to create React Js application and consume ASP.NET Core Web API requests to fetch the movies data.
We will go through step by step with an example.

Please refer to my previous article to create ASP.NET Core Web API.

React and .NET Core 6.0 Sample Project with Docker -Part 1

The sections of this post will be as follows:

Creating a ReactJs project
Install packages
Add Components
Test the React UI Application

So, Let's get started.

Creating a ReactJs project:

Open Command Prompt and navigate to the path where you want to create the React app.

npx create-react-app movies-app

After creating the react project open the application using visual studio code.

Go to Terminal => start the react app

npm start

Once you start the project , the UI will be open in your default browser.

Install packages:

npm install semantic-ui-react semantic-ui-css

Open index.html page and past .css link in head section and .js after body section.

npm install axios

npm install react-toastify

Add Components

Go to => src => Create "Components" folder

Components => NavBar.jsx

This will add the navigation bar to the application.

import { Button, Menu } from "semantic-ui-react";
import "../index.css";

export default function NavBar(props) {
  return (
    <Menu inverted fixed="top">
      <Menu.Item header>
        <img
          src="/movieslogo.png"
          alt="logo"
          style={{ marginRight: "10px", marginLeft: "10px" }}
        />
        Movies
      </Menu.Item>
      <Menu.Item>
        <Button positive content="Add Movie" onClick={() => props.addForm()} />
      </Menu.Item>
    </Menu>
  );
}

Components => MoviesTable.jsx

This component will display the table with movie details and actions to to delete and edit the movie.

import { Fragment } from "react";
import { Table, Button } from "semantic-ui-react";
import "../index.css";

export default function MoviesTable(props) {
  return (
    <Fragment>
      <h1 style={{ marginLeft: "30px" }}>Movies List</h1>
      <Table
        celled
        style={{
          marginLeft: "30px",
          marginTop: "30px",
          width: "1100px",
          border: "1px solid black",
        }}
      >
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Title</Table.HeaderCell>
            <Table.HeaderCell>Language</Table.HeaderCell>
            <Table.HeaderCell>Year</Table.HeaderCell>
            <Table.HeaderCell>OTT</Table.HeaderCell>
            <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {props.movies.map((movie) => (
            <Table.Row key={movie.id}>
              <Table.Cell>{movie.title}</Table.Cell>
              <Table.Cell>{movie.movieLanguage}</Table.Cell>
              <Table.Cell>{movie.releaseYear}</Table.Cell>
              <Table.Cell>{movie.ott}</Table.Cell>
              <Table.Cell>
                <Button positive onClick={() => props.editForm(movie)}>
                  Edit
                </Button>
                <Button negative onClick={() => props.deleteMovie(movie.id)}>
                  {" "}
                  Delete
                </Button>
              </Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </Fragment>
  );
}

Components => AddMovie.jsx

This component will be used to add the movie details to the database and display in movie table.

import { Button, Form, Segment } from "semantic-ui-react";
import React, { useState } from "react";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function AddMovie(props) {

  const initialState = {
    title: "",
    movieLanguage: "",
    releaseYear: "",
    ott: "",
  };

  const [movie, setMovie] = useState(initialState);

  function handleSubmit(e) {
    e.preventDefault();
    if (!movie.title) {
      toast.error("Please fill all the details !", {
        position: toast.POSITION.TOP_RIGHT,
      });
      return;
    }
    props.handleSumbit(movie);
    setMovie(initialState);
  }

  function handleInputChange(event) {
    const { name, value } = event.target;
    setMovie({ ...movie, [name]: value });
  }

  return (
    <>
      <h1 style={{ marginLeft: "15px" }}>Add Movie</h1>
      <Segment clearing style={{ marginRight: "30px", marginTop: "30px", marginLeft: "10px" }} >
        <Form onSubmit={handleSubmit} autoComplete="off">
          <Form.Input placeholder="Title" value={movie.title} name="title" onChange={handleInputChange} />
          <Form.Input placeholder="Language" value={movie.movieLanguage} name="movieLanguage" onChange={handleInputChange}/>
          <Form.Input placeholder="Year" value={movie.releaseYear} name="releaseYear" onChange={handleInputChange} />
          <Form.Input placeholder="OTT" value={movie.ott} name="ott" onChange={handleInputChange}/>
          <Button floated="right" positive type="submit" content="Submit" />
          <Button floated="right" type="button" content="Cancel" onClick={() => props.closeForm()}
          />
        </Form>
      </Segment>
    </>
  );
}

Components => EditMove.jsx

This component will be used to edit the movie data and update.

import { Button, Form, Segment } from "semantic-ui-react";
import React, { useState } from "react";

export default function EditMovie(props) {
  const [movie, setMovie] = useState(props.movie);

  function handleSubmit(e) {
    e.preventDefault();
    props.handleEditMovie(movie);
  }

  function handleInputChange(event) {
    const { name, value } = event.target;
    setMovie({ ...movie, [name]: value });
  }

  return (
    <>
      <h1 style={{ marginLeft: "15px" }}>Edit Movie</h1>
      <Segment
        clearing
        style={{ marginRight: "30px", marginTop: "30px", marginLeft: "10px" }}
      >
        <Form onSubmit={handleSubmit} autoComplete="off">
          <Form.Input
            placeholder="Title"
            value={movie.title}
            name="title"
            onChange={handleInputChange}
          />

          <Form.Input
            placeholder="Language"
            value={movie.movieLanguage}
            name="movieLanguage"
            onChange={handleInputChange}
          />
          <Form.Input
            placeholder="Year"
            value={movie.releaseYear}
            name="releaseYear"
            onChange={handleInputChange}
          />

          <Form.Input
            placeholder="OTT"
            value={movie.ott}
            name="ott"
            onChange={handleInputChange}
          />
          <Form.TextArea
            placeholder="Description"
            value={movie.description}
            name="description"
            onChange={handleInputChange}
          />
          <Button floated="right" positive type="submit" content="Submit" />
          <Button
            floated="right"
            type="button"
            content="Cancel"
            onClick={() => props.closeForm()}
          />
        </Form>
      </Segment>
    </>
  );
}

Components => MoviesDashboard.jsx

This will be used to display the all movie related components.

import { Grid } from "semantic-ui-react";
import AddMovie from "./AddMovie";
import MoviesTable from "./MoviesTable";
import EditMovie from "./EditMovie";

export default function MoviesDashboard(props) {
  return (
    <Grid>
      <Grid.Column width="10">
        <MoviesTable movies={props.movies} editForm={props.editForm} deleteMovie={props.deleteMovie}/>
      </Grid.Column>
      <Grid.Column width="6">
        {props.showAddForm && (<AddMovie closeForm={props.closeForm} handleSumbit={props.handleSumbit} />)}
        {props.showEditForm && ( <EditMovie movie={props.movie} closeForm={props.closeForm} handleEditMovie={props.handleEditMovie} />  )}
      </Grid.Column>
    </Grid>
  );
}

Update the App.js with the below code

import axios from "axios";
import "./App.css";
import { v4 as uuid } from "uuid";
import NavBar from "./components/NavBar";
import { useEffect, useState } from "react";
import MoviesDashboard from "./components/MoviesDashboard";
import { toast, ToastContainer } from "react-toastify";
function App() {
  const [movies, setMovies] = useState([]);
  const [movie, setMovie] = useState();
  const [showAddForm, setshowAddForm] = useState(false);
  const [showEditForm, setshowEditForm] = useState(false);

  useEffect(() => {
    axios.get("http://localhost:5159/api/movies").then((response) => {
      setMovies(response.data);
    });
  }, [movies]);

  function handleEditMovie(movie) {
    axios({
      method: "put",
      url: `http://localhost:5159/api/movies/${movie.id}`,
      data: {
        Id: movie.id,
        Title: movie.title,
        MovieLanguage: movie.movieLanguage,
        ReleaseYear: movie.releaseYear,
        OTT: movie.ott,
      },
      config: {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      },
    })
      .then((response) => {
        console.log(response);
        toast.success("Movie updated successfully", {
          position: toast.POSITION.TOP_RIGHT,
        });
      })
      .catch((error) => {
        console.log("the error has occured: " + error);
      });

    setMovies([...movies, movie]);
  }

  function handleSumbit(movie) {
    const data = {
      Id: uuid(),
      Title: movie.title,
      MovieLanguage: movie.movieLanguage,
      ReleaseYear: movie.releaseYear,
      OTT: movie.ott,
    };
    axios({
      method: "post",
      url: "http://localhost:5159/api/movies",
      data: data,
      config: {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      },
    })
      .then((response) => {
        console.log(response);
        toast.success("Movie added successfully", {
          position: toast.POSITION.TOP_RIGHT,
        });
      })
      .catch((error) => {
        console.log("the error has occured: " + error);
      });

    setMovies([...movies, data]);
  }

  function addForm() {
    setshowEditForm(false);
    setshowAddForm(true);
  }

  function closeForm() {
    setshowAddForm(false);
    setshowEditForm(false);
    setMovie("");
  }

  function editForm(movie) {
    setMovie("");
    setshowAddForm(false);
    setshowEditForm(true);
    setMovie(movie);
  }

  function deleteMovie(id) {
    setshowEditForm(false);
    setMovie("");
    axios.delete(`http://localhost:5159/api/movies/${id}`).then(() => {
      toast.success("Movie deleted successfully", {
        position: toast.POSITION.TOP_RIGHT,
      });
    });

    setMovies([...movies.filter((x) => x.id !== id)]);
  }

  return (
    <div>
      <NavBar addForm={addForm} />
      <h1>Movies Data</h1>
      <MoviesDashboard
        movies={movies}
        showAddForm={showAddForm}
        showEditForm={showEditForm}
        editForm={editForm}
        movie={movie}
        deleteMovie={deleteMovie}
        closeForm={closeForm}
        handleSumbit={handleSumbit}
        handleEditMovie={handleEditMovie}
      />
      <ToastContainer position="top-center" />
    </div>
  );
}

export default App;

Update the index.css with the below code for styling

body {
  background-color: #eaeaea !important;
}
.ui.inverted.top.fixed.menu {
  background-image: linear-gradient(135deg,rgb(233, 10, 204) 0%, rgb(155, 50, 133) 69%,rgb(104, 50, 85) 89%) !important;
}

*Test the Movies UI *

Home Page:

Add Movie :

Edit Movie :

In the next section we will explain the way to containerize the .NET Core 6.0 Web API and React applications.

You can find the full project in this GitHub repository.

React and .NET Core 6.0 Sample Project with Docker - Part 1

Jayavardhan Reddy J — Sat, 15 Oct 2022 09:15:57 +0000

This article will explain about the CRUD (Create ,Read ,Update and Delete) operations in ASP.NET Core 6.0 WEP API using Entity Framework Core Code First approach.

The sections of this post will be as follows:

Creating a Web API Project
Adding a Model
Adding a Database Context
Creating Database with Migrations
Creating API Controller and Methods

We need the following tools installed on our computer:

Visual Studio 2022
.NET 6.0 SDK
Microsoft SQL Server Express
Postman

If you are ready, let’s get started.

Create ASP.NET Core Web API Project
Open Visual studio -> New Project -> ASP.NET Core Web API.

Install Below NuGet packages

Adding a Model

Now, we will implement our data model class.

In Solution Explorer, right-click the project. Select Add -> New Folder and name the folder Models.

Then right-click the Models folder and select Add->Class. Name the class Movie.cs and click Add.

Next, add the following properties to the class:

namespace MoviesAPI.Models
{
    public class Movie
    {
        public Guid? Id { get; set; }

        public string? Title { get; set; }

        public string? MovieLanguage { get; set; }

        public string? ReleaseYear { get; set; }

        public string? OTT { get; set; }

    }
}

Adding a Database Context

Now, right-click the Models folder and select Add ->Class. Name the class MovieContext and click Add. Then add the following code to the class:

using Microsoft.EntityFrameworkCore;

namespace MoviesAPI.Models
{
    public class MovieContext:DbContext
    {
        public MovieContext(DbContextOptions<MovieContext> options):base(options)
        {

        }

        public DbSet<Movie> MoviesList { get; set; } = null!;
    }
}

Now, update the appsetting.json to configure connection string.

"ConnectionStrings": {
    "MovieConnection": "Data Source=ServerName;Initial Catalog=Movies;Integrated Security=true"
  }

Now, we will register our database context to the built-in IOC container. Add the following code to Program.cs:

Creating Database with Migrations

Now, we will create the database using the EF Core Migrations feature.

Open Tools -> NuGet Package Manager > Package Manager Consoleand run the following command in the PMC:

Add-Migration Initial

After running the command, a migration file is created under the Migrations folder:

As the next step, run the following command in the PMC:

Update-Database

You will see the newly created database as below:

Creating API Controller and Methods

Let's add Movies API Controller and test the CRUD Methods.

Right-click on the Controller folder and select Add -> Controller.. and then select API Controller - Empty as below:

Name : MoviesController.cs

Add the bellow code to the MoviesContoller file.This will inject the database context through the constructor of the controller.

private readonly MovieContext _movieContext;
        public MoviesController(MovieContext movieContext)
        {
            _movieContext = movieContext;
        }

Now, we will add CRUD (create, read, update, and delete) action methods to the controller. Let’s start with the POST methods.

POST Method:

Add the following code in MoviesController.cs

[HttpPost]
        public async Task<ActionResult<Movie>> AddMovie(Movie movie)
        {
            if (_movieContext == null)
            {
                return NotFound();
            }

            _movieContext.MoviesList.Add(movie);

            await _movieContext.SaveChangesAsync();

            return movie;
        }

Go to Developer PowerShell or Command Prompt and execute the below command to test POST method.

dotnet build

dotnet run

Go to Postman and Create New Http Request and execute the POST Method.

http://localhost:<portnumber>/api/movies

Now, Goto SSMS and execute the below to see the added movie.

Similarly add few more movies to the database by executing POST method.

GET Method:

Add the following code to the MoviesController.cs

//GET : api/movies
        [HttpGet]
        public async Task<ActionResult<IEnumerable<Movie>>> GetMovies()
        {
            if(_movieContext == null)
            {
                return NotFound();
            }
            return await _movieContext.MoviesList.ToListAsync();
        }

        //GET : api/movies/id
        [HttpGet("{id}")]
        public async Task<ActionResult<Movie>> GetMovies(Guid id)
        {
            if (_movieContext == null)
            {
                return NotFound();
            }

            var movie = await _movieContext.MoviesList.FindAsync(id);
            if (movie == null)
            {
                return NotFound();
            }
            return movie;
        }

We can test the application by calling the two endpoints from Postman as follows:

https://localhost:{port}/api/movies

https://localhost:{port}/api/movies/{id}

UPDATE Method:

Add the following code to the MoviesController:

 [HttpPut("{id}")]
        public async Task<ActionResult<Movie>> UpdateMovie(Guid id, Movie movie)
        {
            if (movie.Id != id)
            {
                return BadRequest();
            }

            _movieContext.Entry(movie).State = EntityState.Modified;

            await _movieContext.SaveChangesAsync();

            var updatedMovie = _movieContext.MoviesList.FirstOrDefaultAsync(x => x.Id == id);

            return movie;
        }

and test the Update method using Postman to update any value.

DELETE Method:

Add the following code to the MoviesController.cs

    [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteMovie(Guid id)
        {
            var movie = await _movieContext.MoviesList.FindAsync(id);

            if (movie == null) return NotFound();

            _movieContext.MoviesList.Remove(movie);

            await _movieContext.SaveChangesAsync();

            return NoContent();

        }

Execute the following command in Postman to test the Delete method.

We will continue to run this application using docker file in the next part. You can find the full project in this GitHub repository