In this post we will create a simple news website using AdonisJS. The focus will be on -

1. Creating a site that is publisher-friendly
2. Login/auth and publish functions
3. Support user authentication for creating news articles
4. Basic styling with a classless framework - we will choose milligram at this time

Here’s how the app will look like -

Let’s get rocking.

Why AdonisJS?

While there are no dearth of frameworks in NodeJS, you may want to consider AdonisJS -

1. Be productive with many decisions made for you. Start creating your apps rather than spending time on tying up various libraries and packages
2. Create structured, methodical and easy-to-understand code
3. Use a view layer that can enable you to build something quickly. Or, enable APIs that can be consumed by your SPA or mobile apps

There is no dearth of frameworks using NodeJS, and I am a super fan of Node because of that. But AdonisJS has held its own with its developer-friendly approach, similarity with Laravel (which is a super-productive way to do things), and, of course, with the power of Javascript/Typescript.

Get Started: Installation

Ensure you have NodeJS installed on your computer. Download Node and follow installation instructions if you are into such type of thing.

Although not strictly required, I recommend you choose a nice database to go along with your app. You can choose from Postgres, MySQL, Oracle, or SQLite. Take help from our dear friend, Google, to find out how to install DBs. Or, just download Laragon that does all the hard work, and expects you to just start the darn thing.

We are now ready to start creating the app. Create your Adonis app with a simple command.

npm init adonis-ts-app newsie

The command creates a folder called ’newsie’ and takes you through a few options.

We will create a Web Application for the news site. The other option is to choose an API, which can be useful to build a single page application (among other things). Choose defaults for other options, or roll a dice to choose values for you. The wizard only asks your input to use ESLint (y) and, possibly, Prettier at this time.

Navigate to the project folder and open the folder in VSCode.

Next, we install a package to enable connecting to a database.

npm i --save @adonisjs/lucid@alpha

Invoke the configurator.

node ace invoke @adonisjs/lucid

The command will allow you to choose your database, sets up a few essentials, and provide instructions on changing configuration. Follow the instructions to update env.ts file - add below lines to the file:

export default Env.rules({
  // ...
  PG_HOST: Env.schema.string({ format: "host" }),
  PG_PORT: Env.schema.number(),
  PG_USER: Env.schema.string(),
  PG_PASSWORD: Env.schema.string.optional(),
  PG_DB_NAME: Env.schema.string(),
  // ...
});

Open .env file in your project folder and change below lines (varies depending on your options - I chose Postgres).

DB_CONNECTION=pg
PG_HOST=localhost
PG_PORT=5432
PG_USER=postgres
PG_PASSWORD=
PG_DB_NAME=newsie

The above configuration tells Adonis to connect to Postgres DB called newsie running on localhost port 5432, using the user postgres.

Create a new database called newsie in your database server. You can use a client like HeidiSQL or use an application that is bundled with your database (e.g. pgAdmin4 that comes with Postgres).

Start your app.

node ace serve --watch

The --watch flag watches for any changes in the project and automatically restarts Adonis server. You can now point your browser to and see the below glorious page.

We now move on to developing the app.

First Steps: Develop Article Functionality

AdonisJS is a MVC framework. That means that our application uses a pattern that consists of three main logical layers -

1. A model layer that takes care of all things database. Create your data structure, define relationships and so forth
2. A controller layer that allows you to create logic to write and retrieve data through the model layer
3. A view layer that takes care of presenting data to the user

While this may sound too complex in the beginning, it’s really making things easier (and standardized) for building real-world applications.

Sidenote: There are arguably better, simplified architectures available today for building apps. MVC is still my go-to pattern since I find it easier to understand, can provide guidance and training to others to get started quickly, and there is a structure to everything in complex applications.

Create Article Model

Let us add a component to store and allow interactions with articles, which is aptly called Article. We can create the model, controller and what is called a “migration file” in one go.

 node ace make model Article -cm

The command will do three things -

1. Create a model called Article.ts
2. Create an associated controller called ArticlesController.ts in app\Controllers\Http\ folder
3. Create <a_wierd_number>__articles.ts migration file in database\migrations\ folder. We can use this migration file to create tables in the database. It is simpler this way since we will be adding new fields, migrating from our dev to production environment, etc. and having a file is easier to manage than using database migration tools

Yes, the names of model, controller and the table created through the migration file is similar. Yes, you can change that behaviour though I don’t know why you would do that.

Open the migration file and add a few fields.

import BaseSchema from "@ioc:Adonis/Lucid/Schema";

export default class Articles extends BaseSchema {
  protected tableName = "articles";

  public async up() {
    this.schema.createTable(this.tableName, (table) => {
      table.increments("id");
      table.timestamps(true);
      table.string("title");
      table.text("content");
      table.dateTime("publish_date");
    });
  }

  public async down() {
    this.schema.dropTable(this.tableName);
  }
}

The first two lines for increments and timestamps already existed in the file - they signify to the app that we will use a unique id field that is auto-incremented, and we will also use a created_at and updated_at fields that track created and modified dates. We add a couple of more fields and save the file.

Run the migration.

node ace migration:run

You will find a new table in your database with the specified fields.

So far we created columns in a table, but the application wouldn’t know what to do with them unless we change the model.

Edit app/Models/Article.ts to add more fields.

// ...

@column()
public title:String

@column()
public content:String

@column.dateTime()
public publishDate: DateTime

Create Article Controller

You can display a static page without data without any help from controller. But, a real-world app contains data, needs some business logic to be applied, security rules to be enforced and so on. Controller is the place to do all this.

We previously generated the controller file for Article while creating the model. Open app/Controllers/ArticleController.ts -

import { HttpContextContract } from "@ioc:Adonis/Core/HttpContext";

export default class ArticlesController {
  public async index({}: HttpContextContract) {}

  public async create({}: HttpContextContract) {}

  public async store({}: HttpContextContract) {}

  public async show({}: HttpContextContract) {}

  public async edit({}: HttpContextContract) {}

  public async update({}: HttpContextContract) {}

  public async destroy({}: HttpContextContract) {}
}

The file consists of a bunch of functions to facilitate all possible data operations. This controller can be reached through user (or app) actions.

The start/routes.ts file outlines the various resource operations that your Adonis app supports. Let us add a line to inform Adonis of our controller.

// ...

Route.get("/articles", "ArticleController.index");

In plain English: whenever someone tries to go to <app>/articles, invoke index function in ArticleController.

Change index function to return something.

