Introducing AdonisJS - Setup
Tags: adonisjs, node
Published: 2020-11-11 07:05:20

In this post, we will focus on setting up the development environment and also get our code editor ready to work with Typescript and Edge (the template engine of AdonisJS)

## Prerequisites

AdonisJS is a Node.js framework and therefore you must have Node.js installed on your computer.

If it's not installed, then please head over to [nodejs.org](https://nodejs.org/en/download/) and download the binary/installer for your operating system. If you are comfortable with the command line, then I recommend using [volta](https://volta.sh) **(personal favorite)** or [nvm](https://github.com/nvm-sh/nvm) for installing Node.js.

### Check Node.js version

Make sure that the installed version is greater than `12.0.0` along with `npm >= 6.0.0`.

```sh
node -v
npm -v
```

That's all you need :)

## Creating a new project

Creating a new AdonisJS project is pretty straight forward. All you need to do is run the following `npm init` command.

```sh
npm init adonis-ts-app todo
```

![](https://res.cloudinary.com/adonis-js/image/upload/q_100/v1605073459/devto/adonis-new_yve3iz.gif)

- Here `npm init` is an npm specific command to install a package and run its bin command in one go.
- The package name is [create-adonis-ts-app](https://www.npmjs.com/package/create-adonis-ts-app), but `npm init` wants us to drop the `create` prefix. Not sure about the history behind this decision, but the yarn has the same design as well.
- Finally `todo` is the path in the filesystem where you want to create the project. If the directory is missing, we will create it for you. However, if the directory already has files then we will refuse to create a project inside it.

### Differences between the `web` and the `api` project structure

The project creation flow prompts you to choose between the `api` and the `web` project structure. The following are the differences between both.

- The `web` project structure installs the [template engine](https://preview.adonisjs.com/guides/views/introduction) and the [session package](https://preview.adonisjs.com/guides/http/sessions) of AdonisJS. Also, the support for serving static files like **CSS** or **images** is enabled.
- On the other hand, the `api` project structure configures the support for CORS.
- Apart from these specific changes, the rest of the project structure and files are the same.

## Starting the development server

Run the following command to start the development server. Make sure that you are inside the project root before running the command.

```sh
node ace serve --watch
```

![](https://res.cloudinary.com/adonis-js/image/upload/q_100/v1605074788/devto/adonis-serve_a6h0k5.gif)

Here things get a bit interesting. We will talk about **ace commands** in the next post. But for now, `ace` is a command-line framework that is embedded within your app and this allows you to create project-specific commands and run them using `node ace`.

- The `serve` command starts the development server and the `--watch` flag continues watching the filesystem for changes and restarts the server after every change.
- Also, the `serve` command can run the typescript source directly. There is no intermediate compilation step and this speeds up things a little bit.

## VSCode setup

To begin with, I am going to share a list of extensions that you must install for VSCode. If you are not a VSCode user, then feel free to leave comments and I will update the blog post with other editors setup too.

- The source code is written in Typescript and luckily VSCode comes with out of the box support it and hence no special plugins are required to work with Typescript.
- You must install the [Edge template support](https://marketplace.visualstudio.com/items?itemName=luongnd.edge) plugin to have syntax highlighting for the AdonisJS template engine (Edge).
- If you don't hold strong opinions against prettier and eslint. Then I highly recommend [VScode Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [VSCode prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) plugins to make your life a bit easier.

## What's in the box?

Since AdonisJS is a fully-featured framework, you get a lot with a new application. The following features or functionality is baked right into the core of the framework.

- HTTP stack. It includes the router, request & response objects, support for middleware, global exception handler.
- Bodyparser and support for file uploads. Even stuff like directly streaming files to a third party like s3.
- Validator to validate the request data.
- Encryption and Hash modules with sensible defaults by keeping overall security in mind.
- An embedded command line framework `ace`.
- Support for encrypted/signed cookies and session.
- Support for serving static files from the `public` directory.
- And finally, a well thought project structure and out of the box support for typescript.

## Closing thoughts

This post is mainly targeted towards the audience using AdonisJS or Node.js for the first time. I want to talk about every little detail without making assumptions that the reader already knows this.

If you think all this is a no-brainer for you, then stick around, things will get interesting as we will make progress 🙂