Question 18791 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

How to deploy Vite react app in AWS Amplify – Amazon Web Sevices

I want to deploy my react app which was built using vite into AWS Amplify but the build is failing. Here’s how my package.json looks

{
  "name": "app",
  "author": "ashiqdey",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.1.0",
    "prettier": "^2.5.1",
    "vite": "^3.1.0"
  }
}

What wrong I am doing?

enter image description here

Edit : Here’s my yml file, After getting vite command not found error I had added npm i vite -g, still no luck
enter image description here

After adding the npm i vite I am getting this error
enter image description here

Tags:

3

Answers


  1. 0

    Developing software: 49% time spent on cloud configuration, 49% on build scripts, 2% writing code. And this is with all the amazing new tools becoming available.

    Your package file correct and just like mine (although my vite is older) so this answer may not help you.

    The amplify.yml has a preBuild step that should be doing a yarn install (or npm install), so vite and other packages will be downloaded.

    I have amplify.yml in the root of my project because I changed baseDirectory: / to baseDirectory: /dist.

    I have a vite.config.ts:

    /// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
  }
})

    My index.html has some extra for vite:

    <body>
  <div id="root"></div>
  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    };
    var exports = {};
  </script>
  <script type="module" src="/src/main.tsx"></script>
</body>

    EDIT
    Here’s my amplify.yml file:

    version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
    Login or Signup to reply.
  2. 0

    Revert the amplify configuration back to its original form and try to check your package.json for these following settings.
    enter image description here

    Login or Signup to reply.
  3. 0

    Here is a video that has helped me with this issue using the amplify CLI, pre-built the backend definitions changed some directories and build commands for vite.

    https://www.youtube.com/watch?v=Rvl4nua2IJw

    I had many issues prior to this video so hopefully it helps for you.
    Seems like amplify hasn’t fully embraced vite yet
    Here is my amplify.yml afterwards:

    version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
        
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search