public async index({}: HttpContextContract) {
    return 'This is article.'
}

Point your browser to http://localhost:3333/articles/ to see your message. Of course, we can do much more with controllers. Let us retrieve what we have in our articles table and try to show the contents.

Change index function to -

public async index({}: HttpContextContract) {
    const articles = await Article.all()
    return articles
  }

You will see more of these statements in a short while, but here’s a rundown -

1. Get all articles through the Article model
2. Return articles

That’s about it. If you go to http://localhost:3333/articles/, you will now see a grand [] as the output. It is an empty array since we don’t have any records in the table. At this stage, you could create a few records directly in the table and see those records in the browser, or just wait for the next steps to start creating articles through the app.

Create Article View

Let us now turn focus to display the article through a view. Inspect resources/view/welcome.edge, which is a simple view file. Adonis views use edge templating language - we will see more of it soon.

You would have observed previously that http://localhost:3333 in the browser opens up the welcome view. This is done through start/routes.ts file, specifically with the below line.

// ...
Route.on("/").render("welcome");

This tells the application to serve a page welcome that will be sent to the browser when user accesses the root page.

Just for fun, create a new file in the same folder resources/view/hello.edge.

hello world

Add a different route to the start/routes.ts file.

// ...
Route.on("/hello").render("hello");

Navigate to http://localhost:3333/hello to see your new page. It’s as simple as that.

In the previous section, you had seen that we had invoked the ArticleController.index() method to return something to the view. The difference?

• Controller can retrieve data and pass it back to view
• A view can simply show content - data, images or any HTML that you write therein
• Data returned by controller is not directly displayed on the browser. You will pass it along to the view layer to make sense out of that data and display the beautified, organized content to users

Let us improve our display a bit.

First, we will take a decision to show articles on the front page. So, let us change welcome.edge. Change the body section to -

<body>
  <main>
    <div>
      <h1 class="title">Welcome to newsie!</h1>
      <p class="subtitle">Positive news across the world.</p>

      @!section("page")
    </div>
  </main>
</body>

Create a new view resources/views/articles/index.edge.

<!-- prettier-ignore -->
@layout("welcome")

@section("page")
<ul>
  @each(article in articles)
  <a href="">
    <h3>{{ article.title }}</h3>
  </a>

  @endeach
</ul>
@endsection

Notice that we used the same section names in both welcome.edge and index.edge. As you would have guessed, we pass articles from the controller. Rest of the statements just take care of rendering the article content (ignore the empty href tag - we’ll come back to this).

Let us change the routes.ts file to point to the ArticlesController. We can remove the previously used /articles route for now. The routes.ts file will now have -

import Route from "@ioc:Adonis/Core/Route";

Route.get("/", "ArticlesController.index");
Route.on("/hello").render("hello");

Edit index function in ArticlesController.ts to return the view rather than plain data.

public async index(ctx: HttpContextContract) {
    const articles = await Article.all()
    return ctx.view.render('articles/index', { articles })
}

Here’s what changed -

1. We are returning the view instead of data
2. We pass the data along to the view (and the view can render data in a good way)

Refresh the page and see the list of articles.

Tie articles to the article list

We have to link the list of articles so that we can display content when the user clicks on the link.

Web is just a bunch of links.

• Mr. Smarty Pants

Let us create a new detail page that can display article content. Create a new view resources/views/articles/_id.edge.

<!-- prettier-ignore -->
@layout("welcome")

@section("page")
<article>
  <h1>{{ article.title }}</h1>

  <section>{{ article.content }}</section>
</article>
@endsection

You know the drill by now - update controller to display this page, which in AdonisJS is the show method.

public async show(ctx: HttpContextContract) {
    const article = await Article.find(ctx.params.id)
    return ctx.view.render('articles/_id', { article })
}

Article.find(ctx.params.id) finds a specific article by querying with id. Then, we return the view by passing the said article details to the view.

Remember that I had asked you to ignore the href tag earlier? Let us change that -

<!-- prettier-ignore -->
@layout("welcome")

@section("page")
<ul>
  @each(article in articles)
  <a href="{{ route('ArticlesController.show', {id: article.id})}}">
    <h3>{{ article.title }}</h3>
  </a>

  @endeach
</ul>
@endsection

Navigate to the root and click on any news link to see the new detail page.

We have now tied all loose ends -

1. welcome is just a container that shows the actual view articles/index
2. articles/index.edge shows a list of articles
3. When user hits the home page (localhost:3333), route.ts invokes ArticlesController.index
4. ArticlesController.index queries for all articles and passes it to articles/index.edge to render
5. Clicking on a link in articles/index will use a route helper to invoke ArticlesController.show and passes the article id to the view
6. ArticlesController.show will return articles/_id.edge view that will display the article content

At a high-level:

1. Router ties the route in the URL (e.g. /, /article/1) to a specific action (or can render the view directly)
2. Actions are implemented in controllers
3. Controller queries for data and passes it to a view to render the UI

We have created UI and functionality for listing posts and showing a specific post, but we have gone through 75% of all there is to learn :)

Before we go any further, let us style our application a bit.

Styling your AdonisJS app

Styling a server-generated app is as simple as including the CSS libraries and sprinkling them classes everywhere. While styles can be as complex as they come, I will choose to use a simple, class-less style library in Milligram.

Add this one line to the base container.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>

Let us create a new css file public/css/styles.css and add that to the mix for customisations. We will not quite discuss styling here - copy and paste CSS from the Github repo. Add this file to the page.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
<link rel="stylesheet" href="/css/styles.css" />

While we are here, let us rename the container (welcome.edge) to app.edge since that is more near to what the file function is.

Remember to change references to welcome.edge in all views.

Enable Authentication

We need our app to support authentication since only registered users can create news articles. Fortunately, Adonis has a powerful authentication module that comes alive with a few code changes.

First, install the additional packages required for auth.

npm i @adonisjs/auth@alpha phc-argon2 phc-bcrypt

Configure auth with the below command.

node ace invoke @adonisjs/auth

Select Web option since we are like to keep things simple. Follow post configuration instructions to change specific sections in kernel.js.

Server.middleware.register([
  "Adonis/Core/BodyParserMiddleware",
  "App/Middleware/SilentAuth",
]);

Server.middleware.registerNamed({
  auth: "App/Middleware/Auth",
});

Enable UI for Login & Registration

Change the base layout app.edge to include links to login & logout links.

