Bitbucket pipelines deploying Vite/Vue app as a blank white page

[Ahmed Khalifa]

Hi there!

This is my first post here guys so if anyone needs anything extra I can add then by all means, feel free to tell me!

Right now, I have proposed to my team that we migrate from Webpack to Vite and they had accepted now, after finally doing the migration steps, we now have one problem, that even though doing yarn dev (vite) or doing yarn build-only (vite build) then yarn preview (vite preview) the website works perfectly, in both cases, the icons load and the website runs with flying colors!

However, when I try to use my current CI/CD bitbucket-pipelines.yml file so I can build and deploy my website, I get a blank page after it's done specifically I get the image provided when I open up the console.

This is my currect bitbucket-pipelines.yml file

options:
  max-time: 10
definitions: 
  services: 
      docker: 
         memory: 3071 
image: node:18.12.0
pipelines: 
   custom: 
        deploy-stage: 
              - step: 
                   name: Deploy to Azure 
                   deployment: staging 
                   script: 
                        - chown -R 165536:165536 $BITBUCKET_CLONE_DIR 
                        - pipe: microsoft/azure-static-web-apps-deploy:main
                        variables: 
                             APP_LOCATION: "$BITBUCKET_CLONE_DIR/" 
                             API_TOKEN: $deployment_token_stage 
                             SKIP_APP_BUILD: 'true' 
                             APP_BUILD_COMMAND: yarn run build-only --mode=stage                                                   
                             DEVELOPMENT_ENVIRONMENT: stage 

I get this error when I deploy:

There are the scripts I am using in the package.json

"scripts": { 
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --", 
"preview": "vite preview", 
"build-only": "vite build", 
"type-check": "vue-tsc --build --force", 
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, 

And finally this is my vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; 
import path from "path"; 
export default defineConfig({ 
  plugins: [vue()], 
  resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, 
  extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"], }, 
  server: { host: true, port: 8080, strictPort: true, }, 
  preview: { port: 8080, strictPort: true, }, 
  base: "./",
 });

Would appreciate any help!

Thank you very much

[Theodora Boudale]

Hi Ahmed and welcome to the community!

I see that you are using the pipe microsoft/azure-static-web-apps-deploy to deploy:

• https://bitbucket.org/microsoft/azure-static-web-apps-deploy/src/main/

This pipe is not built by Atlassian, but by Microsoft. If you check the README of the pipe's repo, the following is mentioned with regards to the pipe's support:

Support

This sample is provided "as is" and is not supported. Likewise, no commitments are made as to its longevity or maintenance. To discuss this sample with other users, please visit the Azure DevOps Services section of the Microsoft Developer Community: https://developercommunity.visualstudio.com/spaces/21/index.html.

I would suggest reaching out to the forum mentioned in this message.

One thing I noticed is that you are using a variable named DEVELOPMENT_ENVIRONMENT with the pipe, however there is no such variable in the pipe's definition.

If Azure offers a CLI that can do what the pipe does, you could also install the Azure CLI in your yml and then use the necessary commands to deploy (instead of using the pipe).

Kind regards,
Theodora