DEV Community: Umesh Chaudhary

Getting Started with Styled Components in React: A comprehensive step by step guide.

Umesh Chaudhary — Sat, 17 Dec 2022 04:27:13 +0000

In this article we will learn how to make best use of styled components in React applications.

This article is originally posted at : uchaudhary.com.np

Introduction

Welcome to this comprehensive guide on Getting started with styled components in React!

Styled components is a popular library that allows you to style your React components using CSS-in-JS, making it easy to style individual components and keep your styles organized and modular.

This guide will walk you through the process of setting up and using styled components, including how to use props and themes to style components dynamically.
By the end of the guide, you should have a good understanding of how to use styled components in your React projects.

Why Styled component over traditional styling?

There are a few reasons why styled components may be a good choice over traditional CSS styles in a React project:

Modularity: With styled components, you can define your styles directly within your components, which makes it easy to keep your styles organized and modular. This can be especially useful in larger projects where you have a lot of components and need to keep your styles organized.
Reusability: Styled components are just React components, which means you can reuse them throughout your application just like any other component. This can save you time and make it easier to manage your styles.
Dynamic styling: Styled components allow you to use props to style your components dynamically. This can be useful if you want to change the appearance of a component based on certain conditions.
Easy to use: Styled components use a familiar syntax that is similar to CSS, making it easy to learn and use.
Better separation of concerns: With styled components, you can keep your styles and markup in the same file, which can make it easier to understand how your components are styled and how they fit into the overall layout of your application.

Overall, styled components can be a useful tool for styling your React components in a modular, reusable, and dynamic way.

Step 1: Install styled components

To use styled components in your React project, you'll first need to install the library. Open up your terminal and navigate to your project's root directory. Then, run the following command:

npm install styled-components@^5.3.6

Alternatively, if you're using yarn, you can run:

yarn add styled-components

This will install the styled components library in your project.

Step 2: Import styled components

Now that you have styled components installed, you can start using it in your project. First, you'll need to import the library into your component file.

At the top of your component file, add the following line:

import styled from 'styled-components'

This will give you access to the styled function, which you'll use to create your styled components.

Step 3: Create a styled component

To create a styled component, you'll use the styled function and pass it a HTML element or a pre-existing component. For example, to create a styled div element, you can do the following:

const StyledDiv = styled.div`
  background-color: red;
  color: white;
  font-size: 18px;
`

This creates a new component called StyledDiv that has the specified styles applied to it. You can then use this component like any other React component:

<StyledDiv>Hello, world!</StyledDiv>

This will generate the below output:

You can also style an existing component by passing the component as the first argument to the styled function. For example, let's say you have a Button component that you want to style. You can do the following:

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  font-size: 18px;
`

This will create a new StyledButton component that has the specified styles applied to it. You can then use this component like any other React component:

<StyledButton>Click me!</StyledButton>

This will generate the below output:

Step 4: Use props to style dynamically

One of the great things about styled components is that you can use props to style your components dynamically. For example, let's say you want to change the background color of your StyledButton component based on the type prop. You can do the following:

const StyledButton = styled.button`
  background-color: ${(props) => (props.type === 'primary' ? 'blue' : 'grey')};
  color: white;
  font-size: 18px;
`

Now you can use this component simply by:

<StyledButton type="primary">I am primary button</StyledButton>
<StyledButton>I am secondary button</StyledButton>

This will generate the below output:

Step 5: Use themes and global styles

Styled components also provides a way to define global styles and themes that can be used throughout your application.
To do this, you'll need to create a <ThemeProvider> component and wrap your application with it.

First, create a theme.js file and define your theme object:

export const theme = {
  primaryColor: 'blue',
  secondaryColor: 'grey',
  fontSize: '18px',
}

Then, in your root component, import the ThemeProvider component and wrap your application with it:

import { ThemeProvider } from 'styled-components'
import { theme } from './theme'

function App() {
  return <ThemeProvider theme={theme}>{/* Your application components go here */}</ThemeProvider>
}

Now, you can access the theme object in your styled components using the theme prop:

const StyledButton = styled.button`
  background-color: ${(props) =>
    props.type === 'primary' ? props.theme.primaryColor : props.theme.secondaryColor};
  color: white;
  font-size: ${(props) => props.theme.fontSize};
