Tech Tips

I wanted to do hosting Nuxt.js application under test directory (like https://dev.example.amplify.com/test) with AWS Amplify Console. But, I couldn’t find an article how to do it and I tried with some ways. Finally I found that Amplify Console redirect function and Nuxt.js generate.dir property can be a solution. I think they are basic one but I was not familiar with them. I referred to the following web site for setting up environment and hosting Nuxt.js app on Amplify Console. (npm install 、amplify configure 、npx create-nuxt-app 、npm run dev 、 npm run generate 、amplify init 、amplify add hosting 、amplify publish command parts. Sorry the web site is Japanese.)

Rewrite With Redirect Function

First one is rewriting path using Amplify Console Redirect function. To change base URL, modifying router.base in nuxt.config.js.

import colors from 'vuetify/es5/util/colors'
export default {
...
  router: {
     base: '/test/'
  }
 }

To build and deploy, please run “npm run generate” and “amplify publish” commands. After deploy, you cannot see the page correctly with “https://dev.<APP ID>.amplifyapp.com/” and “https://dev.<APP ID>.amplifyapp.com/test/”. Then, after adding a rule with the following setting, you can see the page correctly.

• Source address : /test/<*>
• Target address : /<*>
• Type : 200 (Rewrite)

Please access to “https://dev.<APP ID>.amplifyapp.com/test/” (please clear browser cache).

generate.dir Property

Changing generate.dir property in nuxt.config.js like the following allows us to deploy files under “/test/”.

import colors from 'vuetify/es5/util/colors'
export default {
...
  router: {
     base: '/test/'
  },
  generate: {
    dir: 'dist/test'
  }
 }

Please change img tag src URL to “/test/vuetify-logo.svg” in components/VuetifyLogo.vue to correct Vuetify logo path. Please build with clearning dist directory like following (please remove redirect rule if amplify console has /test/<*> rule). After that, you can see the page correctly.

rm -r dist
npm run generate
amplify publish