OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Angular App on GAE with custom domain returns 404 for static files

  • Thread starter Thread starter manneJan89
  • Start date Start date
M

manneJan89

Guest
I have an Angular app. I have deployed it to GAE. It works on the default GAE generated URL https://<service>-dot-<app>.oa.r.appspot.com/. My static Angular app is rendering and the app works 100%.

I have linked a custom domain, hosted with GoDaddy. DNS is set up with details provided by GAE, and active. Certificates are managed through Google.

When I visit my custom domain, let's call it 'custom.ai', the index.html is rendered. BUT, all static *.css and *.js files that Angular generates, give a 404 error in the console. SO I can see my background color for my app, but no content as the *.js and *.css files are not found. Even when trying to view https://custom.ai/assets/images/image.png I also get a not found error: The requested URL /assets/images/rospen-logo.png was not found on this server.

I have played around with the app.yaml, dispatch.yaml, IAM permissions, DNS settings but I just cannot seem to fix this issue. If anyone can give any guidance it would be greatly appreciated. I do not know where to look to fix this issue.

For reference, here is my app.yaml file:

Code:
runtime: python312
service: angular

default_expiration: "60s"

handlers:
- url: /assets
  static_dir: dist/assets

- url: /(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
  static_files: dist/\1
  upload: dist/(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
  secure: always

- url: /.*
  static_files: dist/index.html
  upload: dist/index.html
  secure: always
<p>I have an Angular app. I have deployed it to GAE. It works on the default GAE generated URL <code>https://<service>-dot-<app>.oa.r.appspot.com/</code>. My static Angular app is rendering and the app works 100%.</p>
<p>I have linked a custom domain, hosted with GoDaddy. DNS is set up with details provided by GAE, and active. Certificates are managed through Google.</p>
<p>When I visit my custom domain, let's call it 'custom.ai', the index.html is rendered. BUT, all static *.css and *.js files that Angular generates, give a 404 error in the console. SO I can see my background color for my app, but no content as the *.js and *.css files are not found. Even when trying to view <code>https://custom.ai/assets/images/image.png</code> I also get a not found error: <em>The requested URL /assets/images/rospen-logo.png was not found on this server.</em></p>
<p>I have played around with the <code>app.yaml</code>, <code>dispatch.yaml</code>, IAM permissions, DNS settings but I just cannot seem to fix this issue. If anyone can give any guidance it would be greatly appreciated. I do not know where to look to fix this issue.</p>
<p>For reference, here is my <code>app.yaml</code> file:</p>
<pre><code>runtime: python312
service: angular

default_expiration: "60s"

handlers:
- url: /assets
static_dir: dist/assets

- url: /(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
static_files: dist/\1
upload: dist/(.*\.(css|js|html|png|jpg|jpeg|gif|ico))
secure: always

- url: /.*
static_files: dist/index.html
upload: dist/index.html
secure: always

</code></pre>
Continue reading...
 

Latest posts

Top