<main>
    <nav class="navbar">
      <h3 class="logo"><a href="/">Newsie</a></h3>
      <ul>
        <li><a href="/about">about</a></li>
        @if(auth.user)
        <li>
          <a href="/logout" onclick="event.preventDefault();document.getElementById('logout').submit()">
            logout
            <form id="logout" action="/logout" method="POST">{{ csrfField() }}</form>
          </a>
        </li>
        <li><a href="/articles/new">new</a></li>
        @else
        <li><a href="/login">login</a></li>
        @endif

      </ul>
    </nav>
    <div class="content">
      @!section("page")
    </div>
  </main>

  <footer>
    (c) Company 42
    <span style="float:right"><a href="https://github.com/prashanth1k/newsie-adonisjs-sample-app">github</a></span>
  </footer>
</body>
</html>

Remember that edge file supports calculations and inclusion of variables. In addition, we can include simple conditional logic as well. @if(auth.user) checks if a specific object exists and renders the lines until else or endif if the condition is true. We are using the conditional rendering to show login link only if user is not logged in yet.

csrfField() is a security function provided by AdonisJS to prevent cross-site forgery. We will use it for all update requests (e.g. POST, PUT, etc.)

User Data Model

Create user model similar to articles -

 node ace make model User -cm

Change the table migration file database/migrations/<some_num>_users.ts to -

import BaseSchema from "@ioc:Adonis/Lucid/Schema";

export default class Users extends BaseSchema {
  protected tableName = "users";

  public async up() {
    this.schema.createTable(this.tableName, (table) => {
      table.increments("id");
      table.timestamps(true);

      table.string("email").notNullable();
      table.string("password", 180).notNullable();
      table.string("name");
      table.string("remember_me");
    });
  }

  public async down() {
    this.schema.dropTable(this.tableName);
  }
}

Run migrations -

node ace migration:run

Change app/Models/user.ts to -

import { DateTime } from "luxon";
import { BaseModel, column, beforeSave } from "@ioc:Adonis/Lucid/Orm";
import Hash from "@ioc:Adonis/Core/Hash";

export default class User extends BaseModel {
  @column({ isPrimary: true })
  public id: number;

  @column.dateTime({ autoCreate: true })
  public createdAt: DateTime;

  @column.dateTime({ autoCreate: true, autoUpdate: true })
  public updatedAt: DateTime;

  @column()
  public name: string;

  @column()
  public email: string;

  @column()
  public password: string;

  @column()
  public rememberMeToken?: string;

  @beforeSave()
  public static async hashPassword(user: User) {
    if (user.$dirty.password) {
      user.password = await Hash.make(user.password);
    }
  }
}

hashPassword will hash plain password so that we can securely store it in our database.

User Login and Registration Controllers

Change code in app/Controllers/UsersController.ts.

Login

Add code to handle login events.

public async login({ request, response, auth, session }: HttpContextContract) {
    try {
      await auth.attempt(request.input('email'), request.input('password'))
      return response.redirect('/')
    } catch (e) {
      session.flash('notification', 'Login failed. Check email/password & retry.')
      return response.redirect('back')
    }
  }

Note that -

• await auth.attempt() tries to login using id/password provided by front-end
• session.flash helps send messages from the business layer back to UI. We will make use of notification in the edge file
• successful login will direct user to / = home page. Errors will just go back to the login page

Register

It is quite common to validate data sent by the frontend in controllers / models. AdonisJS provides an easy way to validate data but that is not included by default.

Let us install the Adonis Shield package to enable validation in our app -

npm i @adonisjs/shield@alpha --save

Configure shield.

node ace invoke @adonisjs/shield

Follow instructions to register 'Adonis/Addons/ShieldMiddleware' in start/kernel.ts file.

Server.middleware.register([
  "Adonis/Core/BodyParserMiddleware",
  "Adonis/Addons/ShieldMiddleware",
  "App/Middleware/SilentAuth",
]);

Now you can include functionality provided by shield in your edge files.

Add another method in UsersController.ts to support registration function -

public async register({ request, auth, response, session }: HttpContextContract) {
    const valSchema = schema.create({
      email: schema.string({ trim: true }, [
        rules.unique({ table: 'users', column: 'email' }),
        rules.maxLength(255),
        rules.email(),
      ]),
      password: schema.string({ trim: true }, [rules.maxLength(180), rules.required()]),
    })

    const data = await request.validate({
      schema: valSchema,
      messages: {
        'email.unique': 'Email already exists',
        'email.maxLength': 'Email can be upto 255 characters',
        'email.email': 'Invalid email',
      },
    })
    const user = await User.create({
      email: data.email,
      password: data.password,
    })

    await auth.login(user)
    session.flash('notification', 'Registered.')
    return response.redirect('/')
  }

This is very similar to the login method, but has a few more goodies.

const valSchema = schema.create() enables us to easily create custom validation rules and messages using Adonis Shield. We check whether the email already exists, email is a valid email string and whether it has max 255 characters. If all validations pass, we login the user and redirect them to the home page.

Both the methods described so far provide the control layer. We need to render the views as well.

Show Login and Register Pages

Add two more methods to show login and registration screens.

public async showLogin({ view }: HttpContextContract) {
  return view.render('auth/login', { user: { email: '', password: '' } })
}

public async showRegister({ view }: HttpContextContract) {
  return view.render('auth/register', { user: { name: '', email: '', password: '' } })
}

We pass dummy objects like user: { email: '', password: '' } to demonstrate that we could pass predefault strings to the UI if desired.

Before we forget - code the logout event as well..

public async logout({ auth, response }: HttpContextContract) {
  await auth.logout()
  return response.redirect('/')
}

User Login and Registration UI

Create edge views to enable user to login / register.

Sign up screen

Create a new file resources/views/auth/register.edge. Input below code -

@layout("app")

@section("page")
<div style="padding-left: 20%;padding-right: 20%">
    <h3 class="article-title">Sign up</h3>
    @if(flashMessages.has('errors.email'))
    <p class="error-text">
        {{flashMessages.get("errors.email")}}
    </p>
    @endif
    @if(flashMessages.has('notification'))
        <p class="info-text">
            {{flashMessages.get("notification")}}
        </p>
    @endif
    <form action="{{ `/register`}}" method="POST">
        {{ csrfField() }}
        <label for="name">Name</label>
        <input type="text" value="{{user.name}}" name="name" required>
        <label for="title">Email</label>
        <input type="text" value="{{user.email}}" name="email" required>
        <label for="password">Password</label>
        <input type="password" value="{{user.password}}" name="password" required>

        <button type="submit">Sign up</button>

    </form>

