Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
Deploying SSR

When deploying as a SPA or PWA, the distributables folder that gets generated by Quasar CLI can be served by a static webserver. However, this is not the case with an SSR (Server-side Render) build. Your distributables, in this case, contain your production webserver too – which can be tweaked from /src-ssr.

By default, the SSR distributables use Express, but you can replace it with your webserver of choice.

Serverless
@quasar/app-webpack v3.2+

If you are deploying to a Serverless service, then please read about SSR Production Export on how to prepare for it.

The Distributables Folder

After building your app on SSR mode ($ quasar build -m ssr) the folder that gets generated contains a standalone webserver tweaked for serving with SSR.

You’ll notice that it contains a package.json file of its own. It has an npm script defined, called “start”:

"scripts": {
  "start": "node index.js"
}

So what you need to do when deploying is to copy this distributables folder on your server, yarn/npm install the dependencies inside it, then run $ yarn start. This boots up the webserver and starts listening for connections.

TIP

The distributables folder generated after building your app is standalone. It does NOT require the rest of your project folder to work and it does NOT depend on @quasar/cli being installed.

Enhancing Performance

By default, the webserver runs on only one of the available server’s cores. What you could do is make it use all cores. There is a solution for this: PM2.

After installing PM2 on your server, your npm start script can look like this instead:

"scripts": {
  "start": "pm2 start index.js"
}

Deploying with Cleavr

You can use Cleavr to deploy Quasar SSR apps to several popular VPS providers. Cleavr will automatically set up PM2 with cluster mode enabled for your app.

Add a new NodeJS SSR site to Cleavr and then configure the web app settings with the following:

  • Entry point: index.js
  • Build command: npx quasar build --mode ssr
  • Artifact path: dist/ssr