Build commands
These commands will allow you to generate the code that can be used to run or analyze a Frontity project
The build process
You'll get something similar to this:
1
├── build
2
│ ├── analyze
3
│ │ ├── module-development.html
4
│ │ └── server-development.html
5
│ ├── bundling
6
│ │ ├── chunks.module.json
7
│ │ └── entry-points
8
│ │ ├── server.ts
9
│ │ └── my-frontity-project
10
│ │ └── client.ts
11
│ ├── server.js
12
│ └── static
13
...
14
│ ├── xxxxx1.module.js
15
│ ├── xxxxx2.module.js
Copied!
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
npx frontity serveSo, easy way of executing a Frontity project in any Node.js server:
- Launch remotely
npx frontity buildto generate thebuildfolder. - Launch remotely
npx frontity serveto launch a web server that makes use of theserver.jsgenerated in the previous step.
Using server.js as a middleware
server.js as a middleware1
// lambda.js
2
const awsServerlessExpress = require("aws-serverless-express");
3
const app = require("./build/server.js").default;
4
const server = awsServerlessExpress.createServer(app);
5
6
exports.handler = (event, context) => {
7
awsServerlessExpress.proxy(server, event, context);
8
};
Copied!
The bundle analyzer
When doing
npx frontity build you get a build folder in the root of your project.1
├── build
2
│ ├── analyze
3
│ │ ├── module-development.html
4
│ │ └── server-development.html
5
│ ├── bundling
6
│ │ ├── chunks.module.json
7
│ │ └── entry-points
8
│ │ ├── my-frontity-project
9
│ │ │ └── client.ts
10
│ │ └── server.ts
11
│ ├── server.js
12
│ └── static
13
│ ├── my-frontity-project.module.js
14
│ └── list.module.js
Copied!
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 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.
Last modified 5mo ago