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 programming language and basic web development. To start from the beginning, go to Building an App with Go.
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, 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: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 thestatic
directory of your project to modify the look ofindex.html
, and add the following styling:
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: /.*
inapp.yaml
: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 thestatic
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 theapp.yaml
reference documentation.Since you're now serving from
index.html
, you won't need the following lines frommain.go
. Delete:"fmt"
from your list of importsfmt.Fprint(w, "The Gopher Network: This is being hosted by App Engine.")
in yourindexHandler
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 backend!
Next, learn how to create a basic form that uses HTTP POST
to display
user-submitted content on an HTML template.