Google App Engine上的Angular4和WebApp2

Question

I am currently using a angular4 projected generated by angular-CLI to create the project structure and I was able to serve it using ng-serve and develop and see changes. Now I would like to move it to being hosted on my own backend, using google app engine and webApp2 and run it using dev_appserver.py app.yaml. Currently the only way I can get it to work is by doing an ng-build and serving the files out of the dist folder. I would like to make it so I can easily make changes but not have to wait for it to rebuild each time.

Answer 1

You can use enviroment on angular in order to point you python rest service and another enviroment to production.

Example:

enviroment.ts

export const environment = {
  production: false,
  urlServices: 'http://190.52.112.41:8075'
};

enviroment.prod.ts

export const environment = {
  production: true,
  urlServices: 'http://localhost:8080'
};

In this way , you dont need to compile to test you aplication because angular always will be pointed to you python app.

Answer 2

An app.yaml solution using the standard App Engine config:

service: stage
runtime: python27
api_version: 1
threadsafe: true

skip_files:
- ^(?!dist)  # Skip any files not in the dist folder

handlers:
# Routing for bundles to serve directly
- url: /((?:inline|main|polyfills|styles|vendor)\.[a-z0-9]+\.bundle\.js)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for a prod styles.bundle.css to serve directly
- url: /(styles\.[a-z0-9]+\.bundle\.css)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Routing for typedoc, assets and favicon.ico to serve directly
- url: /((?:assets|docs)/.*|favicon\.ico)
  secure: always
  redirect_http_response_code: 301
  static_files: dist/\1
  upload: dist/.*

# Any other requests are routed to index.html for angular to handle so we don't need hash URLs
- url: /.*
  secure: always
  redirect_http_response_code: 301
  static_files: dist/index.html
  upload: dist/index\.html
  http_headers:
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Frame-Options: DENY

Looking for any feedback on how I could do this better.