Skip to content

Hello World tutorial

Jump to bottom Edit New page
Greg Bowler edited this page Aug 19, 2019 · 31 revisions

Outputting "Hello, World!" from WebEngine is as simple as writing the message in the page/index.html file and serving it. Even though this task seems very simplistic, it serves a purpose in acting as a more in-depth guide in setting up the environment for running WebEngine apps, and acts as a basis for the future follow-on tutorials.

Before we jump into setting up the environment, here's a spoiler:

page/index.html

<!doctype html>
<h1>Hello, World!</h1>

Then run gt run from the project root and visit http://localhost:8080 to see your glorious program in action.

Installing WebEngine

Other installation methods are documented in Installation, but if you are able to use the automated installer, you can use it to set up Composer to create new WebEngine applications very quickly.

The automated installer will get your computer set up automatically and enable the gt commands in your terminal. It will explain what it is doing before each step. To run it, paste this into your Bash terminal:

curl https://install.php.gt | bash

Important! Never run the automated installer on a production server. Piping a command from the internet into your bash prompt could be used by a malicious user as a vector of attack. Even on a development computer it is a good idea to inspect the install script before executing. You can do this in three steps:

  1. wget https://install.php.gt -O install.sh
  2. less install.sh
  3. bash install.sh

Once you can type gt to get a list of available commands, you're ready to go.

Starting a new project

It's a good idea to pick a directory on your computer to put all your coding projects. A common location for this is at ~/Code, but this can be anywhere you like. See the PHP environment setup section for some examples of how to organise your projects.

Let's assume you want to use the ~/Code/Tutorials directory to use for your test projects like this. In your terminal, go to that directory and execute the following command:

gt create first-webengine-app

This will create a new project directory called first-webengine-app and download and install any necessary dependencies of WebEngine. Once it's complete, you can open your favourite code editor and start hacking!

Editing index.html

When you use the gt create command, it creates an empty project with just one file: index.html. The file is located within the page directory and already contains the content of a very basic webpage.

Open up the index.html file and you'll see a message saying "Empty WebEngine application". This is useful for getting started quickly, as if you see this message in the browser, you can be sure that WebEngine is working correctly -- however, it doesn't satisfy the purpose of this tutorial, so you need to change it to the famous greeting, "Hello, World!".

Once you've written your greeting message in the page/index.html file, save it and we're ready to serve it to the web browser.

The file structure that makes up WebEngine projects is described in Project layout.

Serving the application

It's possible to use any web server of your choice with WebEngine, but a local development server is bundled for convenience, and can be started by typing gt serve from within your project. However, it's important to know that when building web applications, sometimes you will need more than just a server running in the background. For instance, WebEngine comes with other commands such as gt build for building your client-side assets and gt cron for running scheduled tasks in the background. All of these commands are bundled in the convenient:

gt run

In your simple project, gt serve and gt run will both do the same thing at the moment, and after executing either command you can view your application in your web browser at http://localhost:8080 .

Read more about running your application and gt commands.

Accessing the application in a web browser

With a server running, your application is available at http://localhost:8080 -- there is no need to add the /index.html as this is inferred by WebEngine's router.

Any HTML file you put inside the page/ directory will be instantly accessible in a browser, without having to configure your own routes. For example, page/about.html will be served at http://localhost:8080/about and page/team/the-boss.html will be served at http://localhost:8080/team/the-boss.

Notice that the .html suffix is removed in the browser. That allows the browser to request different Content-types, such as JSON or XML, using the same URIs. This is explained in API webservices.

Any HTML page can also have a PHP counterpart, which is where you write your page logic and create dynamic content. For example, page/index.html can be made dynamic in page/index.php.

Next step: Adding dynamic content

Move on to the next tutorial to learn how to change the static "Hello, World!" greeting so that it greets the user by their name: Hello, you! tutorial.

Website | Packagist | CircleCI | Scrutinizer

Introduction

Tutorials

User guide

Further reading

Setup guides

Clone this wiki locally