Solutions

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.

Stephen Li

Stephen Li

— 1 min read
Managing Static Assets in Ant Design Pro with a Golang Backend

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:

  1. Update the index.tsx file:
<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>
  1. Update the loading.js file in config.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.

Read more