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

• ​build​

The Build process

When you do npx frontity build you generate a build folder w/ 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 that 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​

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

But you can also use this generated server.js as part of a custom server like it's mentioned here​

// 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 genereate some reports automatically by using 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.

This report shows you the modules included on each bundle and the size of each one, so 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