</div>
@endsection

Note that -

1. We continue using app.edge as the base layout
2. We used flashMessages to provide a way to show error messages and notifications on the UI

Login screen

Create a new file resources/views/auth/register.edge. Input below code -

@layout("app")

@section("page")
<div style="padding-left: 20%;padding-right: 20%">
    <h3 class="article-title">Login</h3>
    <article>
        @if(flashMessages.has('errors.title'))
        <p class="error-text">
            {{flashMessages.get("errors.title")}}
        </p>
    @endif
    @if(flashMessages.has('notification'))
        <p class="info-text">
            {{flashMessages.get("notification")}}
        </p>
    @endif
    <form action="{{ `/login`}}" method="POST">
        {{ csrfField() }}
        <label for="title">Email</label>
        <input type="text" value="{{user.email}}" name="email" required>
        <label for="password">Password</label>
        <input type="password" value="{{user.password}}" name="password" required>

        <button type="submit">Login</button>
        <div class="article-meta"> Not registered? <a color="grey" href="/register">Sign up</a></div>
    </form>

</div>
@endsection

User Routes

Add below routes to start/routes.ts.

Route.post("/login", "UsersController.login");
Route.get("/login", "UsersController.showLogin");
Route.post("/register", "UsersController.register");
Route.get("/register", "UsersController.showRegister");
Route.post("/logout", "UsersController.logout");

And.. you are done just like that. Try out logging in / signin up to use the application.

Do More With Articles

While our articles functionality is all powerful, our app still lacks a few things-

1. We can provide a way to see “proper” URLs for individual articles. A “slug” is a URL-friendly article id that is easier to read
2. Articles do not have any formatting now. We will support markdown content editing for easier content authoring / assimilation
3. Make the user experience and navigation better

Let’s get to it.

List Articles

The home page shows a bunch of links right now. Change that to display news cards with a title and content preview.

Modify resources/views/articles/index.edge -

<!-- prettier-ignore -->
@layout("app") 
@section("page")

<section class="hero">
  <div class="row">
    <div class="column">
      <h3 class="title">Welcome to newsie!</h3>
      <p class="subtitle">Positive news across the world.</p>
    </div>
    <div class="column center">
      <img
        src="/images/smiley.png"
        style="width:150px;height:150px;margin:auto;"
        class="column"
      />
    </div>
  </div>
</section>

<div class="row row-wrap">
  @each(article in articles)
  <div class="column column-50">
    <aside class="card">
      @if(auth.user)
      <a href="/articles/{{article.id}}/edit" class="article-meta-small"
        >edit</a
      >
      @endif
      <h3>
        <a href="{{ route('ArticlesController.show', {id: article.slug}) }}">
          {{ article.title }}
        </a>
      </h3>
      <p class="article-meta">Updated: {{article.publishDate}}</p>

      <p>{{{ article.content ? article.content.substring(0,100) : "" }}}</p>
    </aside>
  </div>
  @endeach
</div>
@endsection

A couple of interesting things to note -

1. There is an edit link at the top of each article. This shows up only for logged in users
2. We use a “route helper” in <a href="{{ route('ArticlesController.show', {id: article.slug}) }}"> to directly refer to the AdonisJS route rather than use the URL to reach the article detail view

Show Article Detail

There are two changes to be done at this time -

• Treat content in content as markdown. To render markdown in HTML, we use a package called “marked”.
• Let us start using a “slug” instead of a cryptic “id” field in URL. We will use a package called “slugify” to convert title to a slug

Install packages -

npm i marked slugify

Modify the model app/Models/Article.ts -

// other lines
export default class Article extends BaseModel {
  // other lines

  @computed()
  public get fmtContent() {
    const marked = require("marked");
    return this.content ? marked(this.content) : "";
  }
  // other lines

  @beforeSave()
  public static async slugify(article: Article) {
    const slugify = require("slugify");

    if (!article.$original.slug && !article.$attributes.slug) {
      article.slug = slugify(article.title, { lower: true, strict: true });
    } else if (article.$dirty.slug) {
      article.slug = slugify(article.slug, { lower: true, strict: true });
    }
  }
}

The changes are fairly straight-forward. We created a computed field to convert markdown to HTML (which can inturn be used in our views), and auto-filled the slug before saving the record.

Change resources/views/articles/_id.edge that shows the detail article to -

<!-- prettier-ignore -->
@layout("app")

@section("page")
<div>
  @if(auth.user)
  <a class="article-meta-small" href="/articles/{{article.id}}/edit">edit</a>
  @endif
  <h1 class="article-title">{{ article.title }}</h1>
  <article>{{{ article.fmtContent }}}</article>
</div>
@endsection

Note that we have now used fmtContent and {{{ }}} notation to directly create HTML based on the field content.

Create Article

Create a new view resources/views/articles/new.edge and input below code -

<!-- prettier-ignore -->
@layout("app")

@section("page")
<div>
  <h3 class="article-title">New Article</h3>
  <article>
    @if(flashMessages.has('errors.title'))
    <p class="error-text">{{flashMessages.get("errors.title")}}</p>
    @endif @if(flashMessages.has('notification'))
    <p class="info-text">{{flashMessages.get("notification")}}</p>
    @endif
    <form action="/articles/" method="POST">
      {{ csrfField() }}
      <label for="title">Title</label>
      <input type="text" value="{{article.title || ''}}" name="title" />
      <label for="slug">Slug</label>
      <input type="text" value="{{article.slug || ''}}" name="slug" />

      <label for="content">Post Content</label>
      <textarea type="text" name="content" rows="10">
        {{ article.content || '' }}
      </textarea>

      <button type="submit">Save</button>
    </form>
  </article>
</div>
@endsection

Nothing we haven’t seen before.

Update Article

Create a new view resources/views/articles/edit.edge to edit a given article. In our case, the code here will be almost same as new. Input below code -

<!-- prettier-ignore -->
@layout("app")

@section("page")
<div>
    <h3 class="article-title">Update Article</h3>
    <article>
    @if(flashMessages.has('errors.title'))
    <p class="error-text">
        {{flashMessages.get("errors.title")}}
    </p>
    @endif
    @if(flashMessages.has('notification'))
        <p class="info-text">
            {{flashMessages.get("notification")}}
        </p>
    @endif
    <form action="{{ `/articles/${article.id}?_method=PATCH`}}" method="POST">
        {{ csrfField() }}
        <label for="title">Title</label>
        <input type="text" value="{{article.title}}" name="title">
        <label for="slug">Slug</label>
        <input type="text" value="{{article.slug}}" name="slug">

        <label for="content">Post Content</label>
        <textarea type="text" name="content" rows="10">{{article.content}}</textarea>

        <button type="submit">Save</button>

    </form>

