Hosting a vue js apllication

Question

I have a Vue.js application that is working fine. I have a domain and subdomain name for the application, and I want to host it. My application is running locally, but when I try to add a subdomain name to it, it shows 500 Internal server errors. I am trying to host a website for the first time, so I don't know what I am doing wrong.

My Vue.js config file looks like this:

const webpack = require('webpack');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    // Set up all the aliases we use in our app.
    resolve: {
      alias: {
        'chart.js': 'chart.js/dist/Chart.js'
      }
    },
    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 6
      })
    ],
    devServer:{
     disableHostCheck: true,
       host: '0.0.0.0',
       port: 8080,
       public : 'spark.innovation.com',
    },
              
  },
  pwa: {
    name:' Dashboard',
    themeColor: '#344675',
    msTileColor: '#344675',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: '#344675'
  },
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  },
  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== 'production'
  }
};

Nginx server configuration

 server {
  listen 80;
  listen 443;
  server_name spark.xxxx.com www.spark.xxx.com;
  root /home/ubuntu/frontend-app;
  index index.html index.htm;
  location / {
    root /home/ubuntu/frontend-app;
    try_files $uri /index.html;
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }


}

I am getting 500 Internal server error.

Any advice or tips to how to solve it?

user_7689052 · Answer

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g.https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'.

Morever you need to configure you web server, where you are trying to deploy you Vue app.

Nginx Conf (Minimal)

server {    
        listen  80;
        root    /usr/share/nginx/html;
        include /etc/nginx/mime.types;

        location / {
            try_files $uri $uri/ /index.html;
        }
}

Reference - https://cli.vuejs.org/config/#publicpath
Deployment - https://cli.vuejs.org/guide/deployment.html

Hosting a vue js apllication

1 Answers