google-app-engine


Deploying basic Angular 2 app to Google App Engine


I can use Angular 2 to create basic front-end applications and can use python to create back-ends with endpoints on Google App engine. I can't however seem to figure out how to put the two together and deploy them with the cloud SDK.
Here is a basic example where I can't even host a simple angular2 app with no back-end calls on GAE. I have taken the dist folder after building with angular2 CLI and tried to connect to it with the app.yaml file. It seems to work in the browser developer (dev_appserver.py app.yaml) although I get some 404 errors in SDK with the GET requests to do with my index.html file I think. I then create a blank index.yaml file and try to deploy it but get a 404 Error at the appspot.com location. This is the app.yaml file:
application:
version:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: (.*)/
static_files: dist\1/index.html
upload: dist
- url: (.*)
static_files: dist\1
upload: dist
I really have no idea what I am doing wrong. Do I need some kind of a main.application python back-end to connect to the dist files or? Do I need to include node modules or some other kind or files from Angular2? Any help would be massively appreciated! Thanks
I now update the handlers in my app.yaml file to look like this for static uploads to the google cloud platform. There was issues with Angular Router if the regular expression wasn't like this. Dist folder is output from angular cli ng build:
handlers:
- url: /favicon.ico
static_files: dist/favicon.ico
upload: dist/assets/favicon.ico
- url: /(.*\.(gif|png|jpg|css|js)(|\.map))$
static_files: dist/\1
upload: dist/(.*)(|\.map)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
UPDATE:
For production ng build --prod, this is how my app.yaml file would look:
runtime: python27
threadsafe: true
api_version: 1
handlers:
- url: /(.*\.(gif|png|jpeg|jpg|css|js|ico))$
static_files: dist/\1
upload: dist/(.*)
- url: /(.*)
static_files: dist/index.html
upload: dist/index.html
I would add any other file types in the dist folder to the regex grouping characters in the first handler: (gif|png|jpeg|jpg|css|js|ico)
Replace your app.yaml with the following. It will work!
application: you-app-name-here
version: 1
runtime: python
api_version: 1
default_expiration: "30d"
handlers:
- url: /(.*\.(appcache|manifest))
mime_type: text/cache-manifest
static_files: static/\1
upload: static/(.*\.(appcache|manifest))
expiration: "0m"
- url: /(.*\.atom)
mime_type: application/atom+xml
static_files: static/\1
upload: static/(.*\.atom)
expiration: "1h"
- url: /(.*\.crx)
mime_type: application/x-chrome-extension
static_files: static/\1
upload: static/(.*\.crx)
- url: /(.*\.css)
mime_type: text/css
static_files: static/\1
upload: static/(.*\.css)
- url: /(.*\.eot)
mime_type: application/vnd.ms-fontobject
static_files: static/\1
upload: static/(.*\.eot)
- url: /(.*\.htc)
mime_type: text/x-component
static_files: static/\1
upload: static/(.*\.htc)
- url: /(.*\.html)
mime_type: text/html
static_files: static/\1
upload: static/(.*\.html)
expiration: "1h"
- url: /(.*\.ico)
mime_type: image/x-icon
static_files: static/\1
upload: static/(.*\.ico)
expiration: "7d"
- url: /(.*\.js)
mime_type: text/javascript
static_files: static/\1
upload: static/(.*\.js)
- url: /(.*\.json)
mime_type: application/json
static_files: static/\1
upload: static/(.*\.json)
expiration: "1h"
- url: /(.*\.m4v)
mime_type: video/m4v
static_files: static/\1
upload: static/(.*\.m4v)
- url: /(.*\.mp4)
mime_type: video/mp4
static_files: static/\1
upload: static/(.*\.mp4)
- url: /(.*\.(ogg|oga))
mime_type: audio/ogg
static_files: static/\1
upload: static/(.*\.(ogg|oga))
- url: /(.*\.ogv)
mime_type: video/ogg
static_files: static/\1
upload: static/(.*\.ogv)
- url: /(.*\.otf)
mime_type: font/opentype
static_files: static/\1
upload: static/(.*\.otf)
- url: /(.*\.rss)
mime_type: application/rss+xml
static_files: static/\1
upload: static/(.*\.rss)
expiration: "1h"
- url: /(.*\.safariextz)
mime_type: application/octet-stream
static_files: static/\1
upload: static/(.*\.safariextz)
- url: /(.*\.(svg|svgz))
mime_type: images/svg+xml
static_files: static/\1
upload: static/(.*\.(svg|svgz))
- url: /(.*\.swf)
mime_type: application/x-shockwave-flash
static_files: static/\1
upload: static/(.*\.swf)
- url: /(.*\.ttf)
mime_type: font/truetype
static_files: static/\1
upload: static/(.*\.ttf)
- url: /(.*\.txt)
mime_type: text/plain
static_files: static/\1
upload: static/(.*\.txt)
- url: /(.*\.unity3d)
mime_type: application/vnd.unity
static_files: static/\1
upload: static/(.*\.unity3d)
- url: /(.*\.webm)
mime_type: video/webm
static_files: static/\1
upload: static/(.*\.webm)
- url: /(.*\.webp)
mime_type: image/webp
static_files: static/\1
upload: static/(.*\.webp)
- url: /(.*\.woff)
mime_type: application/x-font-woff
static_files: static/\1
upload: static/(.*\.woff)
- url: /(.*\.xml)
mime_type: application/xml
static_files: static/\1
upload: static/(.*\.xml)
expiration: "1h"
- url: /(.*\.xpi)
mime_type: application/x-xpinstall
static_files: static/\1
upload: static/(.*\.xpi)
# image files
- url: /(.*\.(bmp|gif|ico|jpeg|jpg|png))
static_files: static/\1
upload: static/(.*\.(bmp|gif|ico|jpeg|jpg|png))
# audio files
- url: /(.*\.(mid|midi|mp3|wav))
static_files: static/\1
upload: static/(.*\.(mid|midi|mp3|wav))
# windows files
- url: /(.*\.(doc|exe|ppt|rtf|xls))
static_files: static/\1
upload: static/(.*\.(doc|exe|ppt|rtf|xls))
# compressed files
- url: /(.*\.(bz2|gz|rar|tar|tgz|zip))
static_files: static/\1
upload: static/(.*\.(bz2|gz|rar|tar|tgz|zip))
# index files
- url: /(.+)/
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
- url: /(.+)
static_files: static/\1/index.html
upload: static/(.+)/index.html
expiration: "15m"
# site root
- url: /
static_files: static/index.html
upload: static/index.html
expiration: "15m"
It looks like your regular expression match is in the wrong spot. Try this format:
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /
static_files: dist/index.html
upload: dist/index.html
- url: /(.*)
static_files: dist/\1
upload: dist/(.*)
This comes from testing and some oddities we encountered while creating the Static Hosting tutorial on App Engine.

