vite js build file loaded but empty screen

Question

I am building react app using vite.

I run the following command, the preview show everything is working.

npm run build
npm run preview

But when I transfer to the IIS or tomcat server, it show blank page without any error.

Not sure what is happen?

The only different when I deploy to web server I put it into a folder example C:\inetpub\wwwroot\example

Below is my vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import { fileURLToPath, URL } from 'url';
// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [
    react(), viteTsconfigPaths(), svgrPlugin()
  ],
  define: {
    "global": {},
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
    mainFields: [],
  },
  css: {
    preprocessorOptions: {
      scss: {
        // example : additionalData: `@import "./src/styles/variables";`
        // There is need to include the .scss file extensions.
        // additionalData: `@import "./src/styles/variables";`,
      },
    },
  },
  base: './',
});

I deploy to the IIS server and I have also tried Tomcat server. — Alvin, Feb 15 '23 at 06:14
Is the domain you deploy to access `foo.com` or `foo.com/bar`? — Tachibana Shin, Feb 15 '23 at 06:22
also your alias seems a bit complicated it can be implemented with `'@': path.resolve(__dirname, 'src')` — Tachibana Shin, Feb 15 '23 at 06:23
i.e. if you go to `foo.com/bar` you will get to `index.html` of this deployment page? — Tachibana Shin, Feb 15 '23 at 06:25
please add function `createBrowserRouter` this is related to parsing href — Tachibana Shin, Feb 15 '23 at 06:28
you can refer here https://stackoverflow.com/questions/75358894/error-404-on-github-pages-using-react-router-v6-6-1-and-vite/75358926#75358926 — Tachibana Shin, Feb 15 '23 at 06:28
hmm, but the only problem is when I build and transfer it to IIS it show empty page. — Alvin, Feb 15 '23 at 07:07
the problem here is that your application root deployment domain is `foo.com/bar` this needs to modify the `root paths` of `react-router` — Tachibana Shin, Feb 15 '23 at 07:11

score 0 · Answer 1 · answered Feb 15 '23 at 06:34

0

It sounds like your server doesn't know where to find the .html file. Did you configure it to use /wwwroot/example/public as the root?

Try placing the contents of /public (the .js, .css, .html that the build process created) directly inside the /wwwroot folder. So then it would just look like /wwwroot/index.html.

answered Feb 15 '23 at 06:34

Wesley LeMahieu

2,296
1
12
8

The file is loaded successfully, without /public, just the browser empty. – Alvin Feb 15 '23 at 07:00

vite js build file loaded but empty screen

1 Answers1