DADI Web: Handling front-end assets


  • DADI

    Most of the DADI platform is built on Node.js, which means access to a plethora of ways to manage front-end workflow within your app: Bower, Grunt, Gulp, Webpack are just a few.

    At DADI we find the majority of our front-end needs can be met with simple chaining of NPM scripts - eliminating another level of abstraction and one less dependancy.

    Folder structure

    Assuming you have installed DADI Web you can begin to setup your folder structure. A typical folder structure for us looks like the following:

    workspace/
    ├── datasources/
    ├── events/
    ├── frontend/
    |   ├── lib/
    |   ├── sass/
    |   └── src/
    ├── middleware/
    ├── pages/
    ├── public/
    |   └── assets/
    |      ├── img/
    |      ├── css/
    |      └── js/
    ├── routes/
    └── utils/
    

    frontend/lib

    Any libraries that we have written ourselves, or cannot be found on NPM.

    frontend/sass

    Sass gives us an improved CSS syntax so we can write less code which is more modular and easy to follow.

    frontend/src

    Here we store the source files for each Javascript module we write.

    public/assets

    These three folders, img, css and js the publicly accessible endpoint for assets to be served through DADI Web.

    NPM scripts

    Typically you will use npm start to start DADI Web, but we can also use these commands to initiate a build script for us. We are going to assign ours to npm run build.

    First off, here’s what the final package.json looks like. It might seem messy, but if you follow along from to to bottom it is in a logical order.

    {
      "scripts": {
        "prebuild": "mkdir -p workspace/public/assets/css workspace/public/assets/js",
        "build:css": "node-sass workspace/frontend/sass/main.scss workspace/public/assets/css/main.css --source-map-embed true --source-map-contents true",
        "postbuild:css": "postcss workspace/public/assets/css/main.css --use postcss-import --use autoprefixer --autoprefixer.browsers '> 1%' --use postcss-clean -o workspace/public/assets/css/main.min.css --replace --map",
        "prebuild:js": "jshint workspace/frontend/src/**.js",
        "build:js": "browserify workspace/frontend/src/**.js --debug | exorcist workspace/public/assets/js/main.js.map > workspace/public/assets/js/main.js",
        "postbuild:js": "uglifyjs workspace/public/assets/js/main.js -o workspace/public/assets/js/main.min.js"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.4",
        "browserify": "^14.5.0",
        "exorcist": "^1.0.0",
        "jshint": "^2.9.5",
        "node-sass": "^4.7.2",
        "postcss-clean": "^1.1.0",
        "postcss-cli": "^4.1.1",
        "postcss-import": "^11.0.0",
        "uglify-js": "^3.2.0"
      }
    }
    
    1. prebuild
      This is a simple command to create the folders we discussed previously (incase they don’t exist for whatever reason).
    2. build
      Although we haven’t expressively said it, when we npm run build it will run the child scrips delimitated by the :, therefore the next two will be run...
    3. build:css
      Use node-sass to compile our CSS from Sass - for smaller projects you may not even need this extra toolset, but we find it helps larger projects stay organized.
    4. postbuild:css
      Use PostCSS to import other CSS files ‘require’ style, add vendor prefixes and then minify the output...or any other PostCSS plugin you want.
    5. prebuild:js
      Use JSHint to check for any code issues (this will stop the process and flag any errors in your terminal).
    6. build:js
      Use Browserify to compile the src/ folder into a single JS file. We then use exorcist to create a sourcemap.
    7. postbuild:js
      Use UglifyJS to minify the output.

    Sourcemaps only for debugging

    We now have a minified and no-minified version of our JS and CSS. For an extra touch you can load the non-minified version, including sourcemaps, when you’re in debug mode. For example using ES6 template syntax:

    <link rel="stylesheet" href="/assets/css/main${debug ? '.min' : ''}.css">
    
    <script src="/assets/js/main${debug ? '.min' : ''}.js"></script>  
    

    Conclusion

    Hopefully that's covered an average setup. Once you get familiar with all the CLI tools out there you can begin to add more customisation – such as live reloading and transpiling your JS. Questions? Find us on Discord.


Log in to reply
 

Looks like your connection to DADI Forum was lost, please wait while we try to reconnect.