Related Links

JPA + Google SQL + GWT + Eclipse
how to convert the string version of a key back into a form that I can use the get() function on to get the entity instance
Redirect To Specific URL in Google app engine
Exporting data to Google Spreadsheet from Google App Engine (Java version)
How is md5Hash calculated for com.google.appengine.api.blobstore.BlobInfo
Bad response to a BigQuery query: kind:discovery#restDescription instead of bigquery#queryResults
Google app engine jobs in datastore admin freeze
BadValueError('Property %s must be a float' % self.name) BadValueError: Property USD must be a float
HttpError 400 in jobs.get(jobId,ProjectId) even with right values
GAE - creating an app issue
Is NDB model _post_delete_hook called after transaction? OR Best way to clean a blob from the blobstore when its referencing entity is deleted
If verify Google user logged in
Moving HTML files to their own directory in Google App Engine (Using Jinja2 Templates) - Error 13
AppEngine local unit testing guide for Python 2.7 Runtime
No persistence providers available for “transactions-optional”
List Children of null parent?

Categories

HOME
django
cygwin
spark-streaming
rdbms
google-spreadsheet
pda
zend-framework
swt
grafana
access
nested-if
pearson-correlation
settings
x264
google-admin-sdk
data-visualization
azure-container-service
angularfire2
recordrtc
owin
enthought
symmetricds
http-post
coin3d
android-7.0-nougat
sse
question2answer
pagespeed
angular-routing
highstock
maze
browser-sync
winpe
google-cast
eviews
testbed
biztalk-rule-engine
installscript
imx6
hivemq
docfx
z-notation
xv6
apriori
escpos
apollostack
placeholder
plan-9
cnc
facebook-pixel
page-replacement
pdf-conversion
janus
universal-analytics
baidu
shinobi
webjars
file-uri
uicolor
x-tag
jquery-jscrollpane
gogs
freepbx
cfchart
spreadjs
data-protection
boost-serialization
pushbots
cycle2
decimalformat
dynatree
flock
coda
google-refine
kubuntu
rrule
actionfilterattribute
openbabel
boost-program-options
iso-prolog
linkedin-jsapi
with-statement
functional-java
ray
buffering
getopt
sbcl
ie8-compatibility-mode
isqlquery
dolby-audio-api
jquery-1.9
asplinkbutton
zope.interface
subproject
thttpd
window-decoration
wiimote
stress
pinch
filemerge
lr
event-receiver
undefined-index
non-clustered-index
aspmenu
web-garden
isapi-extension
pos-for-.net
pbcopy

Resources

Encrypt Message