@fbi-js/factory-web NPM

factory-web

factory for web application development

This is a factory for fbi v4

Requirements

node v10+

Usage

$ npx fbi create @fbi-js/factory-web

Templates

vue: template for vue web application
react: template for react web application
micro-main: template for Micro-fontends base application
micro-vue: template for Micro-fontends vue application

Commands

serve: start development server
```
fbi s
```
build: build files in specify env mode (default: production)
```
fbi b
```

Configuration

FBI Config

fbi field in package.json or .fbi.config.js in the project's root folder. This config specified the factory, template, and features used by the current project. e.g.:

// package.json
"fbi": {
  "factory": {
    "id": "@fbi-js/factory-web",
    "version": "",
    "template": "react",
    "features": { "typescript": true, "admin": true }
  }
}

Webpack Config

Each template has a built-in configuration. e.g.:

react: @fbi-js/webpack-config-react
vue: @fbi-js/webpack-config-vue

You can extends or customize webpack config based on the built-in configuration. Touch a webpack.config.js file in the project's root folder. Then you can write configuration in several ways:

plaint webpack config. docs

module.exports = {
  entry: './index.js',
  resolve: {
    alias: {
      // ...
    }
  }
  // ...
}

config options. docs

const config = require('@fbi-js/webpack-config-react').default

module.exports = config({
  options: {
    isTs: true
    // ...
  }
})

plaint webpack config + config options.

const config = require('@fbi-js/webpack-config-react').default

module.exports = config({
  options: {
    isTs: true
    // ...
  },
  webpackConfig: {
    // plaint webpack config goes here
  }
})

Other Configs

eslint: eslintConfig field in package.json. docs
stylelint: stylelint field in package.json. docs
browserslist: browserslist field in package.json. docs
prettier: prettier field in package.json. docs

Development

Build your own factory-web based on @fbi-js/factory-web,

Create a project

npx fbi create @fbi-js/factory-factory

npm i @fbi-js/factory-web

Create and modify files

// src/index.ts

import FactoryWebBase from '@fbi-js/factory-web'

import CommandX from './commands/my-command'
import TemplateX from './templates/my-template'

const { name, description } = require('../package.json')

export default class FactoryWeb extends FactoryWebBase {
  id = name
  description = description

  // 1. replace default commands and templates
  commands = [new CommandX(this)]
  templates = [new TemplateX(this)]

  constructor () {
    super()

    // 2. OR: extends default commands and templates
    // this.commands.push(new CommandX(this))
    // this.templates.push(new TemplateX(this))
  }
}

Compile ts files