DEV Community

Cover image for NoteWorx - Project 6
Douglas Minnaar
Douglas Minnaar

Posted on

NoteWorx - Project 6

#csharp #dotnet #tutorial

Overview

Over the past few months, I have been building a simple note taking application in 6 different ways. The goal of the project was to build something simple, but build it in different ways, and using different technologies. Up until now, the first 5 NoteWorx projects were all built using Javascript and Javascript frameworks with a MongoDB database. For the sixth NoteWorx project, I decided to use the cross-platform dotnetcore framework, C#, and a PostgreSQL database.

This project is a reference project and will illustrate the following concepts:

  • Build end-to-end asp.net core web application using C#, ASP.NET Core Identity, and Entity Framework Core.
  • Create a Cake build script to manage project build.
  • Use Docker and Docker-Compose to manage containers used to host web application and postgres database.
  • How to use NPM and Gulp to manage client side assets (css, javascript, etc).
  • Use PostgreSQL as a database for all note and identity data.

The source code for NoteWorx (Project 6) can be found here

The previous NoteWorx projects are listed as follows:

A basic note application that uses a CLI (Command Line Interface) frontend to capture and manage notes, and a file system to store notes

A basic note application that uses a CLI (Command Line Interface) frontend to capture and manage notes, and mongodb to store notes.

A basic note application that uses a CLI (Command Line Interface) frontend to capture and manage notes, Mongoose ODM to manage MongoDB interaction, and mongodb to store notes.

A basic note application that uses a CLI (Command Line Interface) frontend to capture and manage notes, and couchbase as a data store.

A basic note application that uses a CLI (Command Line Interface) frontend to capture and manage notes, an express note management API built using Express, and Mongodb to store notes.

A basic note application that uses an Express frontend to capture and manage notes, and mongodb to store notes.

A basic note application that uses React frontend to capture and manage notes, an api written in ExpressJS, and mongodb to store notes.

What is NoteWorx?

NoteWorx is a basic note management web application. This version of NoteWorx (Project 6), has been built using the latest ASP.NET Core 2.1, ASP.NET Core Identity, Entity Framework Core, and Postgresql.

NoteWorx provides the following features:

  • Add a note
  • Edit a note
  • Remove a note
  • List all notes
  • Find note by title or description

Developed With

