DEV Community

Cover image for Supercharge your expressJs Views
Babacar Cisse DIA
Babacar Cisse DIA

Posted on

Supercharge your expressJs Views

Supercharge your expressJs Views

On the following few lines, I want to share with you how I added mixins to my expressjs application.

Add mixins to your views

  • Mix from laravel-mix (if you're from php world you know what I am saying) With laravel and mix, you're very likely to have the following snippets in your code base: Alt Text

Yes this is Pug (ex jade) syntax

Explanation of express mix helper

You are most likely asking yourself where the hell this mix method is coming from so here it is.
WTH meme

TLDR;

  this.app.locals.mix = (filename) => {
    const fileObject = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../assets/mix-manifest.json'), 'utf8'))
    const requestedFilename = fileObject[filename]
    if (!requestedFilename) {
      throw new Error(`${filename} not found in mix manifest. Manifest: ${JSON.stringify(fileObject, null, 2)}`)
    }
    return requestedFilename
  }
Enter fullscreen mode Exit fullscreen mode

I read the file outputed by webpack on build

  const fileObject = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../assets/mix-manifest.json'), 'utf8'))
Enter fullscreen mode Exit fullscreen mode

then I return the value matching to the key which is the filename in our case
Alt Text

    const requestedFilename = fileObject[filename]
    return requestedFilename
Enter fullscreen mode Exit fullscreen mode

Raise server error in case the file is not there. Should not happen but hey you never know when things can go wrong meme:dont-know

    if (!requestedFilename) {
      throw new Error(`${filename} not found in mix manifest. Manifest: ${JSON.stringify(fileObject, null, 2)}`)
    }
Enter fullscreen mode Exit fullscreen mode

Wrap up

Now you have some a nice helper function serving the latest build of webpack with a content hash to be fully efficient cache wise.
You're welcome!

Top comments (0)