I've built an app using React + Vite.
The UI is using IBM's Carbon Design System. I built the CSS with Sass which has
// src/assets/styles.scss
@use '@carbon/react' with (
$font-path: 'public/fonts/ibm'
);
Compiled with sass src/assets/styles.scss src/styles.css --load-path=node_modules
This generates a static CSS file at src/styles.css
. That file contains references to the fonts which Carbon supplies, all of which have a path public/fonts/ibm/*
which is what's specified as $font-path
in the Sass file.
I had to copy over the fonts using cp -r node_modules/@ibm/plex/IBM-Plex-* public/fonts/ibm
When I run the application with npm run dev
I get the following warning in the terminal
Files in the public directory are served at the root path. Instead of /public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2, use /fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2
This message is repeated several times, for several different font files.
However, the application loads correctly in the browser. I get a 200 response for all fonts and they are accessible from a path that does include "public" e.g.
http://localhost:5173/public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2
I then needed to build the application to deploy to Google Cloud. I did that by following a tutorial at https://www.youtube.com/watch?v=NMnKGHgw8aM. The tutorial says to use npm run build
. This does indeed create the dist/*
folder with the relevant files however the following warning appears many times for different font files e.g.
public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 referenced in public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime
The files are created in the dist/
directory as shown in VSCode:
Bizarrley, if I list the files/folders in the dist/
directory (including hidden) they don't appear in the terminal:
% pwd
/Users/andy/Documents/VSCode/react/dist/assets
andy@macbook assets % ls -lah
total 1824
drwxr-xr-x 4 andy staff 128B Nov 7 10:00 .
drwxr-xr-x 6 andy staff 192B Nov 7 10:00 ..
-rw-r--r-- 1 andy staff 693K Nov 7 10:00 index-524dIBfm.css
-rw-r--r-- 1 andy staff 214K Nov 7 10:00 index-C6J8y3S0.js
The tutorial starts an Express server by going up a level cd ..
and then doing npm install express
followed by adding this as index.js
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('react/dist'));
const port = process.env.PORT || 8080;
app.listen(port, () => {
console.log(`Listening on port ${port}`);
})
The line app.use(express.static('react/dist'));
is meant to serve the built React app as static files.
When running npm run start
the Express server does indeed start and the application loads in the browser at http://localhost:8080/
But all of the fonts give 404 errors. These errors appear in the console for many different font files
index-524dIBfm.css:1 GET http://localhost:8080/assets/public/fonts/ibm/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin1.woff2 net::ERR_ABORTED 404 (Not Found)
I'm confused as to what the source of this error really is. Given the strange behaviour where the files are shown in VSCode's file browser but not with ls -lah
. Or, whether this is something specific to Vite's configuration. For reference the Vite config only has what was created by default, i.e.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
In react all the files that are inside public
folder are served inside the root as your error says.
So you have to remove public from your paths so instead of using /public/fonts/ibm
use /fonts/ibm
and apply this to all the paths where you added public
in them.