# A Simple Webpage - Crow
Hello World is a good start, but what if you want something a bit more fancy.. Something like an HTML document saying "Hello World". If that's what you want, follow along:

Skip to content

# A Simple Webpage

Hello World is a good start, but what if you want something a bit more fancy.. Something like an HTML document saying "Hello World". If that's what you want, follow along:

## Basic Webpage

Let's start our webpage with.. well.. a webpage. But before we create a webpage we need to place it somewhere Crow recognizes, for now this directory is going to be called `templates`, but we can change it later.

Once our `templates` folder is created, we can create our HTML document inside it, let's call it `fancypage.html`.

After that we can just place something simple inside it like:

templates/fancypage.html

    <!DOCTYPE html>
    <html>
      <body>
      <p>Hello World!</p>
      </body>
    </html>

Now that we have our HTML page ready, let's take our Hello World example from earlier:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15

    #include "crow.h"
    //#include "crow_all.h"

    int main()
    {
        crow::SimpleApp app; //define your crow application

        //define your endpoint at the root directory
        CROW_ROUTE(app, "/")([](){
            return "Hello world";
        });

        //set the port, set the app to run on multiple threads, and run the app
        app.port(18080).multithreaded().run();
    }

And now let's modify it so that it returns our cool page:

/main.cpp

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15

    #include "crow.h"
    //#include "crow_all.h"

    int main()
    {
        crow::SimpleApp app;

        //define your endpoint at the root directory
        CROW_ROUTE(app, "/")([](){
            auto page = crow::mustache::load_text("fancypage.html");
            return page;
        });

        app.port(18080).multithreaded().run();
    }

Your project should look something something like:

    ./
     |-templates/
     |          |-fancypage.html
     |
     |-main.cpp
     |-crow_all.h

or

    ./
     |-templates/
     |          |-fancypage.html
     |
     |-crow/
     |     |-include/...
     |     |-crow.h
     |-main.cpp

Once the code is done compiling, if we call `http://localhost:18080/` we get our Hello World in an HTML document rather than just plain text.

Note

Compilation instructions are available for Linux, MacOS, and Windows

## Template Webpage with a variable

But we can make things even more exciting, we can greet a user by their name instead!!

Let's start with our webpage, and modify it with a little bit of mustache syntax:

templates/fancypage.html

    <!DOCTYPE html>
    <html>
      <body>
      <p>Hello {{person}}!</p> <!--(1)-->
      </body>
    </html>

1. `{{}}` in mustache define a simple variable

Now let's modify our C++ code to use the variable we just added to our webpage (or template):

/main.cpp

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16

    #include "crow.h"
    //#include "crow_all.h"

    int main()
    {
        crow::SimpleApp app;

        //define your endpoint at the root directory
        CROW_ROUTE(app, "/<string>")([](std::string name){ // (1)
            auto page = crow::mustache::load("fancypage.html"); // (2)
            crow::mustache::context ctx ({{"person", name}}); // (3)
            return page.render(ctx); //(4)
        });

        app.port(18080).multithreaded().run();
    }

1. We are adding a `string` variable to the URL and a counterpart (`std::string name`) to our route - this can be anything the user wants.
2. We are using `load()` instead of `load_text()` since we have an actual variable now.
3. We are creating a new context containing the `person` variable from our template and the `name` we got from the URL.
4. We are using `render(ctx)` to apply our context to the template.

Now (after compiling the code and running the executable a second time) calling `http://localhost:18080/Bob` should return a webpage containing "Hello Bob!". We did it!

For more details on templates and HTML pages in Crow please go here