als-build

Als-Build

Not for use - being tested

Als-build is a frontend framework for building ssr and html web pages with built in route system based on file paths.

• Als-Build
  • Basics
    • Parameters
  • What build does
    • Inside src folder
    • Parameters
  • nodemon ignore
  • ignore

Basics

Install with npm i als-build and create:

1. src folder on root folder of your project
2. build.js with folowing example code

Syntax:

let build = new Build(
  srcDirPath:string,
  options={
    url='':string,
    minify:false,
    ecmaVersion:2022:number,
    prefix:'imported':string,
    publicDirName='public':string,
    viewsDirName='views':string,
    layoutObj={}:Object
  }:Object,
): instanceof Build 
build.build(): instanceof Build 
build.watch(): instanceof Build 

Parameters

• srcDirPath - directory path for source files
• url - base url for all routes (has to start with /)
• options
  • minify - if true minifying js and css files
  • ecmaVersion - 2022 for default
  • prefix - prefix added to functions
  • publicDirName='public' - folder name for public files
  • viewsDirName='views' - folder name for views files
  • layoutObj={} - default layout object
  • bundle=true - makes js and css bundle instead separated files
  • cjsScriptInFooter=true - is main script in footer or header

Example:

let {join} = require('path')
let Build = require('als-build')
let srcDirPath = join(__dirname,'src')

new Build(srcDirPath,{url:'/public'})
.build() // for building once from src
.watch() // for building and watching for changes in src

What build does

Running build, will create two folders:

1. public - for public files
   1. public/resources - for all resources by in folder by route
   2. public/routeName/index.html - for route
2. views - for server side rendering and building html files

Inside src folder

Inside src folder, you can place any file you want and route files. Route files are files which has .cjs or .html.cjs extension and return function(layoutObj,data) which has to return modified layoutObj.

The layoutObj, is an instance of als-layout class which will create view file and then html file if needed.

The defaults for layoutObj, taken from options.layoutObj which you provided on constructor. Also, layoutObj will include rootUrl which is url, you have provided on constructor.

Inside route files you can require files for frontend and for backend, by setting params (back=false,front=false). Also you can require any files you want, and if it's not js or css files, it's just will be copied to public/resources folder. Also you can set front=footer for puting resource file on footer and fn=false to use content as is and not inside function.

If route file is .html.cjs, inside public folder will be created index.html by repiting folder structure in src folder.

Example for route file:

require('./some.css')
require('./some.png')
let some = require('some-package?back=false')
let header = require('./layout/header?front=false')
let footer = require('./layout/footer?front=false')
let body = require('./layout/body?front=false')
module.exports = function(layoutObj,data) {
    let strData = JSON.stringify(data)
    layout.scripts[layout.scripts.length-1].footer=false // put last code on footer
    layoutObj.scripts.push({inner:`let data = ${strData}`,footer:true})
    layoutObj.header = header
    layoutObj.footer = footer
    layoutObj.body = body
    return layoutObj
}

Example for src folder and views and public folders which has created for src folder.

• src
  • dashboard
    • .html.cjs
  • .html.cjs
  • route1.cjs
• views
  • route.js
  • route1.js
  • dashboard
    • .js
• public
  • resources
    • dashboard
  • index.html
  • dashboard
    • index.html

Parameters

You can use those parameters as query parameters inside require statement, or in imported file it self inside comments at the top of the file:

• back=false - don't use on view files, but use in frontend
• front=false - don't use on frontend, but use in view files
• front=footer - use on frontend and put on footer
• fn=false - add this script as is, and not inside function

Example for usage as parameter

/**
 * @front = footer
*/

nodemon ignore

if nodemon installed, adding ignore for src, view and public folder

ignore

You can add .ignore file to "view" and "public" folders with list of files to ignore. This file will allow you to add files to "public" and "view" folders which will not be cleaned up on build.