</div>
@endsection

_method=PATCH in form action is what is called as “method spoofing”. This allows us to send a patch method in the HTTP POST request. You need to enable method spoofing in AdonisJS by making the below configuration change in app.ts -

allowMethodSpoofing: true;

Article Routes

Finally, change the article routes.

Let us -

1. Support edit, update and new routes to views created so far
2. Require user to be logged in to create or update articles

Modify app/start/routes.ts -

Route.get("/", "ArticlesController.index");
Route.on("/about").render("about");

Route.group(() => {
  Route.get("/new", "ArticlesController.create");
  Route.get("/:id/edit", "ArticlesController.edit");
  Route.patch("/:id", "ArticlesController.update");
  Route.post("/", "ArticlesController.store");
})
  .prefix("articles")
  .middleware("auth");

Route.get("/articles/:id", "ArticlesController.show");

The auth middleware included in the route group takes care of checking for valid user and redirecting user to login screen if not already logged in. Anonymous users can just view the article list and browse articles.

We are done with all changes required to provide a cool-looking app to create, edit and view news articles.

Finis

While getting to the finish line took a few hundred lines, you will get used to the steps required to enable functionality in AdonisJS in no time. If you have experience with other bare-bones frameworks, you will come to appreciate the ease of customisation and the structured/standardised coding approach that makes life easier for everyone.

Go ahead - make your news app available to the world, spread positivity and create more awesome apps.

The repository with full code is at https://github.com/prashanth1k/newsie-adonisjs-sample-app.

In this post we create a blog with ExpressJS and friends - oh how exciting. Our blog is going to look beautiful with -

1. ExpressJS (of course)
2. Ejs for templating. Has SSR built-in - for you SPA crazies
3. Supports content authoring in markdown

Here’s how it looks -

Why ExpressJS?

First, I am kind of sad that this question came up - I mean, re-read [paragraph 1]. But since you asked - I continue to chose ExpressJS because-

1. It is so darn easy to start and continue rocking
2. Large community = lot of solved problems
3. A tonne of useful code, plugins, middleware and so on

I am more firmly in the SPA camp nowadays and love the productivity of a Vue application + standard styling libraries. But hey, Express and server-side templating keeps things real simple.

Get Started: Setup

Install Node and VSCode if you don’t already have them.

Create a new folder in some corner of your computer, name it bloggie, and open VSCode in that folder.

Open a terminal (in Windows, Mac or in VSCode - I don’t judge), ensure that you are in the project folder, and key in the command to initiate the project.

npm init -y

It’s time for that pat on your back - 25% of the work is already done.

Install a few packages that will be used in the project. We will see their purpose in a bit.

npm i --save express ejs pg knex dotenv

Here’s how the packages will be used..

• express: App server
• ejs: Templating language that allows us to specify variables in standard HTML
• pg: Connect and run queries on postgres DB
• dotenv: Get variables from an environment file

Install dev dependencies, which are packages used to get stuff done during development, but are not needed in production.

npm i --save-dev nodemon knex

Here we have -

• nodemon: automatically restarts server when files are changes
• knex: Query builder that makes writing dynamic queries a wee bit easier

You can install knex globally with npm i -g knex if you are going to use knex commands every now and then. The advantage of using global knex is that you don’t need to explicitly reference knex within node_modules. Either ways, it is a good idea to include knex as an explicit dependency to also let others know of its gracious presence.

Create a folder in the project root folder and call it public. This folder will host all the assets exposed to the internet - like css, images, etc.

Next, install Postgres database server. The easiest way to do it is to download Laragon, and click on a few buttons to install Postgres database.

We now have everything to get started.

Getting Started: First Steps

Create a new file in the project folder called app.js.

const express = require("express");
const app = express();

// setup
require("dotenv").config();
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(express.urlencoded({ extended: false }));

app.listen(9000, () => console.log("App listening on port 9000."));

With a few lines of code we created an Express server.

• require("dotenv").config() allows us to define and use environment variables
• app.set("view engine", "ejs") lets use ejs templating engine, which is a way to introduce variables within HTML
• app.use(express.static("public")); enables us to store static assets in public folder and use that in our app
• app.use(express.urlencoded({ extended: false })) will allow us to use parameters in the URL - we will see more of this

Include a command in your package.json to run your app.

{
  "name": "bloggie",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "nodemon app.js"
  }
  // other lines
}

You can now start your express app with the command -

npm run dev

See the line App listening on port 9000. and rejoice. Try making any changes to a file and see the server automatically restart - ah, the joy of modern programming.

Create Database

Any modern web app has several layers to it. We typically -

• design “top-down”: think about how your app flows, how screens are used and drill-down to specifics - where the business logic is implemented and data gets stored
• develop “bottom-up”: start assembling blocks from the bottom layer and build out

So, let’s start creating them tables. knex makes it a breeze.

Get started by creating the knex init file - knexfile.js. You can do that by entering the below command..

npx knex init

.. or reference knex using the full path relative to your project root folder.

node_modules/.bin/knex init

If you have installed knex globally, you could simply use knex like any other DOS command in the terminal.

knex init

Change knexfile.js file to specify our database and connection settings -

// Update with your config settings.

module.exports = {
  development: {
    client: "postgresql",

    connection: {
      database: "bloggie",
      user: "postgres",
      password: "",
    },
    pool: {
      min: 2,
      max: 10,
    },
    migrations: {
      tableName: "knex_migrations",
      directory: "data/migrations",
    },
  },
};

The configuration is fairly straight forward -

1. Specify a database and user id/ password to connect
2. Specify a pool. A pool persists connections even after a transaction is completed and allows the next transaction to reuse connection. This saves execution time
3. We also specify the name of the table that stores the migration history - knex_migrations, and the directory where table definitions and seed data is stored - data/migrations

Create data and migrations directories.

mkdir data
mkdir data/migrations

Create your first migration file called <wierd_number>_init.js. A migration file allows you to simplify creating tables and also version controlling table changes made at different times.

knex migrate:make init

Change the file to include table definitions. We will create a table to store blog posts and call it posts.

