Bitbucket pipelines deploying Vite/Vue app as a blank white page
Asked by 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:

![Screenshot_20240619_212656.png](https://community.atlassian.com/t5/image/serverpage/image-id/332905iA4765AFCA571629F/image-dimensions/633x293?v=v2 "Screenshot_20240619_212656.png")

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


Answers:
author: Theodora Boudale
body: 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


Tags: bitbucket-cloud

cloud