Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

How to Publish Vuetify Application with Nginx on Ubuntu 20.04?

What Will You Learn in This Guide?​

In this guide, we will create a Vue application from scratch that uses Vuetify.
We will compile the application for production and publish it on your domain with Nginx.
Finally, you will have a working, stable web application.

Technical Summary​

  • Purpose: To go live with Vue + Vuetify application
  • Solution: Production build + Nginx configuration
  • Result: Fast, SPA compatible, stable streaming

Prerequisites​

The following should be ready:

  • Ubuntu 20.04 server
  • sudo authorized user (genixnode)
  • Nginx installed
  • Node.js 14+
  • Domain name (example: uygulama.genixnode.site)

1️⃣ Creating the Vue Application​

sudo npm install -g @vue/cli
  • Installs the Vue CLI tool.

vue create vuetify-projesi
  • Vue creates the project skeleton.

Selection: Default (Vue 2)​

  1. Vuetify is more stable with this version.

2️⃣ Vuetify Integration​


cd vuetify-projesi
vue add vuetify
  • Adds the Vuetify component library to the project.

npm run serve
  • Starts the development server.

3️⃣ Sample To-Do Application​

  1. Open the src/App.vue file and add the following code.

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <h3>GenixNode To-Do App</h3>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-card>
          <v-card-title>
            <v-text-field
              v-model="yeniGorev"
              label="Yeni Görev"
              append-icon="mdi-plus"
              @click:append="gorevEkle"
            />
          </v-card-title>

          <v-card-text>
            <v-list>
              <v-list-item
                v-for="(g, i) in gorevler"
                :key="i"
              >
                <v-list-item-title>{&#123; g &#125;}</v-list-item-title>
                <v-btn icon @click="gorevSil(i)">
                  <v-icon color="red">mdi-delete</v-icon>
                </v-btn>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>
  • This code provides functions of adding and deleting tasks.

4️⃣ Getting a Production Build​


npm run build
  • Produces static files ready for publication.

📁 Output: dist/

5️⃣ Publishing with Nginx​


sudo mkdir -p /var/www/vuetify-projesi
sudo cp -r dist/* /var/www/vuetify-projesi/
  • Moves Build files to Nginx directory.

Nginx Configuration​


sudo nano /etc/nginx/sites-available/vuetify-projesi

server {
  listen 80;
  server_name uygulama.genixnode.site;

  root /var/www/vuetify-projesi;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
  • try_files prevents 404 errors in SPA applications.

sudo ln -s /etc/nginx/sites-available/vuetify-projesi /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl restart nginx

❓ Frequently Asked Questions​

1. I get a 404 when I refresh the page, why? Try_files is mandatory for SPA structures.

2. How to add HTTPS? Let's Encrypt + Certbot available.

3. What should I do when the code changes? Run npm run build again and copy the files.

4. I'm getting permission error, solution?


sudo chown -R $USER:www-data /var/www/vuetify-projesi

Result​

Your Vuetify-based Vue application is now live 🎉 It runs fast, stable and production compatible with Nginx.

You can set up your Ubuntu server on the GenixNode infrastructure in minutes and try it immediately.