A diferencia de un entorno de alojamiento web tradicional, Google App Engine no incluye archivos directamente desde el directorio de origen de tu aplicación, a menos que lo configures para que lo haga. Hemos llamado a nuestro archivo de plantilla index.html, pero esto no hace que esté automáticamente disponible en la URL /index.html.
Pero hay muchos casos en los que querrás mostrar los archivos estáticos directamente en el navegador web. Las imágenes, las hojas de estilo CSS, el código JavaScript y los vídeos y animaciones Flash se suelen almacenar junto a la aplicación web y se muestran directamente en el navegador. Puedes configurar App Engine para que muestre determinados archivos sin que tengas que codificar tu propio controlador.
Edita helloworld/app.yaml y sustituye su contenido por el siguiente:
application: helloworld version: 1 runtime: python api_version: 1 handlers: - url: /stylesheets static_dir: stylesheets - url: /.* script: helloworld.py
La nueva sección handlers define dos controladores para direcciones URL. Cuando App Engine recibe una solicitud con una URL que empieza por /stylesheets, asigna el resto de la ruta a archivos incluidos en el directorio stylesheets y, si se encuentra un archivo apropiado, muestra al cliente el contenido del archivo. El resto de las URL coinciden con la ruta / y se procesan mediante la secuencia de comandos helloworld.py.
De forma predeterminada, App Engine muestra archivos estáticos mediante el tipo MIME en base a la extensión del archivo. Por ejemplo, un archivo con un nombre que termine en .css se mostrará con el tipo de MIME text/css. Puedes configurar tipos de MIME explícitos con opciones adicionales.
Los patrones de rutas de controladores de URL se prueban en el orden en que aparecen en app.yaml, de arriba a abajo. En este caso, el patrón /stylesheets coincidirá antes que el patrón /.* con las rutas apropiadas. Para obtener más información sobre la asignación de direcciones URL y otras opciones que puedes especificar en app.yaml, consulta la referencia de app.yaml.
Crea el directorio helloworld/stylesheets. En este nuevo directorio, crea un archivo llamado main.css con el siguiente contenido:
| 
body {
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}
Finalmente, edita helloworld/index.html e inserta las siguientes líneas justo después de la línea <html> en la parte superior:
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
</head>
Vuelve a cargar la página en el navegador. La nueva versión utilizará la hoja de estilo.
Ha llegado la hora de mostrarle al mundo la versión definitiva de tu aplicación.
Para continuar, consulta Subida de aplicaciones.