multiple entry points?



  • Hi, im moving my app from vue cli3 + vuetify where in have two entry points.

    I’m using: https://cli.vuejs.org/config/#pages

    Is it possible to configure it with quasar cli?

    My vue.config.js file looks like that:

    module.exports = {
      pwa: {
        name: 'app'
      },
      devServer: {
        port: 5004
      },
      pages: {
        app: {
          entry: 'src/main.js',
          template: 'public/index.html',
          filename: 'index.html',
          excludeChunks: ['silent-refresh']
        },
        'silent-refresh': {
          entry: 'src/silent-refresh.js',
          template: 'public/silent-refresh.html',
          filename: 'silent-refresh.html',
          excludeChunks: ['app']
        }
      }
    }
    
    

    Thanks for any tips 🙂



  • Due to no answers in some time I will try to add some detailed questions.

    Is it even possible to have multiple entry points with quasar cli?
    Maybe I can use some package or extension to build two js files in one time to one directory?

    If not how do you think I should hack this?
    Should I biuld my second entry point and copy it to statics folder?



  • @lucaste it would be nice to have an opportunity to generate multiple html files. As for now, Quasar works in SPA - SINGLE page application mode. If you want multiple html pages in one www directory I can think of such options:

    1. you could make different quasar project for every page. There is an option in configuration, where you can change default “index.html” to anything. Quasar wisely produces unique file names (for css,js etc), so you could copy all of them into a single www directory.

    2. there is a router in Vue so if it’s ok then you can use single index.html with # routings - index.html#page1 or index.html#page2. Ugly but works.

    3. you could make a SSR project in Quasar with all the pages you need as in previous solution and then make some rewrite rules on your reverse proxy. In example index.html -> ssrhost/index.html#index, mypage.html -> ssrhost/index.html#mypage etc.

    4. you can write feature request on Quasar github page and wait until it will be implemented. I’m somewhat sure, that sooner or later this will be easily possible, because multiple pages from one project is a rather common use case.



  • Thanks @lucaste for saving me a couple hours! I had the same problem and was wondering if Vue Router Pages would be the solution. It seems like it’s not.

    In my example:

    • I have my main SPA app, plus a /login page with a simple form.
    • I want my users to be able to land on /login. (Multiple entry point here).
    • Main app and Login have the same header and footer components.

    @qyloxe thanks for your suggestions.

    1. you could make different quasar project for every page. There is an option in configuration, where you can change default “index.html” to anything. Quasar wisely produces unique file names (for css,js etc), so you could copy all of them into a single www directory.

    Three concerns I have with this one:

    1. I am not sure how well that will play in Cordova/Electron. Ultimately I want both of these pages to be in the same mobile app (user lands on Login page first, then goes to the main app).
    2. The shared components/assets (e.g. footer and header) are going to be downloaded twice – same content, different names as you said.
    3. I’ll have as many quasar.conf files as my entry points. Managing them is going to be tricky given I might want to make a change on all of them (copy and paste them same setting in multiple conf files will be so error-prone).
    1. there is a router in Vue so if it’s ok then you can use single index.html with # routings - index.html#page1 or index.html#page2. Ugly but works.

    I am using history mode to save on the ugliness. 🙂 So it’s important for me to have www.mydomain.com/login URL to work.

    1. you could make a SSR project in Quasar with all the pages you need as in previous solution and then make some rewrite rules on your reverse proxy. In example index.html -> ssrhost/index.html#index, mypage.html -> ssrhost/index.html#mypage etc.

    Actually, I tried going down the SSR path but I got bummed out and lost with a lot of “window is not defined” in my Client Side libraries. I wish there was an architectural guidance on that.

    The fact of the matter is, I don’t need SSR here, per se. I don’t need the Login page to be rendered in server side necessarily. I just want to have a second entry point.

    1. you can write feature request on Quasar github page and wait until it will be implemented. I’m somewhat sure, that sooner or later this will be easily possible, because multiple pages from one project is a rather common use case.

    I really hope so. Until then, I will appreciate any idea/brainstorming. Thanks, guys!



  • PS. The solution I am going to go with, for now, is similar to your #2. I am going to have my Nginx do reverse proxy anything like mydomain.com/login to mydomain.com/index.html?from=/login, then in my router, at the first rendering time, I’ll try to parse that from query parameter and make an internal programmatic navigation to that page.



  • … aaaaaaaand (3 hours later) apparently quasar server has a --history which does this and makes it work like a charm!



  • I must admit, it’s quite tricky to set up a second entry point. In my case I needed to load the app with different headers through different index.html depending on the domain.

    The only solution I found was to tell webpack directly, in my quasar.conf I have something like :

    const env = require('quasar-dotenv').config();
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = function (ctx) {
       return {
          ...
          build: {
             ...
             extendWebpack(cfg) {
                ...
                cfg.plugins.push(
                   new HtmlWebpackPlugin({
                      template: `${__dirname}\\src\\index2.template.html`,
                      filename: 'index2.html',
                      chunks: 'all',
                      ctx: ctx,
                      process: { env: env },
                      productName: "PageTitle",
                      productDescription: "PageDescription"
                   })
                );
             }
          }
       }
    }
    

    /!\ The second index will be generated referencing the same assets and bundle.js



  • @LaZe hmm, your solution looks quite promising. I must admit, that multiple output html files would be VERY interesting for Quasar. I can think of scenario, where you would generate multiple html files and then compile them with quasar/webpack, put them on the static host and voila, the website of an army of simple and small SPAs is ready!


Log in to reply