# Build commands

These commands will allow you to generate the code that can be used to run or analyze a Frontity project

* [`build`](/frontity-cli/build-commands/build.md)

## The build process

When you do [`npx frontity build`](/frontity-cli/build-commands/build.md) you generate a `build` folder with several files.

You'll get something similar to this:

```
├── build
│   ├── analyze
│   │   ├── module-development.html
│   │   └── server-development.html
│   ├── bundling
│   │   ├── chunks.module.json
│   │   └── entry-points
│   │       ├── server.ts
│   │       └── my-frontity-project
│   │           └── client.ts
│   ├── server.js
│   └── static
           ...
│       ├── xxxxx1.module.js
│       ├── xxxxx2.module.js
```

The most important file for deployments in any hosting is `server.js`, which is actually a middleware that can be *inserted* in a custom web server.

### How to execute a Frontity project in production after the build

#### `npx frontity serve`

You can directly execute this `server.js` by using the command [`npx frontity serve`](/frontity-cli/run-commands/serve.md).

So, easy way of executing a Frontity project in any Node.js server:

* Launch remotely `npx frontity build` to generate the `build` folder.
* Launch remotely `npx frontity serve` to launch a web server that makes use of the `server.js` generated in the previous step.

#### Using `server.js` as a middleware

You can also use this generated `server.js` as part of a custom server like it's mentioned [here](https://community.frontity.org/t/deploy-to-aws-lambda/814/8).

```
// lambda.js
const awsServerlessExpress = require("aws-serverless-express");
const app = require("./build/server.js").default;
const server = awsServerlessExpress.createServer(app);

exports.handler = (event, context) => {
  awsServerlessExpress.proxy(server, event, context);
};
```

### The bundle analyzer

Frontity generates some reports automatically by using [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).

When doing `npx frontity build` you get a `build` folder in the root of your project.

```
├── build
│   ├── analyze
│   │   ├── module-development.html
│   │   └── server-development.html
│   ├── bundling
│   │   ├── chunks.module.json
│   │   └── entry-points
│   │       ├── my-frontity-project
│   │       │   └── client.ts
│   │       └── server.ts
│   ├── server.js
│   └── static
│       ├── my-frontity-project.module.js
│       └── list.module.js
```

Inside that `build` folder there is a `.html` file generated at `analyze/module-development.html`. This file is a visual report in the form of a tree generated by [Webpack Bundle Analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).

![](https://frontity.org/wp-content/uploads/2021/04/bundle-analyzer.gif)

This report shows you the modules included on each bundle and the size of each one, so that you can analyze them and maybe decide using other modules (or not including a specific module at all) to reduce the size of the final bundle.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://api.frontity.org/frontity-cli/build-commands.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.