Build / serve

Build app

No need for webpack or other bundlers. ESbuild is packed in and pre configured. Builds are also optimized based on route entry points.

Minification
Sourcemaps
Dev server
live relaoding
Gzip content
File copying

        
  import build from '@webformula/core/build';

  /**
  * Basic
  * If using 'app/' as root folder then no config needed
  */
  build();
  

  /**
  * Full config options
  */
  build({
    // Enable spa routing : Default true
    spa: true,

    // folder that contains 'app.js' : Default 'app.js'
    basedir: 'app/',

    // folder that contains 'app.js' : Default 'dist/'
    outdir: 'dist/',

    /**
    * Default true
    * Split code using routes for optimal loading
    */
    chunks: true,

    /**
    * Minify code
    * Set to 'true' when 'NODE_ENV=production'
    *   otherwise it defaults to 'false'
    */
    minify: true,

    /**
    * Create source maps
    * Set to 'false' when 'NODE_ENV=production'
    *   otherwise it defaults to 'true'
    */
    sourcemaps: false,

    /**
    * Compress code
    * Set to 'true' when 'NODE_ENV=production'
    *   otherwise it defaults to 'false'
    */
    gzip: true,

    /**
    * Run dev server
    * Set to 'false' when 'NODE_ENV=production'
    * otherwise it defaults to 'true'
    */
    devServer: true,

    /**
    * Livereload
    * Simply use watch to enable 'node --watch build.js'
    * Set to 'false' when 'NODE_ENV=production'
    * otherwise it defaults to 'true'
    */
    devServerLiveReload: true,
    
    devServerPort: 3000,

    /**
    * devWarnings
    * Enable console warning
    * only html sanitization currently
    * otherwise it defaults to 'false'
    */
    devWarnings: false,

    // supports regex's with wildcards (*, **)
    copyFiles: [
      {
        from: 'app/image.jpg',
        to: 'dist/'
      },
      {
        from: 'app/routes/**/(?!page)*.html',
        to: 'dist/routes'
      },
      {
        from: 'app/code.js',
        to: 'dist/code.js',
        transform({ content, outputFileNames }) {
          // doo work
          return content;
        }
      }
    ],

    // callback before bundle
    onStart: () => {},

    // callback after bundle
    onEnd: () => {}
  });

Native server

        
  import { createServer } from 'node:http';
  import { middlewareNode } from '@webformula/core/middleware';
  
  // same options as above
  const middleware = middlewareNode({
    basedir: 'docs/',
    outdir: 'dist/',
    copyFiles: [
      { from: 'docs/favicon.ico', to: 'dist/' }
    ]
  });
  
  createServer(async (req, res) => {
    const handled = await middleware(req, res);
    if (handled === true) return;
    
    // Do other stuff
  }).listen(3000);

Express server

        
  import express from 'express';
  import { middlewareExpress } from '@webformula/core/middleware';
  
  const app = express();
  // same options as above
  app.use(middlewareExpress({
    basedir: 'docs/',
    outdir: 'dist/',
    copyFiles: [
      { from: 'docs/favicon.ico', to: 'dist/' }
    ]
  }));
  app.use(express.static('./docs'));
  app.listen(3000);

Run commands

        
  # Development run
  node build.js
  
  # Development run with watch to enable livereload
  node --watch-path=./app build.js
  
  # Production run. minifies, gzips, and writes files
  NODE_ENV=production node build.js

Build / Serve