exports.up = function (knex) {
  return knex.schema.createTable("posts", function (table) {
    table.increments();
    table.timestamp("created_at").defaultTo(knex.fn.now());
    table.timestamp("updated_at").defaultTo(knex.fn.now());

    table.string("title").notNullable();
    table.text("content").notNullable();
    table.string("slug", 100).unique();
    table.string("tags", 100);
  });
};

exports.down = function (knex, Promise) {
  return knex.schema.dropTable("posts");
};

Next, let us apply this migration to the database.

knex migrate:up

If everything goes well we will see table posts created in the database. You can verify it by connecting to your Postgres DB using database client programs like pgadmin4 (typically installed with Postgres in dev environment) or HeidiSQL.

Before we go any further, create a file to facilitate easy import of knex libraries in our project - data/db.js.

const environment = process.env.NODE_ENV || "development";
var config = require("../knexfile.js")[environment];

module.exports = require("knex")(config);

You can test the connection by adding following lines in app.js.

const db = require("./data/db");
const posts = await db("posts");
console.log("posts: ", posts);

This should output an empty array since the table does not have any rows yet. You can delete the above lines once testing is complete - we don’t quite need them.

Routes in Express

Remember that Express server is running on port 9000? Go to a browser and enter http://localhost:9000 to see a blank page. Real-world web applications do magic with these URLs - you could have -

• http://localhost:9000/blog: to show posts from your blog
• http://localhost:9000/users: to display all users of your app

Of course you have to build functionality in your server to provide information back to user when she enters the URL. These URLs are what are called routes for your app. ExpressJS can identify routes and you can enter your own functions to call for specific routes.

Just add following lines to app.js to create a new route -

const router = express.Router();
router.get("/hello", async (req, res) => {
  res.send("hello world");
});

Save the file and go to http://localhost:9000/hello in your browser to see hello world message.

An app can have many routes and it is going to make our app.js look bad. Let’s put these routes in a different file. Create a new folder called routes in project root and create a file therein called index.js. Fill this file with the same code -

const express = require("express");
const router = express.Router();
router.get("/hello", async (req, res) => {
  res.send("hello world");
});
module.exports = router;

Import this file in app.js..

const express = require("express");
const app = express();

// setup
require("dotenv").config();
app.use(express.static("public"));
app.use(express.urlencoded({ extended: false }));

const router = require("./routes/index");
app.use("/", router);

app.listen(9000, () => console.log("App listening on port 9000."));

While rest of the lines remain the same as earlier, app.use("/", router); will signify that the new route will be available at /. If you had typed /blog instead, we could have specified routes only applicable to a blog. For e.g. /blog/post-1, /blog, /blog/post-2, etc.

Routes by themselves can execute some code and send the response back to the caller. But, that’s no joy - we need to display information in a structured manner on a page. Enter views.

Views in Express

Views can be simple HTML pages that display any information. In our example we use a templating language (ejs) to create HTML and include variables in the HTML. These variables are substituted at runtime by values from database, disk or from external API calls.

To use ejs we need to tell Express that. Change app.js -

const express = require("express");
const app = express();

// setup
require("dotenv").config();
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(express.urlencoded({ extended: false }));

const router = require("./routes/index");
app.use("/", router);

app.listen(9000, () => console.log("App listening on port 9000."));

Create a new view hello.ejs in <project_root>/views/ folder. Add below code -

<html>
  <h1>hello world</h1>
</html>

Change the hello route in routes/index.js to -

const express = require("express");
const router = express.Router();
router.get("/hello", async (req, res) => {
  res.render("hello");
});
module.exports = router;

Visit http://localhost:9000/hello to see the hello world message.

So far you have seen how routes work, how to interact with database, and how to create views and display information. These are the only building blocks we need - let’s put them together for our blog.

Understand routes for a Blog

What exactly can you do with a blog?

• Display posts
• View a specific post
• Write a post
• Update a post
• Delete a post

Each of these actions will have a specific route in Express. Let’s start with displaying a list of posts.

const express = require("express");
const router = express.Router();

const db = require("../data/db");

const slugify = require("slugify");
const marked = require("marked");
const domPurify = require("dompurify");
const { JSDOM } = require("jsdom");
const purify = domPurify(new JSDOM().window);

router.get("/", async (req, res) => {
  // const results = await db.query("select * from posts");

  // res.send({ rows: results.rows });
  res.render("index");
});

router.get("/blog", async (req, res) => {
  const posts = await db.from("posts").orderBy("created_at", "desc");
  res.render("blog/index", { posts: posts });
});

module.exports = router;