The goal of this version of NoteWorx is to illustrate how one can build an end-to-end dotnetcore application entirely on a Linux OS. Therefore, the entire application was built using Visual Studio Code on Ubuntu 18.04. The following list is a summary of the primary tools, languages and frameworks used to build the application:

  • .NET Core - .NET Core is a free and open-source managed software framework for Linux, Windows and macOS.

  • C# - A multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.

  • ASP.NET Core - ASP.NET Core is a free, cross-platform, and open-source web framework

  • ASP.NET Core Identity - ASP.NET Core Identity is a membership system that adds login functionality to ASP.NET Core apps.

  • Entity Framework Core - EF Core is an object-relational mapper (O/RM) that enables .NET developers to work with a database using .NET objects. It eliminates the need for most of the data-access code that developers usually need to write.

  • Postgresql - Is an object-relational database management system with an emphasis on extensibility and standards compliance

  • Docker - Used to host Postgresql database

  • Docker-Compose - Compose is a tool for defining and running multi-container Docker applications.

  • Cake - Cake (C# Make) is a cross-platform build automation system with a C# DSL for tasks such as compiling code, copying files and folders, running unit tests, compressing files and building NuGet packages.

  • Bootstrap 4 - Build responsive, mobile-first projects

  • Gulp - Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Notable Nuget Packages

In addition to the aforementioned tools I want to make a special mention of 2 Nuget packages that I found very useful.

  • OdeToCode.UseNodeModules - ASP.NET Core middleware to serve files from the node_modules directory in the root of the project. This package enabled me to reference the 'node_modules' folder from within my Razor views. This is great for development. I have 'Gulp' tasks that copy the required packages from the 'node_modules' folder into the 'wwwroot' folder for production.

  • Humanizer.Core - Humanizer meets all your .NET needs for manipulating and displaying strings, enums, dates, times, timespans, numbers and quantities. This package enabled me to display date and times in a more "human friendly" manner. For example instead of display a date from 1 week ago in a date format, Humanizer takes the date and returns "1 Week ago" instead. Humanizer can be used for a whole lot more.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

  • Dotnet Core

Version 2.1.402 is required.

Run the following command from the terminal to verify version of dotnet:

  dotnet --version
Enter fullscreen mode Exit fullscreen mode
  • NodeJS

The following version of Node and Npm are required:

  • Node 8.x
  • Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

  node -v
  npm -v
Enter fullscreen mode Exit fullscreen mode
  • Docker

Version 18.06 is required.

Run the following command from the terminal to verify version of Docker:

  docker -v
Enter fullscreen mode Exit fullscreen mode

Install

Follow the following steps to get development environment running.

  1. Clone 'noteworx-aspnetcore' repository from GitHub 
   git clone https://github.com/drminnaar/noteworx-aspnetcore.git
Enter fullscreen mode Exit fullscreen mode

or using ssh

   git clone git@github.com:drminnaar/noteworx-aspnetcore.git
Enter fullscreen mode Exit fullscreen mode
  1. Install node modules 
   cd noteworx-aspnetcore/src/NoteWorx.Web
   npm install
Enter fullscreen mode Exit fullscreen mode

Build

There are 2 build options:

  • Build using dotnet CLI tool 
  cd noteworx-aspnetcore
  dotnet build
Enter fullscreen mode Exit fullscreen mode
  • Build using Cake build script 
  # linux terminal
  cd noteworx-aspnetcore
  ./build.sh
Enter fullscreen mode Exit fullscreen mode

In both cases, Gulp processes the "gulpfile.js" file. The gulp process prepares client assets to be included in wwwroot folder.

Run

The NoteWorx application is configured to seed it's database with test data. Therefore, to sign into the NoteWorx application, one can use any of the users that are specified in the '/NoteWorx.Web/Infrastructure/SeedFiles/users.json' file. The password for all users is 'P@ssword123!'.

Run NoteWorx Demo In Container Using Docker

If you would like to simply see the application running in demo mode, type the following command in the terminal at the root of the solution.

cd noteworx-aspnetcore
docker-compose -f ./docker-compose-demo.yml build
docker-compose -f ./docker-compose-demo.yml up
Enter fullscreen mode Exit fullscreen mode

The above command will build required image based on Dockerfile, setup a postgres database in a container, and setup pgAdmin (postges db tool) in a container.

To view the demo, type the following in your browser:

# To view the NoteWorx demo application
http://localhost:8080

# To open the database admin tool (pgAdmin)
http://localhost:8081
Enter fullscreen mode Exit fullscreen mode

When you're done running the demo, type the following command to stop and cleanup containers.

docker-compose -f ./docker-compose-demo.yml down
Enter fullscreen mode Exit fullscreen mode

Run NoteWorx From Source

Before running NoteWorx from source, you need to have a running Postgres database instance. For that you can type the following command to start a Postgres container and a pgAdmin container.

cd noteworx-aspnetcore
docker-compose -f ./docker-compose-data.yml -up
Enter fullscreen mode Exit fullscreen mode

Next, type the following to verify that the Postgres database has started in a container

# You should see a container having the name 'db-dev' by typing the following
docker container ls
Enter fullscreen mode Exit fullscreen mode

You will need to ensure you have the correct IP Address configured in the connection-string setting of the 'appsettings.Development.json' file. Therefore, type the following command to determine the IP Address of postgres container (db-dev).

# use the following putput IP address in connection string
docker container inspect | grep -w IPAddress
Enter fullscreen mode Exit fullscreen mode

Next, run the NoteWorx web applicatio

cd noteworx-aspnetcore/src/NoteWorx.Web
dotnet run
Enter fullscreen mode Exit fullscreen mode

After the application starts, open the web browser and type the following address:

http://localhost:5000
Enter fullscreen mode Exit fullscreen mode

When you're done running the application, type the following command to stop and cleanup containers.

docker-compose -f ./docker-compose-data.yml down
Enter fullscreen mode Exit fullscreen mode

Other

The online JSON data generator www.json-generator.com was used to generate all data used to seed the NoteWorx application.

Templates

The following templates were used to generate data.

User Template 

[
  '{{repeat(10)}}',
  {
    picture: 'http://placehold.it/32x32',
    age: '{{integer(20, 40)}}',
    name: '{{firstName()}} {{surname()}}',
    gender: '{{gender()}}',
    company: '{{company().toUpperCase()}}',
    email: '{{email()}}',
    phone: '+1 {{phone()}}',
    address: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}',
    about: '{{lorem(1, "paragraphs")}}'
  }
]
Enter fullscreen mode Exit fullscreen mode

Tag Template 

[
  '{{repeat(100)}}',
  {
    value: '{{lorem(1, "words")}}'
  }
]
Enter fullscreen mode Exit fullscreen mode

Note Template 

[
  '{{repeat(50)}}',
  {
    title: '{{lorem(random(3,4,5), "words")}}',
    description: '{{lorem(1, "paragraph")}}',
    createdAt: '{{date(new Date(2018, 0, 1), new Date(), "ISODateTimeTZ")}}',
    modifiedAt: function() {
      var createdDate = new Date(this.createdAt);
      var modifiedDate = new Date(createdDate);
      modifiedDate.setDate(createdDate.getDate() + Math.floor(Math.random() * Math.floor(10)));
      return modifiedDate;
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

Conclusion

Next I will be building NoteWorx using an Angular frontend that connects to an ASP.NET Core API using JWT tokens.

Top comments (0)

Read next

bobbyhalljr profile image

Random Image Generation and Caching in JavaScript

Bobby Hall Jr -

pvsdev profile image

How can one code line crash application? Looking for issues and vulnerabilities in ScreenToGif

Anastasiia Vorobeva -

jamir_hossain_8800f85fdd5 profile image

PHP OOP Part-2: Constructor and Destructor

Jamir Hossain -

jeremycmorgan profile image

How to Make a Retro 2D JavaScript Game Part 2

Jeremy Morgan -