CBM Fragment scripts

Helper for build and serve local fragment project

How to usedevelopment

# start a local server for local mode
cbm-fragment-scripts start
# build the bundle for production deployment
cbm-fragment-scripts build
# Build a common bundle
cbm-fragment-scripts build-commons
# Deploy the bundle assets on your CDN
cbm-fragment-scripts deploy-assets
# Clean the build folder
cbm-fragment-scripts clean

To make those scripts work you should adopt a defined project structure and set some parameters in your package.json

Configuration

Package.json

The package.json must have a buildConf key which gives the configuration to the cbm-fragment-scripts.

 "buildConf": {
    "bucketDir": "tops",
    "bucketPrefix": "assets.lacentrale",
    "assetsHost": {
      "local": "http://www.lacentrale.local:4002",
      "dev": "https://dev.lacentrale.fr",
      "dev2": "https://dev2.lacentrale.fr",
      "dev3": "https://dev3.lacentrale.fr",
      "rec": "https://rec.lacentrale.fr",
      "rec2": "https://rec2.lacentrale.fr",
      "prod": "https://www.lacentrale.fr"
    },
    "externals": {
      "cbm-popins": "cbm-popins",
      "cbm-helpers": "cbm-helpers"
    },
    "devPort": "4002",
    "maxAge": 86400
  }

externals property is merge with the following default package:

• cbm-auth
• jquery
• raven-js
• react
• react-dom

The package.json can have the following scripts. start is for development purpose. That's an ENV=local is define.

    "start": "ENV=local npm run cbm-clean && ENV=local npm run cbm-build-commons && ENV=local npm run cbm-start",
    "build": "npm run cbm-clean && npm run cbm-build-commons && npm run cbm-build",
    "cbm-start": "cbm-fragment-scripts start",
    "cbm-build": "cbm-fragment-scripts build",
    "cbm-build-commons": "cbm-fragment-scripts build-commons",
    "cbm-clean": "cbm-fragment-scripts clean",

Project configuration

* conf (configuration used by the lambda and the fragments. This will be injected into the bundle)
    * browser
        * env.dev
        * env.dev2
        * env.dev3
        * env.rec
        * env.rec2
        * env.prod
    * server
        * env.dev
        * env.dev2
        * env.dev3
        * env.rec
        * env.rec2
        * env.prod
* src
    * api (lambdas handlers. All files into this directory will become an output file)
    * commons (shared code or libs)
    * fragments (all the fragment of the stack come into a specific fragment directory)
        * fragment-foo
            * client
                * index.js (frontend fragment entrypoint)
            * server
                * handler.js (express router middleware)
            * pages (static pages)
              * pageNameA
                  * client
                    * index.js (frontend fragment entrypoint)
              * pageNameB
                * client
                    * index.js (frontend fragment entrypoint)
    * server (fragment server)
        * app.js (express server)
        * app.local.js (express development handler)
        * lambda.js (express lambda handler)