There exist lots of services which allow deploying applications with ease.
To list all of them would not be possible so we will focus on the general deployment process and some specifics for common services.
If your favorite deployment tool is missing feel free to create a pull request on GitHub to add it to the list.
The first step in deploying you Quasar SPA is alway to build a production-ready bundle of your files, which gets rid of development statements and minifies your source.
To produce such a build use Quasar CLI with the following command
$ quasar build
For possible build options please refer to the Quasar CLI docs.
This command will build your project in SPA mode and output your production ready bundle to a newly created folder
<theme> is replaced by the theme you chose to build with.
To serve your production files it is required to use a web server, so to serve over http:// protocol. Simply opening the
index.html file from within your browser will not work, since this uses file:// protocol instead.
The web server requires no special setup (unless you built with Vue Router in “history” mode). The main requirement is to be able to serve static files from a directory, so consult the documentation of your web server on how to set up static file serving.
Then proceed to build your Quasar application using the steps described in General deployment.
After the build is finished, change directory into your deploy root (example:
/dist/spa-mat) and run:
The Now CLI should now display information regarding your deployment, like the URL. That’s it. You’re done.
Unfortunately, Heroku does not support static sites out of the box. But don’t worry, we just need to add an HTTP server to our project so Heroku can serve our Quasar application.
In this example, we will use Express to create a minimal server which Heroku can use.
First, we need to install the required dependencies to our project:
$ npm install express serve-static connect-history-api-fallback
Now that we have installed the required dependencies we can add our server. Create a file called
server.js in the root directory of your project.
express = require('express'),
serveStatic = require('serve-static'),
history = require('connect-history-api-fallback'),
port = process.env.PORT || 5000
const app = express()
app.use(serveStatic(__dirname + '/dist/spa-<theme>'))
Make sure to exchange
<theme> to the theme you use.
Heroku assumes a set of npm scripts to be available, so we have to alter our
package.json and add the following under the
"build": "quasar build",
"start": "node server.js",
"heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build"
Now it is time to create an app on Heroku by running:
$ heroku create
and deploy to Heroku using:
$ heroku deploy
Surge is a popular tool to host and deploy static sites.
If you want to deploy your application with Surge you first need to install the Surge CLI tool:
$ npm install -g surge
Next, we will use Quasar CLI to build our app:
$ quasar build
Now we can deploy our application using Surge by calling:
# make sure to replace <theme> with your actual theme
$ surge dist/spa-<theme>
Now your application should be successfully deployed using Surge. You should be able to adapt this guide to any other static site deployment tool.
To deploy your Quasar application to GitHub pages the first step is to create a special repository on GitHub which is named
<username>.github.io. Clone this repository to your local machine.
Next, you need to build your Quasar application like it is described in the general deployment section. This will result in a
spa-<theme> directory inside the
dist directory. Copy the content of this folder to your cloned repository.
The last step is to add a commit in your repository an push to GitHub. After a short time, you should be able to visit your Quasar application at https://
Please see the GitHub pages guides for an in-depth explanation on how to set up a custom domain.
Manual copying all your files to your GitHub Pages repository can be a cumbersome task to do. This step can be automated by using the push-dir package.
First, install the package with:
$ npm install push-dir --save-dev
Then add a
deploy script command to your
// replace <theme> with your actual theme (mat, ios)
"deploy": "push-dir --dir=dist/spa-<theme> --remote=gh-pages --branch=master"
Add your GitHub Pages repository as a remote named
$ git remote add gh-pages email@example.com:<username>/<username>.github.io.git
Now you can build and deploy your application using:
$ quasar build
$ npm run deploy
which will push the content of your build directory to your master branch on your Github Pages repository.