Google cloud application yaml for angular 7

Question

My project directory looks like

**demo**
 -->
   **ui**-->
     **dist**-->
       **ui**-->
         *.html
         *.js files


In my app.yaml    

runtime: python27
api_version: 1
threadsafe: true`enter code here`
handlers:
- url: /
  static_files: dist/\1/index.html
  upload: dist/(.*)/(.*)

Whenever I deploy my app and hit the URL I see getting 404 Failed to load resource: the server responded with a status of 404 () for all the files except index.html.

Any help how to proceed further would be appreciated.

Read stack overflow related questions but no luck

Answer 1

Here I share the approach I use.

app.yaml should looks like :

runtime: python27
threadsafe: true
api_version: 1

handlers:
- url: /(.+\.js)
  static_files: app/\1
  upload: app/(.+\.js)

- url: /(.+\.css)
  static_files: app/\1
  upload: app/(.+\.css)

- url: /(.+\.png)
  static_files: app/\1
  upload: app/(.+\.png)

- url: /(.+\.jpg)
  static_files: app/\1
  upload: app/(.+\.jpg)

- url: /(.+\.svg)
  static_files: app/\1
  upload: app/(.+\.svg)

- url: /favicon.ico
  static_files: app/favicon.ico
  upload: app/favicon.ico

- url: /(.+\.json)
  static_files: app/\1
  upload: app/(.+\.json)

- url: /(.+)
  static_files: app/index.html
  upload: app/index.html

- url: /
  static_files: app/index.html
  upload: app/index.html

These handlers rules could be optimized. Here, I kept them in a detailed form with each file type.

Directory structure of deploy folder should looks like:

/deploy
  app.yaml
  /app  =>  generated by ng build
    index.html
    ...bundles..js
    /assets
      ...

This default service will be served at https://YOUR_PROJECT_ID.appspot.com as usual.

Maybe these links may help your :

• My answer to an other question

• Deploy Angular 2/4/6 App on Google App Engine by Anoop Sharma

Answer 2

Here is my setup. You'll notice that there are some subtle nuances with the other answers. These nuances allowed me to deploy my app. And the deployment file is significangtly simpler.

It works with angular 9 and the current version of the app engine (as of 03/2020)

First things first, the angular.json file sets the target build directory as follows:

"build": {
          ...
          "options": {
            "outputPath": "dist/my-awesome-app",
            ...

next, you will have to create a app.yaml in your dist directory. This is your deployment file. Watch out because dist is not tracked by git. So you'll either have to fiddle with your .gitignore file or copy your app.yaml file in dist before deploying. (I chose the former).

Your project should then look like this:

> my-awesom-app
|  > dist
|  |  > my-awesome-app
|  |  $ app.yaml

With app.yaml and dist/my-awesome-app at the same level.

Next your app.yaml file should look like this

runtime: nodejs12

handlers:
- url: /
  static_files: my-awesome-app/index.html
  upload: my-awesome-app/index.html

- url: /
  static_dir: my-awesome-app