Note: Java 8 has reached end of support on January 31, 2024. Your existing Java 8 applications will continue to run and receive traffic. However, App Engine might block re-deployment of applications that use runtimes after their end of support date. We recommend that you migrate to the latest supported version of Java.

Getting Started: Serving Static Content

Learn how to securely serve static content such as HTML files, CSS, and images from Google App Engine standard environment.

Before you begin

Configure your development environment and create your App Engine project.
If you are using a custom domain name for your website, follow the instructions for adding a Custom Domain to your project.

Serving a web page

App Engine can serve static content such as HTML pages and media such as images. Static content is anything that will not be executed as JSPs or Servlets.

The following example is a basic HTML page that shows a welcome message.

<!DOCTYPE html>
<html>
  <head>
    <title>The App Engine Blog</title>
  </head>
  <body>
    <h1>Welcome to the App Engine Blog</h1>
    <p>This is being served by App Engine!</p>
  </body>
</html>

Where to put your static files

You must put your static served files within your app's webapp directory. You can use folders, but remember that all file paths and URIs are relative to the webapp directory.

After you choose a location for the static files, you must define their location in the appengine-web.xml file, using the <static-files> element.

In the example below, a basic appengine-web.xml configuration treats all HTML files in the webapp directory as static files.

<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <threadsafe>true</threadsafe>
  <runtime>java8</runtime>
  <static-files>
    <include path="/**.html" >
    </include>
  </static-files>
</appengine-web-app>

You can have multiple <include path> elements that reference different directories and different filetypes. Expanding on the previous example:

<static-files>
  <include path="/**.html" >
  </include>
  <include path="/images/**.jpg" >
  </include>
</static-files>

Now all files with the .jpg extension in the webapp/images/ directory will be treated as static files.

In the example above, if we wanted to display logo.jpg from the webapp/images directory, the <img> tag would have the source URI <img src="/images/logo.jpg">.

Forcing HTTPS for all static content

Although App Engine supports serving content using either HTTP or HTTPS, you should use HTTPS. In order to set up secure URLs, you must add a <security-constraint> element to your project's web.xml. A sample <security-constraint> is shown here:

<security-constraint>
    <web-resource-collection>
        <web-resource-name>blog</web-resource-name>
        <url-pattern>/*</url-pattern>
    </web-resource-collection>
    <user-data-constraint>
        <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
</security-constraint>

By using <transport-guarantee>CONFIDENTIAL</transport-guarantee>, all requests are automatically redirected to the HTTPS URI of the static content.

Deploying to App Engine

You can deploy your app to App Engine using Maven.

Go to the root directory of your project and type:

mvn package appengine:deploy -Dapp.deploy.projectId=PROJECT_ID

Replace PROJECT_ID with the ID of your Google Cloud project. If your pom.xml file already specifies your project ID, you don't need to include the -Dapp.deploy.projectId property in the command you run.

After Maven deploys your app, open a web browser tab automatically at your new app by typing:

gcloud app browse

What's next

Static files can be used to serve images, Cascading Style Sheets and static HTML content through App Engine. To extend your knowledge, you might want to look at handling user data through HTML forms.

Setting Up Your Development Environment

Handling HTML Form Data