CODEWITHSUNDEEP
gitvue.jsnpmvitecicd
Shinzie
Shinzie

Reputation: 15

Deploy Vite app on gitlab pages shows white screen and MIME Type Error

I am trying to deploy a Vite app on Gitlab Pages but only shows blank screen and errors as follows.

Can't load css and js files from static directory. was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

I have looked up vite configurations but none is working. Please help if you have any idea on solving this.

This is my vite.config.js.

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  define: {
    'process.env': {}
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  base: './',
})

This is my gitlab-ci.yml

pages:
  image: node:latest
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - rm -rf public
    - mkdir public
    - cp -r dist/* public
  artifacts:
    paths:
      - public
  only:
    - main

This is the generated index.html after I run npm run build.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-daca0686.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/bootstrap.bundle-71906194.js">
    <link rel="stylesheet" href="/assets/bootstrap-eafa8fec.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Upvotes: 0

Views: 1013

Answers (1)

Jonas Daum
Jonas Daum

Reputation: 1

Your html is a standard Vue template, but your app does not appear to be hooked or outputting content. Using a local npm run build, check the name of your output folder and the files it contains.

If you're using the gitlab pages generated domain, make sure you´ve checked the "Use unique domain" checkbox in your gitlab settings(deploy>>Pages) like shown here:

screenshot gitlab pages settings

BTW: Why do you do so much during your "script part" @ deployment? My ViteJs app is hosted on gitlab pages, this is my gitlab-ci.yml:

image: "node:16-alpine"

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install --frozen-lockfile --check-files --non-interactive
    - npm run build --base=$CI_PAGES_URL
    - cp -a dist/. public/
  artifacts:
    paths:
      - public

deploy-staging:
  stage: deploy
  script:
    - echo 'Staging deployment job'
  artifacts:
    paths:
      - public
  except:
    - master

Greetings :)

Upvotes: 0

Related Questions