`

This basically will generate same output as before :

Conclusion

That's it!

You now know the basics of how to use styled components in your React applications.

Styled components is a powerful tool that makes it easy to style your components in a modular and organized way.
With the ability to use props to style dynamically and define global styles and themes, styled components gives you a lot of flexibility in how you style your components.

How to manage multiple Git accounts on one computer using SSH config

Umesh Chaudhary — Thu, 08 Dec 2022 13:20:59 +0000

In this article we will learn about how we can effortlessly switch between Git accounts on a single computer.

This article is originally written in my blog. Do show some love there as well : How to manage multiple Git accounts on one computer using SSH config

Problem Statement

If you have multiple Git accounts and you need to use them on a single computer, you may encounter issues with authenticating to the different accounts.

Why will i have multiple Git accounts?

There are several reasons why someone can have multiple Git accounts. Some common scenarios includes:

A developer who has a personal account for their own projects, and a separate account for their work projects.
A company that has a Git account for their internal projects, and a separate account for open-source projects.
A team of developers who share a single Git account for collaboration on a project, but each member also has their own personal account.
A developer who uses multiple Git hosting services (e.g. GitHub, GitLab, Bitbucket) and has a separate account for each service.
A developer who uses multiple Git accounts for different client projects, to keep their work separate and organized.

Ideal Solution

This article focuses on the SSH method as, HTTPS is very simple and uses traditional Username & password(token) for authentication.

Basically this is a two step solution:

Generate SSH Key pairs
Use SSH config file to manage multiple Git accounts

Let's see these steps in detail:

Generate SSH Key pairs

SSH keys are a secure and convenient way to authenticate with Git hosting services such as GitHub, GitLab, and Bitbucket.

To set up SSH keys for a Git account, you first need to generate a new SSH key pair.
This can be done using the ssh-keygen command.
For example, to generate a new SSH key pair for your first account, you can use the following command:

$ ssh-keygen -t rsa -b 4096 -C "personalemail@email.com"

This command will generate a new SSH key pair (private & public) with the specified email as the key comment.
The -t option specifies the type of key to generate (in this case, RSA),
and the -b option specifies the number of bits in the key (4096 bits is a recommended value).

Generally these keys have the naming convention as id_rsa and id_rsa.pub.
You need to add the public key to your Git hosting service account to be able to use the ssh key to manage the repository.

For example, if you are using GitHub, you can go to your GitHub profile settings, click on the "SSH and GPG keys" tab,
and then click on the "New SSH key" button. Paste the contents of the public key file (usually ~/.ssh/id_rsa.pub) into the "Key" field, and give the key a descriptive name (e.g. "Personal laptop").

Similarly, You can generate a separate SSH key pair for the second account by following command. You can use id_rsa_work as prefix for the work keys.

$ ssh-keygen -t rsa -b 4096 -C "workemail@email.com"

Add the public key to your Git hosting service account.

Use SSH config file to manage multiple Git accounts

The SSH config file is a hidden file (usually ~/.ssh/config) that allows you to define aliases for your Git hosting service accounts.
These aliases can be used in place of the full SSH URL when cloning or pushing to a repository,
which simplifies the process and makes it easier to switch between accounts.

If you don't have this file you can simply create one.

touch ~/.ssh/config

Add the following content in your SSH config file to define aliases for each of these accounts:

Host personal
  HostName github.com
  User gitUsername
  IdentityFile ~/.ssh/id_rsa

Host work
  HostName github.com
  User gitUsername
  IdentityFile ~/.ssh/id_rsa_work

This configuration defines two aliases: personal and work.
The HostName and User options specify the server and user for the Git hosting service, and the IdentityFile option specifies the path to the SSH key file for the account.

Finally, Once you have defined these aliases in your SSH config file,
you can use them to manage repositories using SSH URLs.

For example, to clone a repository using your personal account, you can use the following command:

$ git clone personal:username/repository.git

This command will clone the repository using the personal alias and the corresponding SSH key file (~/.ssh/id_rsa).
Similarly, to clone a repository using your work account, you can use the following command:

$ git clone work:username/repository.git

The below command can be used to change the remote url of existing git repository

$ git remote set-url origin personal:username/repository.git

The other commands can be simply used as you normally do.

$ git pull origin branchName // pull latest from  branchName
$ git push origin branchName //push to branchName

This way, you can use multiple Git accounts on a single computer without authentication errors, and you can easily switch between them when cloning repositories.

Thank you for reading the guide on managing multiple Git accounts on a single computer.
I hope that you found the information and examples in this guide helpful and useful.
If you have any questions or feedback, please don't hesitate to comment.

Happy Coding!

React forms with react-hook-form, tailwindcss and Yup for form input validation.

Umesh Chaudhary — Mon, 05 Dec 2022 14:54:19 +0000

In this tutorial, we will learn how to create a simple user registration form with React, react-hook-form, tailwindcss, and Yup. We will use the useForm hook from react-hook-form to manage the state of the form and to register and validate input fields. We will imlement Yup for input validation in the form and use the tailwind css to style the input fields.

Introduction

Forms are a common feature of many web applications, and creating one with the popular React JavaScript library and the react-hook-form library is a straightforward process.
In this tutorial, we'll walk through the steps to create a simple user registration form with three input fields: username, email, and password.
We'll use the latest version of react-hook-form (v7.40.0) and the tailwindcss(v3.0.23) CSS framework to style our form input fields.

Create project

First, let's create a new React project using the create-react-app command-line tool:

npx create-react-app my-user-registration-form

Installation

Next, we'll need to install the react-hook-form and tailwindcss packages using npm or yarn:

npm install react-hook-form@7.40.0 tailwindcss@3.0.23

yarn add react-hook-form@7.40.0 tailwindcss@3.0.23

Implementation

Once the packages are installed, we can import the useForm hook from react-hook-form in our UserRegistrationForm.jsx file:

import { useForm } from 'react-hook-form'

We'll use the useForm hook to manage the state of our form input fields and to perform input validation.

Next, let's create a UserRegistrationForm component that will render our user registration form.
Inside the UserRegistrationForm component, we'll use the useForm hook to initialize the form state and to register our input fields:

const UserRegistrationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()

  return (
    <div className="m-auto flex w-1/2 flex-col gap-4">
      <h1 className="bold text-2xl underline">Registration Form</h1>
      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
        <div className="input-wrapper flex flex-col">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            {...register('username', {
              required: 'Username is required',
              minLength: {
                value: 3,
                message: 'Username must be at least 3 characters',
              },
            })}
          />
          {errors.username && (
            <p className="text-xs italic text-red-500">{errors.username.message}</p>
          )}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            {...register('email', {
              required: 'Email is required',
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                message: 'Invalid email address',
              },
            })}
          />
          {errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            {...register('password', {
              required: 'Password is required',
              minLength: {
                value: 8,
                message: 'Password must be at least 8 characters',
              },
            })}
          />
          {errors.password && (
            <p className="text-xs italic text-red-500">{errors.password.message}</p>
          )}
        </div>
      </form>
    </div>
  )
}

export default UserRegistrationForm

We're using the register method provided by the useForm hook to register each input field.
We're also passing in validation rules for each field, which will be enforced when the form is submitted.

If the user enters an invalid value for any of the input fields, the errors object will contain an error message for that field, which we're rendering below each input field.

{
  errors.password && <p className="text-xs italic text-red-500">{errors.password.message}</p>
}

Finally, let's add a submit button to our form and handle the form submission in an onSubmit function:

<div className="input-wrapper">
  <button
    type="submit"
    className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
  >
    Submit
  </button>
</div>

const onSubmit = (data) => {
  console.log(data)
}

The onSubmit function will be called when the user submits the form, and it will receive the form data as an argument.
In this example, we're simply logging the form data to the console, but in a real application, you would likely use this data to create a new user in your database or send it to your server for further processing.

Here's the complete UserRegistrationForm component:

import React from 'react'
import { useForm } from 'react-hook-form'

const UserRegistrationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()

  // Form submission handler
  const onSubmit = (data) => {
    // Do something with the form data
  }

  return (
    <div className="m-auto flex w-1/2 flex-col gap-4">
      <h1 className="bold text-2xl underline">Registration Form</h1>
      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
        <div className="input-wrapper flex flex-col">
          <label htmlFor="username">Username</label>
          <input
            type="text"
            {...register('username', {
              required: 'Username is required',
              minLength: {
                value: 3,
                message: 'Username must be at least 3 characters',
              },
            })}
          />
          {errors.username && (
            <p className="text-xs italic text-red-500">{errors.username.message}</p>
          )}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="email">Email</label>
          <input
            type="email"
            {...register('email', {
              required: 'Email is required',
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                message: 'Invalid email address',
              },
            })}
          />
          {errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="password">Password</label>
          <input
            type="password"
            {...register('password', {
              required: 'Password is required',
              minLength: {
                value: 8,
                message: 'Password must be at least 8 characters',
              },
            })}
          />
          {errors.password && (
            <p className="text-xs italic text-red-500">{errors.password.message}</p>
          )}
        </div>

        <div className="input-wrapper">
          <button
            type="submit"
            className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
          >
            Submit
          </button>
        </div>
      </form>
    </div>
  )
}

export default UserRegistrationForm

To use the UserRegistrationForm component in our App component, we can simply import it and render it in the App component's render method:

import UserRegistrationForm from './UserRegistrationForm'

function App() {
  return (
    <div className="App">
      <UserRegistrationForm />
    </div>
  )
}

And that's it! We now have a fully-functioning user registration form with three input fields and input validation using the react-hook-form and tailwindcss libraries.
You can further customize the form and its input fields by using the various styling options provided by tailwindcss.

Yup implementation

Another option for input validation in a React form is to use the Yup package.
Yup is a JavaScript schema builder for value parsing and validation.
It can be used with react-hook-form to provide a simple and straightforward way to validate input fields in a form.

To use Yup with react-hook-form, you will first need to install the Yup package:

npm install yup
npm install @hookform/resolvers@2.9.10

or with yarn

yarn add yup
yarn add @hookform/resolvers@2.9.10

Once the package is installed, you can import the object method from Yup in your UserRegistrationForm component:

import { object, string } from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'

Next, we'll create a Yup validation schema for our user registration form.
The schema will define the rules for each input field and the error messages that should be displayed if the user enters an invalid value for that field:
Yupresolver is used to tell the form to use yup schema instead of the builtin methods for validation.

const validationSchema = object().shape({
  username: string()
    .required('Username is required')
    .min(3, 'Username must be at least 3 characters'),
  email: string().required('Email is required').email('Invalid email address'),
  password: string()
    .required('Password is required')
    .min(8, 'Password must be at least 8 characters'),
})

We can now use the useForm hook to initialize the form state and to register our input fields, passing in the validation schema as an option in resolver:

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  resolver: yupResolver(validationSchema),
})

Now we can just simply remove the inbuilt validation from the input field.

<input
  type="text"
  {...register('username', {
    required: 'Username is required',
    minLength: {
      value: 3,
      message: 'Username must be at least 3 characters',
    },
  })}
/>

<input type="text" {...register('username')} />

Final UserRegistrationForm components looks like this:

import React from 'react'
import { useForm } from 'react-hook-form'
import { object, string } from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'

const UserRegistrationForm = () => {
  const validationSchema = object().shape({
    username: string()
      .required('Username is required')
      .min(3, 'Username must be at least 3 characters'),
    email: string().required('Email is required').email('Invalid email address'),
    password: string()
      .required('Password is required')
      .min(8, 'Password must be at least 8 characters'),
  })

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(validationSchema),
  })

  // Form submission handler
  const onSubmit = (data) => {
    // Do something with the form data
  }

  return (
    <div className="m-auto flex w-1/2 flex-col gap-4">
      <h1 className="bold text-2xl underline">Registration Form</h1>
      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
        <div className="input-wrapper flex flex-col">
          <label htmlFor="username">Username</label>
          <input type="text" {...register('username')} />
          {errors.username && (
            <p className="text-xs italic text-red-500">{errors.username.message}</p>
          )}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="email">Email</label>
          <input type="email" {...register('email')} />
          {errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
        </div>

        <div className="input-wrapper flex flex-col">
          <label htmlFor="password">Password</label>
          <input type="password" {...register('password')} />
          {errors.password && (
            <p className="text-xs italic text-red-500">{errors.password.message}</p>
          )}
        </div>

        <div className="input-wrapper">
          <button
            type="submit"
            className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
          >
            Submit
          </button>
        </div>
      </form>
    </div>
  )
}

export default UserRegistrationForm

Using Yup for input validation in a React form is a simple and elegant way to enforce validation rules and display error messages.
It provides a declarative and intuitive syntax for defining validation rules, and it integrates seamlessly with react-hook-form.

Screenshots

I hope this tutorial has been helpful in showing you how to create a user registration form with react-hook-form, tailwindcss and yup.
Here is the link for the following code : Gist to UserRegistrationForm

Happy coding!

Unlock django super powers with Django Extensions

Umesh Chaudhary — Sun, 02 Oct 2022 19:20:36 +0000

Django Extensions provides various features collection of custom extensions for the Django Framework. These include shell_plus, management commands, additional database fields, admin extensions e.t.c.

Installation

As of now django-extension is of version 3.2.1. Install it with command:

pip3 install django-extensions

Configuration

Add the django_extensions package to the INSTALLED_APPS section of the settings.py file.:

INSTALLED_APPS = (
  ...
  'django_extensions',
)

This will make sure django-extensions is loaded when the app is started.

Features

Now let's look the features in detail.
This extension consist of various management/shell commands.

1. Shell Plus

It is a enhanced version of django shell. It autoloads all the models to the shell.
The following command can be used to fireup the shell_plus.

./manage.py shell_plus

We can configure Shell plus to use to use either ipython, bpython, ptpython or plain shell.
In the settings.py add the following below:

# Always use IPython for shell_plus
SHELL_PLUS = "ipython"

Example Screenshot:

Read more about the shell_plus from here.

2. Delete Squashed Migrations

Squashed migrations is a way to merge multiple migrations to single one.
The below command squashes migrations of blog app from 0001 through 0008.

./manage.py squashmigrations blog 0001 0008

This will generate a new squashed migration. Here is how the file structure looks right now.

├── 0001_initial.py
├── 0001_initial_squashed_0008_blogcomment_parent.py
├── 0002_blog_markdown_body.py
├── 0003_alter_blog_markdown_body.py
├── 0004_blog_views.py
├── 0005_blog_table_of_content.py
├── 0006_remove_blog_body_remove_blog_table_of_content.py
├── 0007_bloglikes_blogcomment.py
├── 0008_blogcomment_parent.py

Then the following command clean ups the migrations that are no needed.

# Delete leftover migrations from the first squashed migration found in blog
./manage.py delete_squashed_migrations blog

After this the file structure will only contain the squashed file deleting other migrations.

0001_initial_squashed_0008_blogcomment_parent.py

3. Export emails

The following command exports the registered user emails to a file.

./manage.py export_emails > emails.txt

The emails.txt File will consists of something similar as below.

"admin" <admin@gmail.com>;
"anonymous@gmail.com" <anonymous@gmail.com>;
"anotherone@gmail.com" <anotherone@gmail.com>;
"commenter@gmail.com" <commenter@gmail.com>;
"comment@gmail.com" <comment@gmail.com>;
"commenting@gmail.com" <commenting@gmail.com>;
"email@gmail.com" <email@gmail.com>;
"gamerboy@gmail.com" <gamerboy@gmail.com>;
"gumail@gmail.com" <gumail@gmail.com>;
"mycomment@gmail.com" <mycomment@gmail.com>;
"myemail@gmail.com" <myemail@gmail.com>;
"python@gmail.com" <python@gmail.com>;
"realadmin@gmail.com" <realadmin@gmail.com>;
"reply@gmail.com" <reply@gmail.com>;
"replying@gmail.com" <replying@gmail.com>;
"sdfsdfsd@gmail.com" <sdfsdfsd@gmail.com>;
"sdsf@gmail.com" <sdsf@gmail.com>;
"someemail@gmail.com" <someemail@gmail.com>;
"test@gmail.com" <test@gmail.com>;
"testing@gmail.com" <testing@gmail.com>;
"testingmarkdown@gmail.com" <testingmarkdown@gmail.com>;
"tryingfocus@gmail.com" <tryingfocus@gmail.com>;
"Umesh" <umesschaudhary@gmail.com>;

4. Generate Password

The following command will generate a random password for provided length.

./manage.py generate_password --length=8

This uses Django core’s default password generator

5. Graph models

With django-extensions installed we can create an image of the database schema and relations by using the graph_models command:

./manage.py graph_models -a -o models.png

It requires either pygraphviz or pydotplus package to generate the graphs.

pip3 install pygraphviz

Also, the following packages is required to be installed on ur system.

apt-get -y install graphviz graphviz-dev #on debian system

It will generate a png file that looks like this.

Read more about it from here.

6. Reset db

The following command will run DROP DATABASE and CREATE DATABASE thus resetting the database.

./manage.py reset_db --noinput

7. Admin generator

The following command will generate the admin code on console. Then they can be used on the admin.py file.

python manage.py admin_generator blog

That's a wrap

Furthermore there is more that django-extensions provides. Here is the official documentation that you can go through.

Happy Learning!

Integrating Django Admin with Markdown Editor

Umesh Chaudhary — Thu, 15 Sep 2022 19:22:38 +0000

Django-mdeditor is Markdown Editor plugin application for django base on Editor.md.

Features

Almost Editor.md features
- Support Standard Markdown / CommonMark and GFM (GitHub Flavored Markdown);
- Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Search replace, Themes, Multi-languages;
- Markdown Extras : Support ToC (Table of Contents), Emoji;
- Support TeX (LaTeX expressions, Based on KaTeX), Flowchart and Sequence Diagram of Markdown extended syntax;
Can constom Editor.md toolbar
The MDTextField field is provided for the model and can be displayed directly in the django admin.
The MDTextFormField is provided for the Form and ModelForm.
The MDEditorWidget is provided for the Admin custom widget.

Installation

As of now django-mdeditor is up to v0.1.20

pip install django-mdeditor

Configuration

Add the mdeditor to INSTALLED_APPS allowing it to be available to use on the app.



#settings.py

INSTALLED_APPS = [
    ...
    'mdeditor',
]

At the end of the settings.py file add the below configuration. You can modify according to your need. See official docs for reference.



#settings.py

# add frame settings for django3.0+ like this：
X_FRAME_OPTIONS = 'SAMEORIGIN'

MDEDITOR_CONFIGS = {
    'default': {
        'width': '100% ',  # Custom edit box width
        'height': 700,  # Custom edit box height
        'toolbar': ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime",
                    "emoji", "html-entities", "pagebreak", "goto-line", "|",
                    "help", "info",
                    "||", "preview", "watch", "fullscreen"],  # custom edit box toolbar
        # image upload format type
        'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp", "svg"],
        'image_folder': 'editor',  # image save the folder name
        'theme': 'default',  # edit box theme, dark / default
        'preview_theme': 'default',  # Preview area theme, dark / default
        'editor_theme': 'default',  # edit area theme, pastel-on-dark / default
        'toolbar_autofixed': False,  # Whether the toolbar capitals
        'search_replace': True,  # Whether to open the search for replacement
        'emoji': True,  # whether to open the expression function
        'tex': True,  # whether to open the tex chart function
        'flow_chart': True,  # whether to open the flow chart function
        'sequence': True,  # Whether to open the sequence diagram function
        'watch': True,  # Live preview
        'lineWrapping': True,  # lineWrapping
        'lineNumbers': True,  # lineNumbers
        'language': 'en'  # zh / en / es
    }
}

# enabling media uploads
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'

Update urls.py to add the url



from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
    url(r'mdeditor/', include('mdeditor.urls'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Usage

Add MDTextField to the to the model field you want to enable markdown editor.



from mdeditor.fields import MDTextField

class Blog(models.Model):
    """Blog model """
    ...
    body = MDTextField(null=True, blank=True)

Migrate to reflect changes

python3 manage.py makemigrations && python3 manage.py migrate

That's it now login to the admin panel to see in action.

Voila!

Thank you for reading out! Hope this has helped anyone trying to enable markdown editor to their admin panel.

Happy Learning!

Blog Project with Go, Gin, MySQL and Docker - Part 3

Umesh Chaudhary — Sat, 28 Aug 2021 07:50:15 +0000

We have left off part 2 by creating the blog apis. In this article we will design the User struct and implement User authentication. We will be using JWT token for authentication.

Do make sure you have gone through Part 2 and Part 1.

Note : All codes for this series can be found on this repo. Please checkout to branch
part-3 by git checkout part-3 to get code for this article.

Create user apis and authentication
- Designing user struct
- Hash and compare hashed password
- User register and login repositories
- User register and login services
- User register and login controllers
- User register and login routes
Configure main.go
API demo
Wrap up

Create user apis and authentication

Designing user struct

Inside models folder add a user.go file with below contents.

package models
import "time"

//User -> User struct to save user on database
type User struct {
    ID        int64     `gorm:primary_key;auto_increment;json:id`
    FirstName string    `json:"first_name"`
    LastName  string    `json:"last_name"`
    Email     string    `json:"email"`
    Password  string    `json:"password"`
    IsActive  bool      `json:"is_active"`
    CreatedAt time.Time `json:"created_at", omitempty`
    UpdatedAt time.Time `json:"updated_at", omitempty`
}

//TableName -> returns the table name of User Model
func (user *User) TableName() string {
    return "user"
}

//UserLogin -> Request Binding for User Login
type UserLogin struct {
    Email    string `form:"email" binding:"required"`
    Password string `form:"password" binding:"required"`
}

//UserRegister -> Request Binding for User Register
type UserRegister struct {
    Email     string `form:"email" json:"email" binding:"required"`
    Password  string `form:"password" json:"password" binding:"required"`
    FirstName string `form:"first_name"`
    LastName  string `form:"last_name"`
}

//ResponseMap -> response map method of User
func (user *User) ResponseMap() map[string]interface{} {
    resp := make(map[string]interface{})
    resp["id"] = user.ID
    resp["email"] = user.Email
    resp["first_name"] = user.FirstName
    resp["last_name"] = user.LastName
    resp["is_active"] = user.IsActive
    resp["created_at"] = user.CreatedAt
    resp["updated_at"] = user.UpdatedAt
    return resp
}

Hash and compare hashed password

For the security purpose we will encrypt hashed password on database. Execute
go get golang.org/x/crypto/bcrypt on the command line to install the bcrypt package. Create util/password.go file and add the following code.

Note : A project directory structure is shown down below

package util
import "golang.org/x/crypto/bcrypt"

func HashPassword(password string) (string, error) {
    bytes, err := bcrypt.GenerateFromPassword([]byte(password), 14)
    return string(bytes), err
}

func CheckPasswordHash(password string, hash string) error {
    err := bcrypt.CompareHashAndPassword([]byte(hash), []byte(password))
    return err
}

User register and login repositories

Add the api/repository/user.go file and add the following code.

package repository

import (
    "blog/infrastructure"
    "blog/models"
    "blog/util"
)

//UserRepository -> UserRepository resposible for accessing database
type UserRepository struct {
    db infrastructure.Database
}

//NewUserRepository -> creates a instance on UserRepository
func NewUserRepository(db infrastructure.Database) UserRepository {
    return UserRepository{
        db: db,
    }
}

//CreateUser -> method for saving user to database
func (u UserRepository) CreateUser(user models.UserRegister) error {

    var dbUser models.User
    dbUser.Email = user.Email
    dbUser.FirstName = user.FirstName
    dbUser.LastName = user.LastName
    dbUser.Password = user.Password
    dbUser.IsActive = true
    return u.db.DB.Create(&dbUser).Error
}

//LoginUser -> method for returning user
func (u UserRepository) LoginUser(user models.UserLogin) (*models.User, error) {

    var dbUser models.User
    email := user.Email
    password := user.Password

    err := u.db.DB.Where("email = ?", email).First(&dbUser).Error
    if err != nil {
        return nil, err
    }

    hashErr := util.CheckPasswordHash(password, dbUser.Password)
    if hashErr != nil {
        return nil, hashErr
    }
    return &dbUser, nil
}

Here dbUser.IsActive = true this might seems a little bit off ? No, this is on purpose for now. Later on upcoming part we will implement User confirmation via email.

User register and login services

Add the api/service/user.go file and add the following code.

package service
import (
    "blog/api/repository"
    "blog/models"
)

//UserService UserService struct
type UserService struct {
    repo repository.UserRepository
}

//NewUserService : get injected user repo
func NewUserService(repo repository.UserRepository) UserService {
    return UserService{
        repo: repo,
    }
}

//Save -> saves users entity
func (u UserService) CreateUser(user models.UserRegister) error {
    return u.repo.CreateUser(user)
}

//Login -> Gets validated user
func (u UserService) LoginUser(user models.UserLogin) (*models.User, error) {
    return u.repo.LoginUser(user)

}

User register and login controllers

Install jwt package by go get github.com/golang-jwt/jwt this package will be used to issue JWT Token. Add the api/controller/user.go file and add the following.

package controller

import (
    "blog/api/service"
    "blog/models"
    "blog/util"
    "net/http"
    "time"

    "github.com/gin-gonic/gin"
    "github.com/golang-jwt/jwt"
)

//UserController struct
type UserController struct {
    service service.UserService
}

//NewUserController : NewUserController
func NewUserController(s service.UserService) UserController {
    return UserController{
        service: s,
    }
}

//CreateUser ->  calls CreateUser services for validated user
func (u *UserController) CreateUser(c *gin.Context) {
    var user models.UserRegister
    if err := c.ShouldBind(&user); err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Inavlid Json Provided")
        return
    }

    hashPassword, _ := util.HashPassword(user.Password)
    user.Password = hashPassword

    err := u.service.CreateUser(user)
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Failed to create user")
        return
    }

    util.SuccessJSON(c, http.StatusOK, "Successfully Created user")
}

//LoginUser : Generates JWT Token for validated user
func (u *UserController) Login(c *gin.Context) {
    var user models.UserLogin
    var hmacSampleSecret []byte
    if err := c.ShouldBindJSON(&user); err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Inavlid Json Provided")
        return
    }
    dbUser, err := u.service.LoginUser(user)
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Invalid Login Credentials")
        return
    }
    token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
        "user": dbUser,
        "exp":  time.Now().Add(time.Minute * 15).Unix(),
    })

    tokenString, err := token.SignedString(hmacSampleSecret)
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Failed to get token")
        return
    }
    response := &util.Response{
        Success: true,
        Message: "Token generated sucessfully",
        Data:    tokenString,
    }
    c.JSON(http.StatusOK, response)
}

User register and login routes

Finally, we have come to the part where we can expose the register and login apis.
Add the following code to api/routes/user.go .

package routes

import (
    "blog/api/controller"
    "blog/infrastructure"
)

//UserRoute -> Route for user module
type UserRoute struct {
    Handler    infrastructure.GinRouter
    Controller controller.UserController
}

//NewUserRoute -> initializes new instance of UserRoute
func NewUserRoute(
    controller controller.UserController,
    handler infrastructure.GinRouter,
) UserRoute {
    return UserRoute{
        Handler:    handler,
        Controller: controller,
    }
}

//Setup -> setups user routes
func (u UserRoute) Setup() {
    user := u.Handler.Gin.Group("/auth")
    {
        user.POST("/register", u.Controller.CreateUser)
        user.POST("/login", u.Controller.LoginUser)
    }
}

The above code will configure user authentication routes register and login.

Configure main.go

Now, final piece of code is to update main.go file, gluing all things together.

package main
import (
    "blog/api/controller"
    "blog/api/repository"
    "blog/api/routes"
    "blog/api/service"
    "blog/infrastructure"
    "blog/models"
)

func init() {
    infrastructure.LoadEnv()
}

func main() {

    router := infrastructure.NewGinRouter()
    db := infrastructure.NewDatabase()

    postRepository := repository.NewPostRepository(db)
    postService := service.NewPostService(postRepository)
    postController := controller.NewPostController(postService)
    postRoute := routes.NewPostRoute(postController, router)
    postRoute.Setup()

    // add up these 
    userRepository := repository.NewUserRepository(db)
    userService := service.NewUserService(userRepository)
    userController := controller.NewUserController(userService)
    userRoute := routes.NewUserRoute(userController, router)
    userRoute.Setup()

    db.DB.AutoMigrate(&models.Post{}, &models.User{})

    router.Gin.Run(":8000")
}

API demo

It's time to spin up the server and test out register and login apis.

docker-compose up --build

Now, Bring up your favorite API Tester application. I will be using postman

Testing `register` endpoint -> `/auth/register`

Testing `login` endpoint -> `/auth/login`

verify on token on jwt.io

Wrap Up

Next up, Upcoming Part 4 will cover the following :

Adding user to blog
Apis of related user posts
and many more

Important Links :

Link to part 2 : Blog with Go, Gin, MySQL and Docker Part 2
Link to part 1 : Blog with Go, Gin, MySQL and Docker Part 1
Repository Link: Github
Read about Clean Architecture: Clean Architecture

Thanks a lot! A feedback is really appreciated. I am on Linkedin. Let's connect.

Happy reading !!!

Blog with Go, Gin, MySQL and Docker - Part 2

Umesh Chaudhary — Sun, 30 May 2021 07:08:16 +0000

Welcome to Part 2 of the Blog Project with Go, Gin, MySQL and Docker. Do make sure you have followed part 1, Here is the link.

Contents :

Architecture
Getting Started
- Designing Models
- Adding Repository Layer
- Adding Service Layer
- Adding Controller Layer
- Adding Utils
- Adding Routes
- Main Router
- Gluing All Things Together
Test APIs
Wrap Up

The respective repository can be found here. Clone the project Check out to branch part-2 by git checkout part-2 .

Architecture

We will be following Clean Architecture for this Blog Project. Clean architecture is art of writing software applications in a layered fashion. Please do read this article for more detailed information as all layers (repository, controller e.t.c ) are explained there. Following is the overview of the project that follows clean architecture and this is what you are going to follow. Isn't it awesome?

├── api 
│   ├── controller
│   │   └── post.go
│   ├── repository
│   │   └── post.go
│   ├── routes
│   │   └── post.go
│   └── service
│       └── post.go
├── docker-compose.yml
├── Dockerfile
├── go.mod
├── go.sum
├── infrastructure
│   ├── db.go
│   ├── env.go
│   └── routes.go
├── main
├── main.go
├── models
│   └── post.go
└── util
    └── response.go

Getting Started :

Designing Models

Create a folder models in project directory. Inside the models folder create a blog.go file and add following code

package models
import "time"

//Post Post Model
type Post struct {
    ID        int64     `gorm:"primary_key;auto_increment" json:"id"`
    Title     string    `gorm:"size:200" json:"title"`
    Body      string    `gorm:"size:3000" json:"body" `
    CreatedAt time.Time `json:"created_at,omitempty"`
    UpdatedAt time.Time `json:"updated_at,omitempty"`
}

// TableName method sets table name for Post model
func (post *Post) TableName() string {
    return "post"
}

//ResponseMap -> response map method of Post
func (post *Post) ResponseMap() map[string]interface{} {
    resp := make(map[string]interface{})
    resp["id"] = post.ID
    resp["title"] = post.Title
    resp["body"] = post.Body
    resp["created_at"] = post.CreatedAt
    resp["updated_at"] = post.UpdatedAt
    return resp
}

We are defining Blog model which later gets converted into database table (gorm does this for us). TableName method sets a blog as a table name in the database for the Blog struct. ResponseMap is used to return response from Succesfull API calls. I assume you are familiar with Struct and methods in go.

Adding Repository Layer

This layer is the one that interacts and performs CRUD operations on the database.
Create a folder api on the project directory. Inside api folder create repository folder. Inside the repository folder create a blog.go file. The structure should look like this api -> repository -> blog.go. You can always refer to architecture section for project structure reference.

package repository
import (
    "blog/infrastructure"
    "blog/models"
)

//PostRepository -> PostRepository
type PostRepository struct {
    db infrastructure.Database
}

// NewPostRepository : fetching database
func NewPostRepository(db infrastructure.Database) PostRepository {
    return PostRepository{
        db: db,
    }
}

//Save -> Method for saving post to database
func (p PostRepository) Save(post models.Post) error {
    return p.db.DB.Create(&post).Error
}

//FindAll -> Method for fetching all posts from database
func (p PostRepository) FindAll(post models.Post, keyword string) (*[]models.Post, int64, error) {
    var posts []models.Post
    var totalRows int64 = 0

    queryBuider := p.db.DB.Order("created_at desc").Model(&models.Post{})

    // Search parameter
    if keyword != "" {
        queryKeyword := "%" + keyword + "%"
        queryBuider = queryBuider.Where(
            p.db.DB.Where("post.title LIKE ? ", queryKeyword))
    }

    err := queryBuider.
        Where(post).
        Find(&posts).
        Count(&totalRows).Error
    return &posts, totalRows, err
}

//Update -> Method for updating Post
func (p PostRepository) Update(post models.Post) error {
    return p.db.DB.Save(&post).Error
}

//Find -> Method for fetching post by id
func (p PostRepository) Find(post models.Post) (models.Post, error) {
    var posts models.Post
    err := p.db.DB.
        Debug().
        Model(&models.Post{}).
        Where(&post).
        Take(&posts).Error
    return posts, err
}

//Delete Deletes Post
func (p PostRepository) Delete(post models.Post) error {
    return p.db.DB.Delete(&post).Error
}

Let's explain above codes:

PostRepository : PostRepository struct has a db field which is a type of infrastructure.Database; which infact is a gorm database type. Infrastructure's Database part has been covered up in Part 1.
NewPostRepository : NewPostRepository takes database as argument and returns PostRepository. Database argument is provided while initializing the server on main.go file.
** Save/FindAll/Find/Update/Delete ** : Perform CRUD operation to database using gorm ORM.

Adding Service Layer

This layer manages the communication between the inner and outer layers (Repository and Controller layers ). More detail here. Inside api folder create service folder. Inside the service folder create a blog.go file. The structure should look like this api -> service -> blog.go.Refer to architecture section for the structure.

package service

import (
    "blog/api/repository"
    "blog/models"
)

//PostService PostService struct
type PostService struct {
    repository repository.PostRepository
}

//NewPostService : returns the PostService struct instance
func NewPostService(r repository.PostRepository) PostService {
    return PostService{
        repository: r,
    }
}

//Save -> calls post repository save method
func (p PostService) Save(post models.Post) error {
    return p.repository.Save(post)
}

//FindAll -> calls post repo find all method
func (p PostService) FindAll(post models.Post, keyword string) (*[]models.Post, int64, error) {
    return p.repository.FindAll(post, keyword)
}

// Update -> calls postrepo update method
func (p PostService) Update(post models.Post) error {
    return p.repository.Update(post)
}

// Delete -> calls post repo delete method
func (p PostService) Delete(id int64) error {
    var post models.Post
    post.ID = id
    return p.repository.Delete(post)
}

// Find -> calls post repo find method
func (p PostService) Find(post models.Post) (models.Post, error) {
    return p.repository.Find(post)
}

Let's explain above codes:

PostService : PostService struct has repository field which is a type to PostRepository allowing access to PostRepository methods.
NewPostService : NewPostService takes PostRepository as argument and returns PostService allowing all PostRepository methods.
** Save/FindAll/Find/Update/Delete ** : Calls respective repository methods.

Adding Controller Layer

This layer is used to grab the user input and process them or pass them to other layers. More about controllers here. But before adding code for the controller layer let's add some utilities which are used to return responses on sucessfull API calls.

Adding Utils

Create a util folder on project directory and a file response.go inside it. The structure should look like util -> response.go.

package util

import "github.com/gin-gonic/gin"

// Response struct
type Response struct {
    Success bool        `json:"success"`
    Message string      `json:"message"`
    Data    interface{} `json:"data"`
}

// ErrorJSON : json error response function
func ErrorJSON(c *gin.Context, statusCode int, data interface{}) {
    c.JSON(statusCode, gin.H{"error": data})
}

// SuccessJSON : json error response function
func SuccessJSON(c *gin.Context, statusCode int, data interface{}) {
    c.JSON(statusCode, gin.H{"msg": data})
}

Response : Response is to return JSON Formatted success message with Struct data, here Blog data as of now.
ErrorJSON : ErrorJSON is used to return JSON Formatted error response
SuccessJSON : SuccessJSON is used to return JSON Formatted success message.

Create a controller folder inside api folder and blog.go file inside controller folder. Project structure folder should looks like api -> controller -> blog.go.

package controller

import (
    "blog/api/service"
    "blog/models"
    "blog/util"
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
)

//PostController -> PostController
type PostController struct {
    service service.PostService
}

//NewPostController : NewPostController
func NewPostController(s service.PostService) PostController {
    return PostController{
        service: s,
    }
}

// GetPosts : GetPosts controller
func (p PostController) GetPosts(ctx *gin.Context) {
    var posts models.Post

    keyword := ctx.Query("keyword")

    data, total, err := p.service.FindAll(posts, keyword)

    if err != nil {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Failed to find questions")
        return
    }
    respArr := make([]map[string]interface{}, 0, 0)

    for _, n := range *data {
        resp := n.ResponseMap()
        respArr = append(respArr, resp)
    }

    ctx.JSON(http.StatusOK, &util.Response{
        Success: true,
        Message: "Post result set",
        Data: map[string]interface{}{
            "rows":       respArr,
            "total_rows": total,
        }})
}

// AddPost : AddPost controller
func (p *PostController) AddPost(ctx *gin.Context) {
    var post models.Post
    ctx.ShouldBindJSON(&post)

    if post.Title == "" {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Title is required")
        return
    }
    if post.Body == "" {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Body is required")
        return
    }
    err := p.service.Save(post)
    if err != nil {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Failed to create post")
        return
    }
    util.SuccessJSON(ctx, http.StatusCreated, "Successfully Created Post")
}

//GetPost : get post by id
func (p *PostController) GetPost(c *gin.Context) {
    idParam := c.Param("id")
    id, err := strconv.ParseInt(idParam, 10, 64) //type conversion string to int64
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "id invalid")
        return
    }
    var post models.Post
    post.ID = id
    foundPost, err := p.service.Find(post)
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Error Finding Post")
        return
    }
    response := foundPost.ResponseMap()

    c.JSON(http.StatusOK, &util.Response{
        Success: true,
        Message: "Result set of Post",
        Data:    &response})

}

//DeletePost : Deletes Post
func (p *PostController) DeletePost(c *gin.Context) {
    idParam := c.Param("id")
    id, err := strconv.ParseInt(idParam, 10, 64) //type conversion string to uint64
    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "id invalid")
        return
    }
    err = p.service.Delete(id)

    if err != nil {
        util.ErrorJSON(c, http.StatusBadRequest, "Failed to delete Post")
        return
    }
    response := &util.Response{
        Success: true,
        Message: "Deleted Sucessfully"}
    c.JSON(http.StatusOK, response)
}

//UpdatePost : get update by id
func (p PostController) UpdatePost(ctx *gin.Context) {
    idParam := ctx.Param("id")

    id, err := strconv.ParseInt(idParam, 10, 64)

    if err != nil {
        util.ErrorJSON(ctx, http.StatusBadRequest, "id invalid")
        return
    }
    var post models.Post
    post.ID = id

    postRecord, err := p.service.Find(post)

    if err != nil {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Post with given id not found")
        return
    }
    ctx.ShouldBindJSON(&postRecord)

    if postRecord.Title == "" {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Title is required")
        return
    }
    if postRecord.Body == "" {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Body is required")
        return
    }

    if err := p.service.Update(postRecord); err != nil {
        util.ErrorJSON(ctx, http.StatusBadRequest, "Failed to store Post")
        return
    }
    response := postRecord.ResponseMap()

    ctx.JSON(http.StatusOK, &util.Response{
        Success: true,
        Message: "Successfully Updated Post",
        Data:    response,
    })
}

Let's explain above codes:

PostController : PostController struct has service field which is a type to PostService allowing access to PostService methods.
NewPostController : NewPostController takes PostService as argument and returns PostController allowing all PostController methods which are leveraged on controller.
** GetPosts/AddPost/GetPost/DeletePost/UpdatePost ** : User Input are grabbed/ validated / processed / Service layers are called (which calls Repository methods; performing database operations) / and responses are returned by utility response functions.

Adding Routes

Till now we have created foundational part of the APIs. Let's create endpoints by adding routes.

package routes

import (
    "blog/api/controller"
    "blog/infrastructure"
)

//PostRoute -> Route for question module
type PostRoute struct {
    Controller controller.PostController
    Handler    infrastructure.GinRouter
}

//NewPostRoute -> initializes new choice rouets
func NewPostRoute(
    controller controller.PostController,
    handler infrastructure.GinRouter,

) PostRoute {
    return PostRoute{
        Controller: controller,
        Handler:    handler,
    }
}

//Setup -> setups new choice Routes
func (p PostRoute) Setup() {
    post := p.Handler.Gin.Group("/posts") //Router group
    {
        post.GET("/", p.Controller.GetPosts)
        post.POST("/", p.Controller.AddPost)
        post.GET("/:id", p.Controller.GetPost)
        post.DELETE("/:id", p.Controller.DeletePost)
        post.PUT("/:id", p.Controller.UpdatePost)
    }
}

Let's explain above codes:

PostRoute : PostRoute struct has Controller and Handler fields. Controller is a type of PostController and Handler is of type Gin Router. Gin Router here is used to create router group which is used later to create endpoint.s
- NewPostRoute : NewPostRoute takes Controller and Handlre as arguments and returns PostRoute struct allowing access to PostController and Gin Router.
** Setup ** : Setup method is used to configure endpoint for post APIs.

Main Router

Let's create a function to create and return Gin Router.
Create a routes.go file inside infrastructure folder. It should look like infrastructure -> routes.go.

package infrastructure

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

//GinRouter -> Gin Router
type GinRouter struct {
    Gin *gin.Engine
}

//NewGinRouter all the routes are defined here
func NewGinRouter() GinRouter {

    httpRouter := gin.Default()

    httpRouter.GET("/", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{"data": "Up and Running..."})
    })
    return GinRouter{
        Gin: httpRouter,
    }

}

The above code configures and returns a Default Gin Router instance.

Gluing All Things Together

The foundational part has been now completed. The only part left is to glue things together. Edit main.go file with following code

package main

import (
    "blog/api/controller"
    "blog/api/repository"
    "blog/api/routes"
    "blog/api/service"
    "blog/infrastructure"
    "blog/models"
)

func init() {
    infrastructure.LoadEnv()
}

func main() {

    router := infrastructure.NewGinRouter() //router has been initialized and configured
    db := infrastructure.NewDatabase() // databse has been initialized and configured
    postRepository := repository.NewPostRepository(db) // repository are being setup
    postService := service.NewPostService(postRepository) // service are being setup
    postController := controller.NewPostController(postService) // controller are being set up
    postRoute := routes.NewPostRoute(postController, router) // post routes are initialized
    postRoute.Setup() // post routes are being setup

    db.DB.AutoMigrate(&models.Post{}) // migrating Post model to datbase table
    router.Gin.Run(":8000") //server started on 8000 port
}

That's all for the main.go.

Test APIs

It's time to spin the server and testing the APIs.
Fire up the server via Docker Compose via following command

docker-compose up --build

Now, Bring up your favorite API Tester application. I will be using Insomnia
Testing Create API endpoint -> /posts/

Testing Get All Post endpoint -> /posts/

Testing Get Post endpoint -> /posts/2

Testing Update Post endpoint -> /posts/2

Testing Delete Post endpoint -> /posts/2

Wrap Up

Link to Part 1 : Blog with Go, Gin, MySQL and Docker

Next Up
Upcoming Part 3 will cover the following

Adding User Struct & APIs
Related User Posts
Middleware Layer and many more..

That's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Linkedin . Let's Connect !

Next Part will be published on next weekend. Please stay tuned.

Thank You for reading !

Blog Project with Go, Gin, MySQL and Docker - Part 1

Umesh Chaudhary — Tue, 25 May 2021 07:13:22 +0000

Target Audience
Learning Objectives
Requirements
Getting Started
- Getting Up Hello World Server
- Setting up Docker
- Setting up the database
- Environment Variables
- Docker Compose file
Wrap Up

Target Audience

This Series doesn't focuses on fundamentals of Go. It focuses on how to build backend services. Indiviuals interested in learning web development with Gin Framework are ideal candidates.

Learning Objectives

This Series teaches you the fundamental of building Rest APIs with Go. After completing this series you will know how to do the following :

Setup Golang with MySQL and Docker for Local Development
Gin Framework for CRUD APIs.
Domain Driven Development
Dependency Injection with Go
Authentication with Firebase and so. on

Requirements

Go Installed ( version : go1.16.3 linux/amd64 )
Docker ( version 20.10.6 ) & Docker-compose ( version 1.29.1).
Prefarrably Linux Machine ( As i will be using linux but any would be fine )
General Understanding of Restful Services/APIs.

The above mentioned versions are installed on my machine.
You can find the full source of the series in this repository, feel free to fork it:

Getting Started

Let's start by creating a blog folder in your preferred location. Then initialize a new Go module inside blog folder with following command.

go mod init blog

The above command creates a go.mod file. It will allow you to manage project dependencies. Let's add some dependencies.

go get github.com/gin-gonic/gin

The above command will install Gin Framework and Gorm and create go.sum file. This file stores info about the dependencies and their versions.

Gin is lightweight, well-documented and fast HTTP web framework. The creators claims that Gin is 40 times faster than other similar framework to Gin

Getting Up Hello world Server

Create a main.go file in the root level; open up your favorite editor and write up the following code

package main

import (
  "net/http"
  "github.com/gin-gonic/gin"
)

func main() {
  router := gin.Default() //new gin router initialization
  router.GET("/", func(context *gin.Context) {
    context.JSON(http.StatusOK, gin.H{"data": "Hello World !"})    
  }) // first endpoint returns Hello World
  router.Run(":8000") //running application, Default port is 8080
}

Let's go through the code in main.go

package main : Each go file is a package. The main package is always an entry point for gin project.
** import ** : Imports project dependenices.
** func main ** : Main function is triggered whenever you run the application. Inside the function, a new Gin router is initialized to the router variable. A new endpoint / is set on the router.
*Setting up a route/endpoint requires two things : *
- Endpoint : It is the path from where data is fetched. For instance, if the visitor wants to get all posts, they’d fetch the /posts endpoint.
- Handler : It determines how you provide the data to endpoint. Business logic, like getting/saving data from/to the database, validating the user input, and so on. JSON method of context object is used to send data in JSON format. This method takes an HTTP status code and a JSON response as the parameters.

Use the following command to start the server.

go run main.go

If you see output similar to the following that means you are good to go.

[GIN-debug] GET    /                         --> main.main.func1 (3 handlers)
[GIN-debug] Environment variable PORT is undefined. Using port :8080 by default
[GIN-debug] Listening and serving HTTP on :8000

visit http://localhost:8000/ on your browser. You should see {"data":"Hello World !"}.

Setting Up Docker

The above method of running the server is the Go way of running applications. Let's setup it via the Docker way.
Create a file Dockerfile at the project root with the following code

FROM golang:alpine

RUN mkdir /app

WORKDIR /app

ADD go.mod .
ADD go.sum .

RUN go mod download
ADD . .

RUN go get github.com/githubnemo/CompileDaemon

EXPOSE 8000

ENTRYPOINT CompileDaemon --build="go build main.go" --command=./main

To build the docker container from above Dockerfile use the below command

docker build -t hello_world :1.0 .

containers can be listed out with docker ps -a on your terminal. You should see containers with other infomation.

CONTAINER ID   IMAGE                    COMMAND                  CREATED          STATUS                      PORTS     NAMES
62cddf7c2659   hello_world:1.0      "/bin/sh -c 'Compile…"   23 minutes ago   Exited (0) 23 minutes ago             gifted_kilby

To spin up the container use the below command

docker run -p 8000:8000 hello_world:1.0

visit http://localhost:8000/ on your browser. You should see {"data":"Hello World !"}.

Let’s Review Docker Commands mentioned above in Dockerfile :

FROM : FROM refers which base image to use for the container. The golang:1.16 image is a Linux-based image which has golang installed and no other additional programs or software.
WORKDIR : WORKDIR Changes the working directory. In our case to /app. It sets a working directory for subsequent commands.
ADD : ADD instruction literally copies the file from one location to another. ADD [SOURCE] [DESTINATION] is the syntax of the command. Similary, there is also a COPY command for similar purpose. Here, we are copying the go.sum and go.mod file first so that we will have all the libraries installed before copying all the files.
RUN : RUN instruction will execute any commands in a new layer on top of the current image and commit the results. The resulting committed image will be used for the next step in the Dockerfile.
EXPOSE : EXPOSE instructs that services running on Docker container is available in port 8000.
ENTRYPOINT : Entrypoint runs the command inside the container once a container is created from an image. You can only have one Entrypoint instruction in a Dockerfile. If multiple Entrypoint instructions are used, the last one will be executed. Here, once the container is created, the Entrypoint command will run our golang project.

Setting Up The Database

MySQL package is needed to connect the database with the application. Install it with following command.

go get gorm.io/driver/mysql gorm.io/gorm

Gorm is fantastic ORM library for Golang.
As connecting database is essential/building part of application. Let's create a folder infrastructure and db.go file inside infrastructure. Let's write some come inside db.go.

package infrastructure

import (
    "fmt"
    "os"
    "time"
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
)

//Database struct
type Database struct {
    DB *gorm.DB
}

//NewDatabase : intializes and returns mysql db
func NewDatabase() Database {
    USER := os.Getenv("DB_USER")
    PASS := os.Getenv("DB_PASSWORD")
    HOST := os.Getenv("DB_HOST")
    DBNAME := os.Getenv("DB_NAME")

    URL := fmt.Sprintf("%s:%s@tcp(%s)/%s?charset=utf8&parseTime=True&loc=Local", USER, PASS, 
    HOST, DBNAME)
    fmt.Println(URL)
    db, err := gorm.Open(mysql.Open(URL))

    if err != nil {
        panic("Failed to connect to database!")

    }
    fmt.Println("Database connection established")
    return Database{
        DB: db,
    }

}

Inside NewDatabase function the following work is being done :

database credentials USER, PASS, HOST and DBNAME is fetched from environment variables
Database url is constructed utilizing environment variables and saving it to URL variable
A new mysql connection is opened with the gorm.Open method from URL.
Lastly, Database struct is returned with gorm database instance as parameter, which is used later on the application to access the database.

Environment Variables

There are two type of variables in the project program variables and environment variables. Program variables are normal variables that stores values withing the code block or module, where as environment variables is available globally through the project.

Setting Up Environment Variables

Environment variables can be set up using various ways. Here, we will be using .env file to set them. Create .env file on the project root and add below variables.

MYSQL_ROOT_PASSWORD=root
DB_USER=user
DB_PASSWORD=Password@123
DB_HOST=db
DB_PORT=3306
DB_NAME=golang
SERVER_PORT=8000
ENVIRONMENT=local

Reading Environment Variables

Now, let's write code to read .env file. Create a file env.go in infrastructure folder and fill up with following code

package infrastructure

import (
    "log"
    "github.com/joho/godotenv"
)

//LoadEnv loads environment variables from .env file
func LoadEnv() {
    err := godotenv.Load(".env")
    if err != nil {
        log.Fatalf("unable to load .env file")
    }
}

Install godotenv package by following command

go get github.com/joho/godotenv

*In order to load .env file and database we need to edit main.go as below *

func main() {

    router := gin.Default()

    router.GET("/", func(context *gin.Context) {
        infrastructure.LoadEnv()  //loading env
        infrastructure.NewDatabase() //new database connection
        context.JSON(http.StatusOK, gin.H{"data": "Hello World !"})
    })
    router.Run(":8000")
}

Docker Compose file

We need docker compose for defining and running multi-container Docker applications. In our case Database and our Gin application. Create a file docker-compose.yml at project level and fill up with following code

version: '3'
services:
  db:
    image: mysql/mysql-server:5.7
    ports:
      - "3305:3306"
    environment:
      - "MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}"
      - "MYSQL_USER=${DB_USER}"
      - "MYSQL_PASSWORD=${DB_PASSWORD}"
      - "MYSQL_DATABASE=${DB_NAME}"   
  web:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - ".:/app"
    depends_on:
      - db
    links:
      - "db:database"

Let’s review terms mentioned inside compose file.

version ‘3’: Docker compose version, Latest is 3.7
services: The services section defines all the different containers that are to be created. We have two services namely, web and db.
web: This is the name of our Gin app service. It can be anything. Docker Compose will create containers with this name.
build: This clause specifies the Dockerfile location. . represents the current directory where the docker-compose.yml file is located and Dockerfile is used to build an image and run the container from it. We can also enter a path to Dockerfile there.
ports: The ports clause is used to map or expose the container ports to the host machine. Here mapping port "8000:8000" , so that we can access our services on 8000 port of host machine.
volumes: Here, we are attaching our code files directory to the containers, ./app directory so that we don’t have to rebuild the images for every change in the files. This will also help in auto-reloading the server when running in debug mode.
links: Links literally links one service to another. Here, we are linking the database container to the web container, so that our web container can reach the database in the bridge network. (Networking alert !!). Please if you want to learn about network in docker in detail do refer to : Network containers
image: If we don’t have a Dockerfile and want to run a service directly using an already built image, we can specify the image location using the ‘image’ clause. Compose will pull the image and fork a container from it. In our case We mentioned mysql/mysql-server:5.7 to our database service
environment: Any environment variable that needs to be set up in the container can be created using the ‘environment’ clause.

   environment:
      - "MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}"

The value ${MYSQL_ROOT_PASSWORD} and other variables are read from .env.
You are now all set to spin up the containers. Start build and run with the following command.

 docker-compose up --build

If you see something like below on your terminal that means, you have server running up:

db_1   | 2021-05-24T09:18:02.841094Z 0 [Note] Event Scheduler: Loaded 0 events
db_1   | 2021-05-24T09:18:02.841370Z 0 [Note] mysqld: ready for connections.
db_1   | Version: '5.7.34'  socket: '/var/lib/mysql/mysql.sock'  port: 3306  MySQL Community Server (GPL)
web_1  | 2021/05/24 09:18:06 Running build command!
web_1  | 2021/05/24 09:18:17 Build ok.
web_1  | 2021/05/24 09:18:17 Restarting the given command.
web_1  | 2021/05/24 09:18:17 stdout: [GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.
web_1  | 2021/05/24 09:18:17 stdout:
web_1  | 2021/05/24 09:18:17 stdout: [GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
web_1  | 2021/05/24 09:18:17 stdout:  - using env:      export GIN_MODE=release
web_1  | 2021/05/24 09:18:17 stdout:  - using code:     gin.SetMode(gin.ReleaseMode)
web_1  | 2021/05/24 09:18:17 stdout:
web_1  | 2021/05/24 09:18:17 stdout: [GIN-debug] GET    /                         --> main.main.func1 (3 handlers)
web_1  | 2021/05/24 09:18:17 stdout: [GIN-debug] Listening and serving HTTP on :8000

Navigate to http://localhost:8000/ and check on terminal, Database connection established should be printed on standard output.

The repository of this series can be found here

Wrap Up

That's it for part 1 of the series.
In the next part we will be working on :

Adding models (structs) to the application
Adopting Domain Driven Development pattern

Make sure to follow me to get the update for the next part or subscribe so that you never miss my upcoming articles.

Thank you !!

DEV Community: Umesh Chaudhary

Getting Started with Styled Components in React: A comprehensive step by step guide.

Introduction

Why Styled component over traditional styling?

Step 1: Install styled components

Step 2: Import styled components

Step 3: Create a styled component

Step 4: Use props to style dynamically

Step 5: Use themes and global styles

Conclusion

How to manage multiple Git accounts on one computer using SSH config

Problem Statement

Why will i have multiple Git accounts?

Ideal Solution

Generate SSH Key pairs

Use SSH config file to manage multiple Git accounts

React forms with react-hook-form, tailwindcss and Yup for form input validation.

Introduction

Create project

Installation

Implementation

Yup implementation

Screenshots

Unlock django super powers with Django Extensions

Installation

Configuration

Features

1. Shell Plus

2. Delete Squashed Migrations

3. Export emails

4. Generate Password

5. Graph models

6. Reset db

7. Admin generator

That's a wrap

Integrating Django Admin with Markdown Editor

Features

Installation

Configuration

Usage

Blog Project with Go, Gin, MySQL and Docker - Part 3

contents

Create user apis and authentication

Designing user struct

Hash and compare hashed password

User register and login repositories

User register and login services

User register and login controllers

User register and login routes

Configure main.go

API demo

Testing register endpoint -> /auth/register

Testing login endpoint -> /auth/login

verify on token on jwt.io

Wrap Up

Important Links :

Blog with Go, Gin, MySQL and Docker - Part 2

Architecture

Getting Started :

Designing Models

Adding Repository Layer

Adding Service Layer

Adding Controller Layer

Adding Utils

Adding Routes

Main Router

Gluing All Things Together

Test APIs

Wrap Up

Blog Project with Go, Gin, MySQL and Docker - Part 1

Contents

Target Audience

Learning Objectives

Requirements

Getting Started

Getting Up Hello world Server

Setting Up Docker

Let’s Review Docker Commands mentioned above in Dockerfile :

Setting Up The Database

Environment Variables

Testing `register` endpoint -> `/auth/register`

Testing `login` endpoint -> `/auth/login`