logo
  • Guide
  • Config
  • Plugin
  • API
  • Examples
  • Community
  • Modern.js 2.x Docs
  • English
    • 简体中文
    • English
    • Commands
      File Conventions
      src/
      App.[tj]sx
      entry.[tj]s
      entry.server.[tj]sx
      modern.runtime.[tj]s
      routes/
      *.[server|node].[tj]sx
      api/
      lambda/*.[tj]s
      server/
      modern.server.[tj]s
      shared/
      config/
      html/
      favicon.*
      icon.*
      mock/
      public/
      upload/
      modern.config.[tj]s
      Runtime
      Core
      createRoot
      render
      Router
      router
      SSR
      NoSSR
      renderStreaming
      renderString
      createRequestHandler
      BFF
      useHonoContext
      Utility
      CSS-In-JS API
      Head
      loadable
      📝 Edit this page
      Previous pagepublic/Next pagemodern.config.[tj]s

      #upload/

      Any static assets can be placed in the upload/ directory.

      #Description

      In the development environment, the static assets in this directory will be hosted under the /upload path. After building the application, the files in this directory will be copied to the dist directory.

      This file convention is mainly used for developers to use plugins to proactively upload static assets to the CDN.

      #Scenarios

      For example, SDKs for project use only, such as google-analysis.js (usually requires HTTP caching).

      Pictures, font files, common CSS, etc.

      #Code Compression

      If the file in the directory is a .js file, it will be automatically compressed during production environment construction.

      If the file ends with .min.js, it will not be compressed.

      #More Usage

      In React components, you can add this prefix through Environment Variables:

      export default () => {
        return (
          <img src={`${process.env.ASSET_PREFIX}/upload/banner.png`}></img>
        );
      };

      In addition, whether it is in Custom HTML or any HTML file under config/public/, you can directly use HTML tags to reference resources in the config/upload/ directory:

      <script src="/upload/index.js"></script>

      If you set the dev.assetPrefix or output.assetPrefix prefix, you can also use template syntax to add the prefix directly:

      <script src="<%=assetPrefix %>/upload/index.js"></script>
      Info

      Modern.js does not support using files under config/upload/ through URLs in config/public/*.css (such as background-image).