[📖] Order of execution

[Nefcanto]

Suggestion

Can you please provide a page to explain which files, or function would execute first?

To get that data, I had to write console.log all over the place:

console.log('I am entry.express.ts')
console.log('I am entry.ssr.ts')
console.log('I am plugin@some-name.ts')
console.log('I am root.tsx')

It would help greatly in having ideas about extending the Qwik for new needs.

Right now, we are in the need of dynamic configuration and Qwik and QwikCity are extremely poor in this regard. We can't make it work. The lack of documentation and support from the community adds to the blockage.

[gioboa]

Hi @Nefcanto thanks for the suggestion. Would you like to contribute and write the documentation for that?

[Nefcanto]

@gioba, you're welcome. The point is that I don't know. I don't have the knowledge of the order of the execution.

[wmertens]

@Nefcanto what do you mean with dynamic configuration?

Also, what do you mean with lack of support from the community? Did you ask in the help channel on Discord and got ignored?

As to the order in your examples, entry.express is used instead of entry.ssr as the server when you deploy an express app. Plugins run before routes and root is the start of the app during SSR and normally doesn't run on the client.

[Nefcanto]

@wmertens, thank you for answering. We want to remove .env and .env.production from our source, so that our build would be free from hardcoded values in the final code. Then we can use the same build for multiple customers. For each customer, we can use public-settings.json and private-settings.json files that are in the server directory or the dist directory and read the configuration from there. That's the notion of dynamic configuration. Another colleague has already asked about it https://github.com/BuilderIO/qwik/issues/5911.

Regarding the discord, yes, I asked for help and I received no answer. I asked here and since Discord has a somehow more attentive nature, I assumed that a day could mean lack of support.

The point is, we are a web-design company and we migrated from Next.js to Qwik (and we are extremely happy by that decision in terms of Google Lighthouse scores). But we are stuck at extensibility. We need to create a meta-meta-framework, an internal framework upon QwikCity and Qwik. Because we need to reduce costs for hundreds of customers.

One aspect of that is to reduce deployment costs. Right now, for each customer, we have a different set of settings (inside the .env and .env.production and tailwind.config.js files) and we need to constantly comment/uncomment. Because 10 customers might order one website from us, only with different colors and settings.

We need to make it dynamic. We need to create a build, that is neutral and could be used for multiple customers. This reduces maintenance costs.

And regarding the order of execution it would be a great page in docs. In fact, it's the lifecycle of a Qwik app.

[Nefcanto]

My suggestion is this outline:

Order of execution:

• app lifecycle
  • dev
    • x, y, z
  • preview
    • a, y, z
  • prod
    • b, y, z
• request lifecycle
  • x, y, z

[wmertens]

@Nefcanto I'm also an unpaid volunteer so it would be great if you contribute these docs. It will deepen your understanding by writing them, and help people both at your company and others.

[Nefcanto]

@wmertens, that's for the order of execution docs. I would love to. But of course, I don't know them. And it requires reverse-engineering and it might not be correct. But regarding the dynamic settings, that's not in my scope of capabilities.

[PatrickJS]

ok I'm fairly certain it's this

console.log('I am entry.express.ts|entry.preview.ts') // <-- your platform entry
console.log('I am plugin@some-name.ts') // <-- runs alphabetical order 
console.log('I am server$') // <-- for server$ requests ends here
console.log('I am entry.ssr.ts')
console.log('I am root.tsx') // <-- only because it's included in entry
console.log('I am layout.tsx onRequest then onGet/on<http-verb>')
console.log('I am globalLoaders')
console.log('I am routeLoaders')
console.log('I am jsx/components on a route')

[Nefcanto]

@PatrickJS, good list. Thank you. How about the order of the plugins? Alphabetically?

[PatrickJS]

yeah