Serving Static Content

Serve static content such as HTML pages, CSS files, or images that won't be changed as a result of your application's operations. Simple, static HTML websites can often run for free by using App Engine's free tier.

This page and sample are part of an extended learning example of a simple blog application where users can upload posts. You should already be familiar with the Go 1.9 programming language and basic web development. To start from the beginning, go to Building an App with Go 1.9.

Costs

There are no costs associated with running this tutorial. Running this sample app alone does not exceed your free quota.

Before you begin

If you started from Building an App with Go 1.9, skip this section; otherwise, complete the following steps:

Complete the tasks in Before you begin in Setting Up Your Project and Application.
In this example, you add code to the gophers-1 sample, which is the final product from Setting Up Your Project and Application.

Download the gophers-1 sample and its dependencies to your local machine:
```
go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1/...
```

Change to the gophers-1 directory:

cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1

Structuring your application

This sample project has the following structure:

go-app/: Project root directory.
- app.yaml: Configuration settings for your App Engine application.
- main.go: Your application code.
- index.html: Static HTML file to display your homepage.
- static/: Directory to store your static files.
  - style.css: Stylesheet that formats the look of your HTML file.
  - gcp-gopher.svg: Gopher image.

Setting up static files

Create an index.html file in your project root directory and add the following lines:

appengine/gophers/gophers-2/index.html

View on GitHub

<!doctype html>
<html>
<head>
  <title>The Gopher Network</title>
  <link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>

<h1>The Gopher Network</h1>

<img id="logo" src="/static/gcp-gopher.svg" width="100">
</body>
</html>

Create a folder called static in your project root directory:
```
mkdir static
```
Right-click on gcp-gopher.svg image link and Save link as... to download the image to your static directory.
Create style.css in the static directory of your project to modify the look of index.html, and add the following styling:

appengine/gophers/gophers-2/static/style.css

View on GitHub
```
body {
  font-family: Arial, sans-serif;
  color: blue;
}
```

Serving templates and static files

Serving static files is more efficient for some content, such as images or CSS, that remain unchanged.

Create a handler for your static files and serve their content:

The app.yaml file you created earlier specifies the directories that contain static files. Add the following lines under your handlers section above the line - url: /.* in app.yaml:

appengine/gophers/gophers-2/app.yaml

View on GitHub
```
# If the path is empty, show static index.html file
- url: /
  static_files: index.html
  upload: index.html

# Otherwise, find file in static directory
- url: /static
  static_dir: static
```
The handlers section now defines three handlers for URLs. When App Engine receives a request for a URL /static, it maps the remainder of the path to files in the static directory. If an appropriate file is found, the contents of that file are returned to the client.

For more information on URL mapping and other options you can specify in app.yaml, see the app.yaml reference documentation.
Since you're now serving from index.html, you won't need the following lines from main.go. Delete:
- "fmt" from your list of imports
- fmt.Fprint(w, "The Gopher Network: This is being hosted by App Engine.") in your indexHandler function

Running your application locally

Run and test your application using the local development server (dev_appserver.py), which is included with the Cloud SDK.

From the project root directory where your application's app.yaml is located, start the local development server with the following command:
```
dev_appserver.py app.yaml
```
The local development server is now running and listening for requests on port 8080. Something go wrong?
Visit http://localhost:8080/ in your web browser to view the app.

Running the local development server (`dev_appserver.py`)

To run the local development server, you can either run dev_appserver.py by specifying the full directory path or you can add dev_appserver.py to your PATH environment variable:

If you installed the original App Engine SDK, the tool is located at:
```
[PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
```
If you installed the Google Cloud SDK, the tool is located at:
```
[PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
```
Tip: To add the Google Cloud SDK tools to your PATH environment variable and enable command-completion in your shell, you can run:
```
[PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
```

For more information about running the local development server including how to change the port number, see the Local Development Server reference.

Making code changes

The local development server watches for changes in your project files, so it recompiles and re-launches your application after you make code changes.

Try it now: Leave the local development server running and then try editing index.html to change "The Gopher Network" to something else.
Reload http://localhost:8080/ to see the change.

Deploying your application

Deploy your application to App Engine using the following command from the project root directory where app.yaml is located:

gcloud app deploy

Viewing your application

To launch your browser and view your application at http://[YOUR_PROJECT_ID].appspot.com, run the following command:

gcloud app browse

What's next

You just built an application where a web frontend communicates with your Go 1.9 backend!

Next, learn how to create a basic form that uses HTTP POST to display user-submitted content on an HTML template.

Was this page helpful? Let us know how we did:

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated August 20, 2019.