Introduction

AdonisJS is a Node.js framework inspired by Laravel, designed to provide a robust and scalable foundation for building web applications. In this blog post, we'll walk you through the steps to set up AdonisJS 6 and create a simple "Hello World" application.

Prerequisites

Before you start, make sure you have the following installed on your machine:

• Node.js: AdonisJS requires Node.js to be installed. You can download it from the official Node.js website.
• npm or yarn: Package managers for Node.js. npm comes bundled with Node.js, but you can also use yarn.
• A code editor: Any code editor of your choice, such as Visual Studio Code, Sublime Text, or Atom.

Step 1: Install AdonisJS CLI

First, you need to install the AdonisJS Command Line Interface (CLI) globally. Open your terminal and run the following command:

npm install -g @adonisjs/cli

Step 2: Create a New AdonisJS Project

Now, let's create a new AdonisJS project. Navigate to the directory where you want to create your project and run the following command:

adonis new hello-world

This command will create a new directory named hello-world and set up a new AdonisJS project inside it.

Step 3: Navigate to the Project Directory

Move into the newly created project directory:

cd hello-world

Step 4: Start the Development Server

To start the development server, run the following command:

npm run dev

This command will start the development server, and you should see output similar to the following:

[adonis] server running in development mode
      [adonis] listening on http://127.0.0.1:3333

Step 5: Create a Route

AdonisJS uses routes to handle HTTP requests. Let's create a simple route to display "Hello World".

1. Open the start/routes.ts file:

import Route from '@ioc:Adonis/Core/Route'

        Route.get('/', async ({ view }) => {
          return view.render('welcome')
        })

        Route.get('/hello', async ({ response }) => {
          return response.send('Hello World')
        })

2. Explanation:
   • The first route (/) renders the welcome view, which is the default welcome page.
   • The second route (/hello) sends a simple "Hello World" response.

Step 6: Test the Route

Open your web browser and navigate to http://127.0.0.1:3333/hello. You should see "Hello World" displayed in the browser.

Step 7: Create a View (Optional)

If you want to render a view instead of sending a plain text response, you can create a view file.

1. Create a new view file:
   • Navigate to the resources/views directory.
   • Create a new file named hello.edge:

   
             
             
             
               
               
               
             
             
               
   Hello World from AdonisJS 6
             
             

2. Update the route to render the view:

import Route from '@ioc:Adonis/Core/Route'

        Route.get('/', async ({ view }) => {
          return view.render('welcome')
        })

        Route.get('/hello', async ({ view }) => {
          return view.render('hello')
        })

3. Test the view:
   • Open your web browser and navigate to http://127.0.0.1:3333/hello. You should see the "Hello World from AdonisJS 6" message rendered from the hello.edge view.

Conclusion

Congratulations! You've successfully set up AdonisJS 6 and created a simple "Hello World" application. AdonisJS is a powerful and flexible framework that can help you build robust web applications. For more advanced features and detailed documentation, refer to the official AdonisJS documentation.

Feel free to explore more features and dive deeper into the framework to build more complex applications. Happy coding!