Managing Static Assets in Ant Design Pro with a Golang Backend
Discover how to manage static assets in Ant Design Pro when using a Golang backend. Learn how updating the public path to /static/ can cause issues in development mode and how to resolve them by adjusting file references. Ensure your web app works seamlessly in both dev and release modes.
I'm currently developing a web application using the Ant Design Pro framework for the frontend, and Golang as the backend server. Additionally, I have embedded the built web app into the Golang application. To manage the routing for the files built from the frontend, I updated the public path to /static/ in the config.ts file like below. This allows me to access the built files via the /static/... route.
publicPath: '/static/',Recently, I encountered an issue where the logo.svg was not displaying when I started the frontend app using yarn dev. Instead, it returned a 404 Not Found error.
After some investigation, I discovered that the problem was due to the change in the public path. When I accessed http://localhost:8000/static/logo.svg, the logo displayed correctly. This indicated that the issue was related to how the paths were being referenced in development mode.
To resolve this, I updated the references to the logo in the index.tsx file by prefixing the path with /static. Additionally, I needed to update the loading.js file, which is configured in the config.ts file, to include the /static prefix as well.
With these changes, the web app now works correctly in both development and release modes.
Here are the steps I followed:
- Update the
index.tsxfile:
<LoginForm
contentStyle={{
minWidth: 280,
maxWidth: '75vw',
}}
logo={<img alt="logo" src="/static/logo.svg" />}
title="Ant Design"
subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
initialValues={{
autoLogin: true,
}}
...
</LoginForm>- Update the
loading.jsfile inconfig.ts:
/**
* @name <head> 中额外的 script
* @description 配置 <head> 中额外的 script
*/
headScripts: [
// 解决首次加载时白屏的问题
{ src: '/static/scripts/loading.js', async: true },
],By making these updates, the application correctly serves static assets in both development and production environments.
