logo

Play Hello World Web Tutorial

Play application overview

This tutorial is implemented as a Play application that demonstrates Play's basics. We started with the Play Scala seed template, which set up the application project structure and the configuration to build with sbt. We added stylesheets with Play's colors and a Table of Contents.

Let's start by looking at what happens at runtime. When you entered the server name and port number, http://localhost:9000/, in your browser:

  • The browser requested the root / URI from the HTTP server using the GET method.
  • The Play internal HTTP Server received the request.
  • Play resolved the request using the routes file, which maps URIs to controller action methods.
  • The action method used Twirl templates to render the index page.
  • The HTTP server returned the response as an HTML page.

At a high level, the flow looks something like this:

Request and response

Explore the project

Next, let's look at the tutorial project to locate the implementation for the following:

  • The controller action method that defines how to handle a request to the root URI.
  • The conf/routes file that maps the request to the controller method.
  • The Twirl template that the action method calls to render the HTML markup.

Using a command window or a GUI, start with the top-level project directory. The following directories contain application components:

Note: When changing directories in Windows shells, substitute / for \ in path names.

  1. The app subdirectory is where you put your Scala code and packages. It contains directories for controllers and views, which will be familiar to those experienced with the Model View Controller (MVC) architecture. Since this simple project does not need an external data repository, it does not contain a models directory, but this is where you would add it. You could also add a service package and utils here.
  2. The public subdirectory contains directories for images, javascripts, and stylesheets.
  3. The conf directory contains application configuration. For a more detailed explanation of the project's structure, see Play Application Layout.

  4. To locate the controller action method, open app/controllers/HomeController.scala file with your favorite text editor.

    The Homecontroller class includes the index action method, as shown below. This is a very simple action method that generate an HTML page from the index.scala.html Twirl template file.

    def index() = Action { implicit request: Request[AnyContent] =>
  Ok(views.html.index())
}
  5. To view the route that maps the browser request to the controller method, open the conf/routes file.

    A route consists of an HTTP method, a path, and an action. This control over the URL schema makes it easy to design clean, human-readable, bookmarkable URLs. The following line maps a GET request for the root URL / to the index action in HomeController:

    GET / controllers.HomeController.index
  6. Open app/views/index.scala.html with your text editor.

    The main directive in this file calls the main template main.scala.html with the string "Welcome" to generate the page. You can open app/views/main.scala.html to see how a String parameter sets the page title.

Next steps

With this overview of the tutorial application, you are ready to add your own "Hello World" greeting.