Friday, 19 June 2020

Multi-Page NodeJS Application with LWC

12


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

  




12 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thanks for sharing
    Leanpitch provides online training in DevOps during this lockdown period everyone can use it wisely.
    DevOps Online Training

    ReplyDelete
  3. click here to know about AWS CLI completely. This is the best platform to improve your aws skills.

    ReplyDelete
  4. Awesome post! Personally I like your site. . I am so impressed to read your content. I am looking forward for the next valuable and informative concept in your blog. Overall outstanding post. Carry on :) Well done!
    If you want Digital Marketing Serives :-
    Digital marketing Service in Delhi
    SMM Services
    PPC Services in Delhi
    Website Design & Development Packages
    SEO Services PackagesLocal SEO services
    E-mail marketing services
    YouTube plans

    ReplyDelete
  5. Your information is really good and definitely that things are very useful. I'm impressed with your pleas to share much information with us.
    construction logistics services London

    ReplyDelete
  6. This article content is really unique and amazing. This article really helpful and explained very well's i am really thankful to you for sharing keep it up..

    Digital Marketing Service in Kanpur

    ReplyDelete
  7. I really want to thank the author for such a nice blog that helped me to understand why it is important. Email Marketing Services in Perth

    ReplyDelete
  8. This article's content is really unique and amazing. This article really helpful and explained very well. So I am really thankful to you for sharing keep it up..

    หวยออนไลน์จ่ายจริง

    ReplyDelete
  9. This article content is really unique and amazing.This article really helpful and explained very well.So i am really thankful to you for sharing keep it up..

    Digital Marketing Services

    ReplyDelete