We are pointing two routes / (http://localhost:9000) and /blog (http://localhost:9000/blog) to two views index and blog/index respectively.

Let us add the two views.

Create a new view views/index.ejs, which will serve as the home page for the app.

<html>
  <head>
    Head section this is
  </head>

  <body>
    <nav>
      <a>Link 1</a>
      <a>Link 2</a>
    </nav>

    <div class="container">
      <section>
        <h2 style="font-weight:800">Welcome to Bloggie</h2>
      </section>
      <div class="post-meta">'tis where magic happens.</div>
      <a href="/blog"><button>Go to Blog!</button></a>
    </div>
    <footer>(c) Bloggie Blog.</footer>
  </body>
</html>

Create a new view views/blog/index.ejs to display a list of posts.

<html>
  <head>
    Head section this is
  </head>

  <body>
    <nav>
      <a>Link 1</a>
      <a>Link 2</a>
    </nav>

    <div class="container">
      <section>
        <h2 style="font-weight:800">List of Posts</h2>
      </section>
      <div>Post 1</div>
      <div>Post 2</div>
      <div>Post 3</div>
    </div>
    <footer>(c) Bloggie Blog.</footer>
  </body>
</html>

You can now visit the URLs / and /blog to see these views. You may have observed that we have repeated information in sections like head, footer etc. ejs provides a good way to reuse sections by creating them in one place and including them in any other views as required.

We can easily do that for our views. First create a reusable “partial file” called views/partials/head.ejs.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Super Blog</title>

Create a second partial for navigation views/partials/nav.ejs -

<header style="text-align: center">
  <h3 class="site-title">My Super Blog</h3>
    

  <nav>
    <a href="/">Home</a> | <a href="/blog">Blog</a> |
    <a href="https://github.com/prashanth1k/bloggie">GitHub</a>
  </nav>
</header>

Create another partial for footer views/partials/footer.ejs -

<hr />
<p style="text-align:center; color:grey; font-size: small;">
  © 2020-Infinity My Super Blog
</p>

We now include these partials in our views.

Our index.ejs will change to -

<html>
  <head>
    <%- include('./partials/head'); %>
  </head>

  <body>
    <%- include('./partials/nav'); %>

    <div class="container">
      <section>
        <h2 style="font-weight:800">Welcome to Bloggie</h2>
      </section>
      <div class="post-meta">'tis where magic happens.</div>
      <a href="/blog"><button>Go to Blog!</button></a>
    </div>
    <footer><%- include('./partials/footer'); %></footer>
  </body>
</html>

The <%- %> tags allow you to include variables, values and functions. Here we use include statement to include another ejs file “as is” - meaning, the target ejs file will be copied/pasted in the parent “in full” at runtime.

The blog list page blog/index.ejs will change to -

<html>
  <head>
    <%- include('./partials/head'); %>
  </head>

  <body>
    <%- include('./partials/nav'); %>

    <div class="container">
      <section>
        <h2 style="font-weight:800">List of Posts</h2>
      </section>
      <div>Post 1</div>
      <div>Post 2</div>
      <div>Post 3</div>
    </div>
    <footer><%- include('./partials/footer'); %></footer>
  </body>
</html>

The end result will be the same as earlier.

Since we are on the topic of views and views are about displaying information in a beautiful way - let us also include some styles.

Change views/partials/head.ejs to -

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap"
  rel="stylesheet"
/>

<title>My Super Blog</title>

milligram.css is a nice, classless styling library. It allows you to style your apps without adding any (or many) styling classes and has sensible defaults for standard HTML elements. We will include additional styling for our app in a new file called /css/styles.css. Check out the Github repo for contents of styles.css - we will not be discussing any details here.

Pull in Open Sans Google fonts just because you can. You can use any font that you like.

Routes for your Blog App

Now that we have grasped the basics of routes and views, let us start adding routing logic for all possible transactions by changing routes/index.js.

Base structure of routes

The basic structure of routes remains as-is. We will add a DB reference to enable us to query or update database for specific route transactions.

const express = require("express");
const router = express.Router();

const db = require("../data/db");

router.get("/", async (req, res) => {
  res.render("index");
});

module.exports = router;

Display a list of posts

Add route to show posts -

router.get("/blog", async (req, res) => {
  const posts = await db.from("posts").orderBy("created_at", "desc");
  res.render("blog/index", { posts: posts });
});

All we are doing here is to -

• get content from posts table in database db.from("posts") ordered by created date
• render the view blog/index. Pass data from database to the view

We have already seen how to use variable values in the view - we will see actual code in the next section.

Display a specific post

Create a route/method to “show” a specific blog post.

router.get("/blog/:id", async (req, res) => {
  const post = await db.from("posts").where("id", req.params.id).first();
  res.render("blog/show", { post: post });
});

See the string :id in route url? This implies that id is a variable. For e.g. the URL can be http://localhost:9000/blog/1 (id = 1), http://localhost:9000/blog/42 (id = 42), and so on.

We query database for the specific id passed in the URL and, as was earlier, provide the data to the view.

While using id simply works, URLs with ids are not really user-friendly. Let us change it to include a URL-friendly version of our post title (called slug). Slug is a distinct column we created for the purpose, and we will use that column instead of id. For e.g. a post with title “Hello World!” can have the slug hello-world.

router.get("/blog/:slug", async (req, res) => {
  const post = await db.from("posts").where("slug", req.params.slug).first();
  res.render("blog/show", { post: post });
});

Let’s do one more thing while we are on this topic. Let us allow user to type content in markdown. This is not a problem while saving the record since we save the entries as-is, but we should render markdown as formatted HTML when showing the blog post. We can do that using a library called marked and combining that with a package or two to sanitize the HTML (purify / jsdom).

Install package -

npm i --save marked dompurify marked jsdom

Include the libraries in our route code -

const marked = require("marked");
const domPurify = require("dompurify");
const { JSDOM } = require("jsdom");
const purify = domPurify(new JSDOM().window);

router.get("/blog/:slug", async (req, res) => {
  const post = await db.from("posts").where("slug", req.params.slug).first();
  post.content = post.content ? purify.sanitize(marked(post.content)) : "";
  res.render("blog/show", { post: post });
});

Create a new post

We will create a route/view to display fields of a post and allow user to create new post.

router.get("/blog/new", async (req, res) => {
  res.render("blog/new", { post: {} });
});

post: {} passes an empty object called post to the view. We will tie the fields in the view to attributes of this object. We use an empty object here rather than not passing anything at all since we may want to change this in the future to default the values of few fields on the view. You can safely ignore this for now.

Save a post

Create a route to save a new post by using a POST transaction.

router.post("/blog", async (req, res) => {
  try {
    let postId = await db("posts")
      .insert({
        title: req.body.title,
        content: req.body.content,
        tags: req.body.tags,
      })
      .returning("id");
    res.redirect(`/blog/${id}`);
  } catch (e) {
    console.error(e);
  }
});

The function used in this route will perform below tasks -

• gets data passed in req. In our case a view passes this data along after the user enters data and submits the form
• inserts a record in posts table and populates values
• redirects to the URL /blog/<some_id>. We have created the route for this previously - that route will fetch record with this id and call the “show” view to display post details

Again, using id just works. But this is not quite what we want. Let us bring in slug here - but we want to solve the problem of converting title automatically to a slug. We do that using a package called slugify.

First, install slugify.

npm i --save slugify

Change the above logic -

router.post("/blog", async (req, res) => {
  try {
    const slug = slugify(req.body.title, { lower: true, strict: true });
    let postId = await db("posts")
      .insert({
        title: req.body.title,
        content: req.body.content,
        tags: req.body.tags,
        slug: slug,
      })
      .returning("id");
    res.redirect(`/blog/${id}`);
  } catch (e) {
    console.error(e);
  }
});

The logic here is simple and straight forward. But, what happens if you are saving an updated record? We would then need to define another route and specify a different service. To keep things simple, let us combine save function for both new and updated records -

router.post("/blog", async (req, res) => {
  try {
    let postId = 0;
    const slug = slugify(req.body.title, { lower: true, strict: true });

    if (!req.body.id) {
      postId = await db("posts")
        .insert({
          title: req.body.title,
          content: req.body.content,
          tags: req.body.tags,
          slug: slug,
        })
        .returning("id");
    } else {
      postId = await db("posts")
        .update({
          title: req.body.title,
          content: req.body.content,
          tags: req.body.tags,
          slug: slug,
        })
        .where("id", parseInt(req.body.id))
        .returning("id");
    }

    res.redirect(`/blog/${slug}`);
  } catch (e) {
    console.error(e);
    res.render("blog/new", { post: req.body });
  }
});

Edit a post

Editing a post includes two transactions-

1. Query for a specific post (and hand it over to view)
2. (Once user is done and clicks Save) Collect details updated by user and hand it over to a route / service to save the changes

We will achieve the first part through the URL http://localhost:9000/blog/edit/<post_slug>.

router.get("/blog/edit/:slug", async (req, res) => {
  const post = await db.from("posts").where("slug", req.params.slug).first();
  res.render("blog/new", { post: post });
});

While we could use different routes/logic to save new posts and to save updated posts, here we keep things simple. We will reuse router.post("/blog", async (req, res) => {} function as described in the previous section to save updates.

More Views for Blog App

We are done with most of the routes. Let us create views to go along with them. Create a folder views/blog to store all blog related views in one place. Let’s start with the views.

Display a list of posts

Create a new view views/blog/index.ejs to show list of posts.

<html>
  <head>
    <%- include('../partials/head'); %>
  </head>

  <body>
    <%- include('../partials/nav'); %>
    <div class="postlist-nav">
      <div class="container">
        <a href="/blog/new"><button>New Post</button></a>
      </div>
    </div>
    <div class="container">
      <section>
        <% posts.forEach(post => { %>
        <aside>
          <h3 class="postlist-title"><%= post.title %></h3>
          <div class="post-meta">
            📅 <%= post.created_at.toISOString().substring(0,10) %> | 📁<%=
            post.tags %>
          </div>
          <p><%= post.content.substring(0,200) + '...' %></p>
        </aside>
        <a href="/blog/<%= post.slug %>">Read More</a>
        <% }); %>
      </section>
    </div>
    <footer><%- include('../partials/footer'); %></footer>
  </body>
</html>

We receive posts from the route file and display records here. A few more interesting observations -

• We can use expressions in our EJS templates. e.g. <%= post.content.substring(0,200) + '...' %>
• We can use loops to display repeated sections - <% posts.forEach(post => { %>. <% will just perform calculations, while <%= will print out the result
• You can use expressions in HTML tags or attributes
• Note that we pass arguments to the route with the link <a href="/blog/<%= post.slug %>">Read More</a>

Navigate to https://localhost:9000/blog/ to see this view.

Display a specific post

Create a new view views/blog/show.ejs and include below code.

<html>
  <head>
    <%- include('../partials/head'); %>
  </head>

  <body>
    <%- include('../partials/nav'); %>
    <div class="container">
      <div style="text-align: end;">
        <a href="/blog/edit/<%= post.slug %>"><button>Edit</button></a>
      </div>
      <section>
        <h2 class="post-title"><%= post.title %></h2>
        <div class="post-meta">
          📅 <%= post.created_at.toISOString().substring(0,10) %> | 📁<%=
          post.tags %>
        </div>
        <p><%- post.content %></p>
      </section>
    </div>
    <footer><%- include('../partials/footer'); %></footer>
  </body>
</html>

This is very similar to what wee had earlier, but we just show one post rather than a bunch of posts.

The only additional thing to note is the redirection to edit view when user clicks on the edit post button.

Create a new post

Create new view views/blog/new.ejs -

<html>
  <head>
    <%- include('../partials/head'); %>
  </head>

  <body>
    <%- include('../partials/nav'); %>
    <div class="container">
      <section>
        <form action="/blog" method="POST">
          <%- include("_form_default") %>
        </form>
      </section>
    </div>
    <footer><%- include('../partials/footer'); %></footer>
  </body>
</html>

We have included a _form_default.ejs here instead of directly filling in the form fields for creating a new post. This is to encourage reuse of the form for both new and edit post functions.

Also take note of <form action="/blog" method="POST"> which redirects user to a route /blog with a method POST on submission of the form. The form is submitted at the click of Save button.

Create a new partial view views/blog/_form_default.ejs to house all controls of the form -

<div class="form-group">
    <label for="title">Title</label>
    <input class="postlist-header" name="title" id="title" type='text' label="tags" value="<%= post.title %>"  required></input>
    <label for="title">Tags 📁</label>
    <input id="tags" name = "tags" type="text" label="tags" required value="<%= post.tags %>">

    <p>
        <label for="content">Content</label>
        <textarea id="content" name="content" cols="30" rows="20" required><%= post.content %></textarea>
    </p>

    <input name="id" id="id" type="hidden" value="<%= post.id %>">
</div>
<div class="form-group">
    <button type="submit">Save</button>
</div>

The form is a standard HTML form except the values of the fields - they are derived from the query and passed across to EJS as a parameter.

Save a post

Take action when the data is posted to /blog route. We do all the required operations in the route file itself to keep things simple. In real world you may want to just keep routing logic here and hive everything else to separate JS files (& call them “services”).

router.post("/blog", async (req, res) => {
  try {
    let postId = 0;
    const slug = slugify(req.body.title, { lower: true, strict: true });

    if (!req.body.id) {
      postId = await db("posts")
        .insert({
          title: req.body.title,
          content: req.body.content,
          tags: req.body.tags,
          slug: slug,
        })
        .returning("id");
    } else {
      postId = await db("posts")
        .update({
          title: req.body.title,
          content: req.body.content,
          tags: req.body.tags,
          slug: slug,
        })
        .where("id", parseInt(req.body.id))
        .returning("id");
    }

    res.redirect(`/blog/${slug}`);
  } catch (e) {
    console.error(e);
    res.render("blog/new", { post: req.body });
  }
});

The actual DB save is self-explanatory and simple - thanks to knex. We perform an insert or update operation depending on whether id value already exists in the post object.

Once the record is saved, we show the saved post with res.redirect(/blog/${slug});

Editing a post

We used a route /blog/edit/:id to trigger edit logic. The route queries the DB and passes the specific post details along.

<html>
  <head>
    <%- include('../partials/head'); %>
  </head>

  <body>
    <%- include('../partials/nav'); %>
    <div class="container">
      <section>
        <form action="/blog" method="POST">
          <%- include("_form_default") %>
        </form>
      </section>
    </div>
    <footer><%- include('../partials/footer'); %></footer>
  </body>
</html>

We will reuse the route /blog with method POST to save record - you will see this in the submit action <form action="/blog" method="POST">.

Finis

So, there you have it - a beautiful looking blog app of your own! You can create new posts, display a list of posts, view single post and even edit it :). Want more? Comment and let me know!

See the complete code on the Github repo.