Deploy quasar to netlify with ssr mode #16565
dongwa
started this conversation in
Show and Tell
Replies: 3 comments
-
thanks, it's work |
Beta Was this translation helpful? Give feedback.
0 replies
-
For ease of use, I have encapsulated the above steps as an extension,you can try it: |
Beta Was this translation helpful? Give feedback.
0 replies
-
Thanks alot😎 |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello everyone,
I dedicated a lot of time and effort to successfully deploy Quasar on Netlify with SSR mode and I'd like to share my process and some optimization tips. Please keep in mind that my method may not be the best, so if you have any better suggestions, I'm open to discussing them.
there is an example repo: https://github.com/dongwa/quasar-netlify-ssr-demo
Let's dive into the process:
1. Initial Setup
At the outset, there was a scarcity of information on deploying Quasar SSR on Netlify. To overcome this hurdle, I treated the Quasar SSR app as an Express app. This allowed me to leverage information related to Netlify and Express for the deployment.
2. Creating the Netlify Configuration File
To get started, I created a Netlify configuration file named
netlify.toml
at the root of my project. Here's what the file looks like:3. Overcoming Challenges
One of the first challenges I encountered was related to the
[functions].directory
configuration. Initially, I tried to usedist/ssr/index.js
as Netlify's function, but it resulted in an error that said, "index.handler is not defined or not exported." I realized that Netlify requires a JavaScript file structured as follows:However, Quasar's
dist/ssr/index.js
had a different structure:To resolve this, I made changes to the
listen
function insrc-ssr/server.js
by removing all async code to eliminate promises like:and then created a new function,
dist/ssr/netlify/functions/index.js
, as Netlify's function. Here's what it looks like:4. Managing Clean Builds
Since the
dist
directory gets cleaned during the build process, I added a script to create thedist/ssr/netlify/functions/index.js
file after each build. I accomplished this by editing thequasar.config.js
file:5. Handling Static Asset Loading
After deploying, I encountered an issue where only the initial HTML page loaded, and all static assets like CSS and JS files were not working as expected.
To be honest, I'm not entirely sure why this happened. In theory, Quasar should already be handling the static file hosting. However, I did find a solution:
To address this, I made some changes to the
netlify.toml
file by adding specific[[redirects]]
rules:This ensured that
client/assets
directory would load correctly. However, adding all client files to[[redirects]]
was a tedious process.6. Alternative Redirect Handling
I found an alternative approach to handle redirects by referring to Netlify's documentation. You can save a plain text file called
_redirects
without a file extension in your site's publish directory. refs https://docs.netlify.com/routing/overview/To automate this process, I used JavaScript to generate the
_redirects
file after each build:After these adjustments, I successfully deployed the application, and everything worked as expected. I hope this information is helpful, and you can now enjoy your fully functional Quasar application on Netlify with SSR mode!
If there are any shortcomings in this article, please feel free to point them out.
2024/2/18 Update
For ease of use, I have encapsulated the above steps as an quasar-app-extension,you can try it:
dongwa/netlify-quasar
Beta Was this translation helpful? Give feedback.
All reactions