CODEWITHSUNDEEP
vue.jssingle-page-applicationnuxt.jsaws-amplifyaws-codebuild
ISSEI SUZUKI
ISSEI SUZUKI

Reputation: 41

npm build (nuxt build) does not create dist folder in amplify(aws codebuild) using nuxt spa mode

I want to create dist folder, after running 'npm build'(nuxt build) in amplify.

I run npm build in my local(mac) , then dist folder is created.

I run 'ls -a' after 'npm build' , then dist folder does not exist in amplify.

                                 > nuxt build
2019-08-20T01:49:08.598Z [INFO]: # Executing command: ls -a
2019-08-20T01:49:08.602Z [INFO]: .
                                 ..
                                 amplify.sh
                                 amplify.yml
                                 assets
                                 components
                                 .editorconfig
                                 .eslintrc.js
                                 .git
                                 .gitignore
                                 layouts
                                 middleware
                                 node_modules
                                 .nuxt
                                 nuxt.config.js
                                 package.json
                                 package-lock.json
                                 pages
                                 plugins
                                 .prettierrc
                                 README.md
                                 static
                                 store
                                 .vscode
                                 yarn.lock
                                 # Completed phase: build

here is package.json

    {
        ...
        "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },

here is amplify.yml

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build 
        - ls -a
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory:
        dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

I am waitng for your answer , thanks.

Upvotes: 4

Views: 9843

Answers (5)

Victor Ogunshola
Victor Ogunshola

Reputation: 1

Adding npm run generate to your deploy.yml will generate your public files in both /dist and /.output/public

Also, running npm run build will remove the generated public files. Hence your amplify.yml should look like this:

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run generate
  artifacts:
    baseDirectory:
        .output/public
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Upvotes: 0

iudoh
iudoh

Reputation: 71

For Nuxt 3, the output directory is .output. Hence, your baseDirectory should be .output/public if your build command is nuxt generate because that's the directory that will contain the entry index.html file.

Combining the configuration from Nitro's docs and Nuxt's deployment guide, this is what worked for me:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18 && node --version
        - corepack enable && npx --yes nypm install
    build:
      commands:
        - pnpm generate
  artifacts:
    baseDirectory: .output/public
    files:
      - "**/*"

Upvotes: 0

Osemenkhian Godstime
Osemenkhian Godstime

Reputation: 69

To build nuxt project using amplify, amplify does not generate dist directory on the fly. you have to generate it in your amplify YAML file with: yarn generate or npm run generate. I solved this same issue using the yml snippet below.:

 version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
        - yarn run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Upvotes: 1

njjnex
njjnex

Reputation: 1555

From the Nuxt documentation: https://nuxtjs.org/docs/2.x/directory-structure/dist

The dist folder, short for distribution folder. It is dynamically generated when using the nuxt generate command and includes the generated production ready HTML files and assets that are necessary to deploy and run your statically generated Nuxt.js application.

Including - npm run generate into your amplify build commands will solve this issue

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run generate
        - npm run build
  artifacts:
    baseDirectory: dist
  ...

Upvotes: 5

orafaelreis
orafaelreis

Reputation: 2881

I solved it setting up the amplify.yml file. I changed baseDirectory: dist to baseDirectory: .nuxt.

Upvotes: 1

Related Questions