Skip to content

Hello World tutorial

Jump to bottom Edit New page
Greg Bowler edited this page Mar 7, 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 Composer to create new WebEngine applications very quickly.

If you have not got PHP or Composer installed, you will need to do that first -- check the PHP environment setup section for a guide on how to do this.

Once you have Composer set up, and can type composer from the terminal, run the command composer --global require phpgt/installer. This installs the Installer repository for you globally, making the gt command available in your terminal. After running the command and gt is still not available, double check you have added the Composer's bin directory to your PATH environment variable, as described in [[Adding gt to your PATH]].

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 at gt commands.

Accessing the application in a web browser

// TODO: http://localhost:8080

Next step: Adding dynamic content

// TODO: Link on to next tutorial.

Website | Packagist | CircleCI | Scrutinizer

Introduction

Tutorials

User guide

Further reading

Setup guides

Clone this wiki locally