Build ssr project in docker with nginx

[Jumborner]

I've set up my project within a docker container and now I would like to build it and have everything working ( SSR included ). After building, I can open my app on localhost and it is working, except for the SSR which is nowhere to be seen.

Inside of the dist folder there is a client and server folders. I'd assume the server folder is the ssr which I need, but atm I am a bit clueless on how to get it working with docker.

[frandiox]

You need a Node.js server that calls the SSR tool you just built. To my understanding, you can put this Node.js server in a Docker container or anywhere as long as you redirect the ports properly.
There's an example of a Node.js server with Express.js here: https://github.com/frandiox/vite-ssr/blob/master/examples/node-server/index.js

[Jumborner]

Hmm, it sounds like there's something wrong with your build. There must be something exported as the default export. The name "main" depends on your entry point (it's main.js in the examples) but that shouldn't matter.

Do you have export default viteSSR(...) in your main.js?

If you can make a small reproduction I can have a look.

As for jQuery, my attempts have been unsuccessful.
No match found for location with path "/node_modules/jquery-flexdatalist/jquery.flexdatalist.min.js

Well, you can only use dynamic imports in async functions. Can you try downloading jQuery from a CDN instead? Something like <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

Hi, yeah I suspect that something is going on with the build, I have reverted to an earlier version, and now it seems to indeed include the default export correctly ( there are minimal differences between this one and the latest version ).

The jQuery is not yet resolved. I am in fact having trouble importing any script into index.html ( like intro.js ).
I get the Vue router error " [Vue Router warn]: No match found for location with path "/src/3rdParty/jquery/jquery.min.js" ". Basically for any script imported in index.html i get vue router errors on start. In case of jQuery, the cdn version works however, so it is whenever I tryot o include something from my assets or modules folder.

I will try to make a repo of the project if I can ( since i'm using a company library ).

[Jumborner]

For now, I have managed to somehow get jQuery working with a dynamic import inside of the onMounted ( why onBeforeMount does not work I don't know ) hook of a component which needs it .

if (!import.meta.env.SSR) {
        await import('../../3rdParty/jquery/jquery.min.js');
        await import('jquery-flexdatalist/jquery.flexdatalist');
      }

This is working, though it is less than ideal ( as i can see the elements briefly before the jQuery gives them the proper form ).

Why can I not import a single script from inside of index.html I'm not sure.

[Jumborner]

Getting closer to building the project. Scripts within index.html keep giving errors, but I do not use them for now.

A final problem which I am getting, is that I can briefly see the SSR of the wrong router path on page refresh.

Basically, inside of the viteSSR hook I need to determine which routes I will show depending on the domain. resourceId = await getDomainId(temp[0]);

Then I have an if statement, which checks the domain and loads the routes and components for each case domainDependentRoutes = routes1; and app.use... . Inside of the final else statement I have an array with the default set of routes. Once the routes have been determined, I do domainDependentRoutes.forEach(router.addRoute); . This works, if I go to domain1.localhost:port I get routes for one domain, in case of domain2.localhost:port I get routes of 2nd domain, and in the event of localhost:port I get the default ones.

The thing is, whenever I go to any one of the domains (domain1/domain2/etc), the page briefly shows me the SSR content of the final else statement with the default routes ( the '/' path contains some css and image which briefly shows on page refresh ). The console log inside of the else statement is not triggered ( I do not see it in the console ).

Example :

if (resourceId == '346345773332' || resourceId == '0964232664') {
      domainDependentRoutes = routes1;
      app.component(
        'Footer_3053558215452131331',
        defineAsyncComponent(() => import('@components/modules/Footer_3053558215452131331.vue'))
      );

      app.component(
        'Header_3053558215452131332',
        defineAsyncComponent(() => import('@components/modules/Header_3053558215452131332.vue'))
      );

      app.component(
        'Denied_3053558215452131351',
        defineAsyncComponent(() => import('@components/widgets/Denied_3053558215452131351.vue'))
      );
      app.component(
        'Layout_3125615793803362380',
        defineAsyncComponent(() => import('@layouts/Layout_3125615793803362380.vue'))
      );
      app.component(
        'Layout_3053558215452131328',
        defineAsyncComponent(() => import('@layouts/Layout_3053558215452131328.vue'))
      );
    } else {
      console.log("Default")
      domainDependentRoutes = routes2
    }
domainDependentRoutes.forEach(router.addRoute);

I guess this has to do with SSR not retreiving the resourceId during its render and simply skipping to the else statement. A question with this, apart on how to best handle it, is what exactly will be seen by the crawler? Will it see the correct paths or will it see only the one in the else statement?
P.S Idk if i should of started a new topic for different issues, seems like a waste but still sorry for the flooded topic

[frandiox]

@Jumborner How are you checking the domain/resource? It's probably failing in SSR as you say so the rendered HTML is always the else part. There's a url parameter in the main hook that you can use to see what's the domain.

To see what a crawler would see, you can use the view-source utility of your browser -- in Chrome is Ctrl+U (Windows) or ⌘-Option-U (Mac).

[Jumborner]

@Jumborner How are you checking the domain/resource? It's probably failing in SSR as you say so the rendered HTML is always the else part. There's a url parameter in the main hook that you can use to see what's the domain.

To see what a crawler would see, you can use the view-source utility of your browser -- in Chrome is Ctrl+U (Windows) or ⌘-Option-U (Mac).

@frandiox I take the first part of the url before the dot ( test from test.website.com ), and make a call to my api, which returns the resourceId, I use the url for this.

const getHostnameFromRegex = (url: any) => {
  const matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
  return matches && matches[1];
};
var reg = getHostnameFromRegex(url.origin);
    var temp = reg.split('.');
    try {
      var resourceId = await getDomainId(temp[0]);
    } catch (error) {
      console.log("Error fetching domain", error)
    }