exceeded the maximum number of routes (99) allowed in AppEngine app.yaml

[haewoniee]

I have a sveltekit project where I have a multiple images, css files, and fonts under /static folder.

When I build with sveltekit-adapter-appengine, I get this message:

  You've exceeded the maximum number of routes (99) allowed in AppEngine app.yaml, and you have 113 routes.
  This often happens when you have a lot of static assets.
  If possible, use vites asset importing instead: https://kit.svelte.dev/docs/assets

Now when I look at the build/app.yaml file, each file's route is generated, causing the above error, such as:

  - url: /img/icon/brand-a.svg
    static_files: storage/img/icon/brand-a.svg
    upload: storage/img/icon/brand-a.svg
    secure: always
  - url: /img/icon/brand-b.svg
    static_files: storage/img/icon/brand-b.svg
    upload: storage/img/icon/brand-b.svg
    secure: always

Is there any way to get away with this error other than moving the static folder under /src such as generating the app.yaml file maybe just like below? (fix me if my syntaxes are wrong)

    - url: /css/(.*\.(css))
      static_files: storage/css/\1
      upload: storage/css/(.*\.(css))
      secure: always
    - url: /img/(.+/)?([^/]+)
      static_files: storage/img/\1\2
      upload: storage/img/(.+/)?([^/]+)
      secure: always

[haewoniee]

I've got it work with below code. Can I create a pr?

// Add yaml entries for all files outside _app directory, such as favicons
      const groupedFiles = {};
      const additionalClientAssets = [];
      // Group files by the first directory in their path
      clientFiles.filter((file) => !file.startsWith("_app/")).forEach(path => {
        if (path.includes('/')) {
          const parts = path.split('/');
          const firstDir = parts[0]; // The first directory in the path
  
          if (!groupedFiles[firstDir]) {
              groupedFiles[firstDir] = [];
          }
          groupedFiles[firstDir].push(path);
        } else {
          const config = {
            url: `/${path}`,
            static_files: join("storage", path).replaceAll("\\", "/"),
            upload: join("storage", path).replaceAll("\\", "/"),
            secure: "always",
          }
          additionalClientAssets.push(config);
        }
      });
  
      // Generate configuration objects
      Object.keys(groupedFiles).forEach(dir => {
          const regexBase = dir + '/(.+/)?([^/]+)'; // Create regex for capturing everything under the directory
          const config = {
              url: `/${regexBase}`,
              static_files: `storage/${dir}/\\1\\2`,
              upload: `storage/${regexBase}`,
              secure: 'always',
          };
          additionalClientAssets.push(config);
      });

[bumdigi]

I also have the same issue. I hope it works out well!

[Abhay123450]

I am facing the same issue. Will the PR be merged?

[Abhay123450]

I've got it work with below code. Can I create a pr?

// Add yaml entries for all files outside _app directory, such as favicons
      const groupedFiles = {};
      const additionalClientAssets = [];
      // Group files by the first directory in their path
      clientFiles.filter((file) => !file.startsWith("_app/")).forEach(path => {
        if (path.includes('/')) {
          const parts = path.split('/');
          const firstDir = parts[0]; // The first directory in the path
  
          if (!groupedFiles[firstDir]) {
              groupedFiles[firstDir] = [];
          }
          groupedFiles[firstDir].push(path);
        } else {
          const config = {
            url: `/${path}`,
            static_files: join("storage", path).replaceAll("\\", "/"),
            upload: join("storage", path).replaceAll("\\", "/"),
            secure: "always",
          }
          additionalClientAssets.push(config);
        }
      });
  
      // Generate configuration objects
      Object.keys(groupedFiles).forEach(dir => {
          const regexBase = dir + '/(.+/)?([^/]+)'; // Create regex for capturing everything under the directory
          const config = {
              url: `/${regexBase}`,
              static_files: `storage/${dir}/\\1\\2`,
              upload: `storage/${regexBase}`,
              secure: 'always',
          };
          additionalClientAssets.push(config);
      });

I built and deployed using this code, and now if I right-click on the image and select "open image in new tab", it initiates a download instead. What could be the reason?