# Nuxt3 + Express API

So, a while ago I needed this integration for a personal project, and of course I used the all mighty Google, but could not find any step by step tutorial. All the information related to this topic contains [Nuxt3 API Routes](https://v3.nuxtjs.org/docs/directory-structure/server), but when you want to be a little special 😇 the Universe works against you. 
You can check the steps below and let me know what you think, or if you have anything you want to add let me know in the comments. 


# First step

Create a new Nuxt3 app using: 

```bash
npx nuxi init nuxt3-express
```

After that, cd into that directory and install the dependencies:

```bash 
cd nuxt3-express

# Using NPM
npm install 
# Using Yarn
yarn install
```


You need to create a folder into the root of the project called `server-middleware` (you can choose the name here, but it needs to be different from `server` so it will not make a conflict with [this](https://v3.nuxtjs.org/docs/directory-structure/server)) in your project's root directory.

After that, install Express:

```bash 
# Using NPM
npm install express
npm install -D @types/express
# Using Yarn
yarn add express
yarn add -D @types/express
```

## Second step

Now we can create a basic api with Express. Make an `index.ts` file in the `server-middleware` folder.

In the `index.ts` file add the following snippet: 

```ts 
import express from "express";
const app = express();

app.use(express.json());

app.get("/", (req, res) => {
  res.json({
    message: "🦄🌈✨👋🌎🌍🌏✨🌈🦄",
  });
});

export default app;

```

It is important to export the express app so that nuxt can use it, so don't forget to do that.

## Final Step

Search for `nuxt.config.ts` in the root of the project and add a `serverMiddleware`.

```ts
import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  serverMiddleware: [
    // Will register file from project server-middleware directory to handle /server-api/* requests
    { path: "/server-api", handler: "~/server-middleware/index.ts" },
  ],
});

```

The value that you set for the property `path` in the above snippet will be added before your routes from express.

At this moment, you should be able to navigate to '/server-api` and you will receive:
```json
{"message":"🦄🌈✨👋🌎🌍🌏✨🌈🦄"}
```

Pretty similar with the Nuxt2 approach, right? 🤔