API Reference
  • Introduction
  • 💻CLI Commands
    • Create commands
      • create
      • create-package
    • Run commands
      • dev
      • serve
    • Build commands
      • build
    • Extra commands
  • 🍱Packages
    • 💙Core package
      • frontity
    • ⚡Features packages
      • @frontity/wp-source
      • @frontity/tiny-router
      • @frontity/html2react
      • @frontity/head-tags
      • @frontity/yoast
      • @frontity/google-ad-manager
      • @frontity/smart-adserver
      • analytics packages
        • @frontity/google-analytics
        • @frontity/google-tag-manager-analytics
        • @frontity/comscore-analytics
      • @frontity/wp-comments
    • 📚Collections packages
      • @frontity/components
      • @frontity/hooks
        • Infinite Scroll Hooks
        • Intersection Observer Hooks
    • 🎨Themes Packages
      • @frontity/twentytwenty-theme
      • @frontity/mars-theme
  • 🔌WordPress Plugins
    • REST API - Head Tags
    • Frontity Embedded Mode
Powered by GitBook
On this page
  • The build process
  • How to execute a Frontity project in production after the build
  • The bundle analyzer

Was this helpful?

  1. CLI Commands

Build commands

PreviousserveNextbuild

Last updated 3 years ago

Was this helpful?

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

The build process

When you do 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

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

// 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

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

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.

You can directly execute this server.js by using the command .

You can also use this generated server.js as part of a custom server like it's mentioned .

Frontity generates some reports automatically by using .

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 .

💻
build
npx frontity build
npx frontity serve
here
Webpack Bundle Analyzer
Webpack Bundle Analyzer