Webformula core
Welcome Getting started Routing Serve / Build Binding variables Web component Fetcher Multiple languages github-circle-black-transparent GitHub github-circle-black-transparent Example app

Build / Serve

Serve or build app with bundles optimized based on routes
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,
    
        // 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