Multi-Page NodeJS Application with LWC

LWC open source application supports only single-page applications and there is no config attribute in lwc-services.config.js which enable us to make our app multi-page.

In a single-page application, LWC takes a single entry point as index.js and merges it with index.html to generate a final html file.

Structure of single page LWC project is as follows :

But our requirement was to implement multi-page application which can have structure as follows :

After doing some research my team and I found a solution which uses a custom webpack configuration file. We found out that there is an attribute ‘-w’ for lwc-services watch, lwc-services build commands. It takes the location of a custom webpack configuration file, which will be merged into the default config.

In that custom webpack configuration file, we need to provide multiple entries. An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

Also we can use plugins which are used to customize the build process in a variety of ways. While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

Also we need to provide a module resolver which allows us to access modules in our js files. A resolver is a library which helps in locating a module by its absolute path. A module can be required as a dependency from another module.
After reading the above resources, we can write our own custom webpack configuration file which can be used to build LWC open source app which will run as a multi-page application as follows :

Yuvraj Lohiya

Senior Technical Lead 

iBirds Software Services Pvt. Ltd.

For more details on this topic you can contact us on : yuvraj.lohiya@ibirdsservices.com aslam.bari@ibirdsservices.com