Dancer2: Hello World

By pressing `ENTER` I'll jump to the selected folder.

If now I type in

dir

I can see the files that are in that directory.

... app.psgi
... test.out
... test.t

Switching to the file-explorer I can see the same.

Among the 3 files in the directory: app.psgi is the file that we'll actually need now. That's where our "application" is. test.t is the test file that is checking that our code works properly.

Then you'll find all kinds of extra files with .out extension that you won't have in a real application. I only have them to store the output of various commands so I can include it in the slides. You don't have to worry about those files.

Hello World

The content of the app.psgi file can be seen here:

examples/dancer/hello_world/app.psgi

package App;
use Dancer2;

get '/' => sub {
    return 'Hello World!';
};

App->to_app;

What you need to do at this point is type in the Command Prompt:

plackup

It will print something like this on the screen:

HTTP::Server::PSGI: Accepting connections at http://0:5000/

This tells us that the server is running and accepting connection on port 5000.

If you are using Windows, you'll probably also see a pop-up of the Windows Defender Firewall saying that it has blocked some features of this app.

This happens if you have the Windows Firewall on your computer that will limit the access to your computer.

It has two checkboxes, one to enable access on Private networks, the other to enable access on Public networks

For some reason on my computer the Public networks was checked. I prefer to only allow access on Private networks so I checked that box and unchecked the box of the Public networks.

Then I clicked Allow access. It took a couple of seconds to make the pop-up disappear. It might have been slow because I was recording the video on a Windows running in a Virtual Box while the video-recording was running. So my computer was already busy.

Then I can open my browser to the URL that was listed on the terminal window: http://0:5000/. (you should be able to just click on this link)

If that does not work you can also try to type in http://127.0.0.1:5000/ which is going to "localhost" which is your computer.

Finally you can try http://localhost:5000/.

In the video you can see that I tried all of these using the browser that came with Windows (I think it was Edge).

Install Firefox or Chrome

So because I could not convince Edge to work I decided to download Firefox. Which is Open Source so I like it.

While I was waiting for Firefox to be installed I tried Edge again and this time it worked.

Either I did something incorrectly earlier or Edge just got scared when it saw I am downloading Firefox and started to work.

Finally it works!

So we can see in the browser Hello World1. It's not much of a web application, but it works and it is ours!

In the terminal/Command Prompt window you can see the access log. Apparently also the previous attempts showed up even though we did not get a response in the browser.

The code

Let's go over the code now.

package App;

This is just the declaration of the Perl package. The name App isn't really important here. You can put there virtually anything. As long as at the end of the code you use the same name.

use Dancer2;

This loads the Dancer2 module. (This is what the -MDaner2 did on the command line.)

get '/' => sub {
    return 'Hello World!';
};

This is called a route.

The way Dancer works is that we need to map URL pathes to anonymous functions. (You could also use named functions, but they are usually anonymous.)

The "path" is the part that comes in the URL after the name of web site. So in case of this URL: "https://code-maven.com/slides/dancer/hello-world-with-dancer" The part "/slides/dancer/hello-world-with-dancer" is the path.

In case of "http://localhost:5000/" the path is just "/" though when I typed it in the browser hid it.

I could also type in some longer path, for example I tried "http://localhost:5000/hello" and I got a Error 404 - Not Found message. That's because the path /hello has not been defined in this application.

After the get keyword is the path we are mapping.

After the fat-arrow => you can see the anonymous subroutine. Whatever it returns is sent back to the browser.

It can return some HTML to make a nice page, but in our case we only returned the plain text "Hello World!" and the browser displayed it.

The code with the fat-arrow might look a bit strange, especially if you know Perl, but it is basically just a key-value pair where the path is the key and the anonymous function is the value.

Just don't forget the semi-colon at the end of that block! This is one of the cases when after the closing of curly braces you have to put a semi-colon because this is a statement and not just a block.

The same as this code written slightly differently might help you understand what's really going on here.

get('/', sub {
    return 'Hello World!';
});

We imported the get function from the Dancer2 module. This function gets two parameters. The first one is the path and the second one is the function to be executed when someone requests that path.

Stop the application

To stop the application you need to switch to the terminal/command prompt again and press Ctrl-C. Windows will ask you for confirmation. Type Y.

Testing

Then remains the question, how do we know that this actually works. Without manually starting the whole thing and then visiting the web site? This is what we'll see in the next video.