Node EJS Sample

[preshndams]

Hi, I'm interested in integrating Node Express with EJS. I'd like to use data from a server.js file. Can you provide a sample that shows how to do this?

[webdiscus]

Hello @preshndams,

this plugin is for the Webpack, not for Express framework.
Here is the example Webpack with EJS.

[preshndams]

Is there a way I can add data asynchronously from the server when building the bundle? I have an express backend that fetches the data and passes it as props to the ejs templates.

[webdiscus]

You can use the EJS templates directly in Express to generate HTML dynamically. See the official doc here.

The Webpack plugin generates static HTML files from EJS templates. There is no way to generate dynamic HTML with Webpack on backend.

Also, following does not work: Browser request > read data from DB on backend > generate HTML via Webpack > output to Browser.

But you can generate static HTML with external variables:

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: [
        {
           import: 'src/views/home.html',
           filename: 'index.html', // save generated HTML into dist/index.html
           data: require('path/to/getCustomData.js'), // <= here you can pass external data into EJS template
        }
      ],
      preprocessor: 'ejs',
    }),
  ],
};

getCustomData.js :

const data = { user: { name: 'Max', age: '20' } }; // <= here you can define data for the template

module.exports = data;