---
title: "Building a Simple Web Server"
---

# Building a Simple Web Server

> This page demonstrates how to build and test a simple web server using the [Web Dev module](ignition-modules/web-dev/web-dev.md). You’ll create a small test environment that responds to basic HTTP `GET` and `POST` requests. The examples will use Button components in Perspective to send requests to Python Resources in Web Dev, but any external client can be used to communicate with the same endpoints.

## Set Up the Web Dev Environment

The Web Dev environment used in the examples below requires a folder to store your resources.

1. In the Designer, right-click **Web Dev** in the Project Browser, then select **New Folder**.

   ![Create New Web Dev Folder](new-webdev-folder.png)

2. Name the folder **testServer**, then click **Create Folder**.

   The folder name becomes part of the URL path for your resources. For example:

    `http://localhost:8088/system/webdev/MyProject/{testServer}/resourceName`

   ![Name the folder testServer](testServer.png)

### HTTP Post Example

This example demonstrates how Ignition can receive data from an external source by using a Button component in Perspective to send JSON data through an `httpPost` command to a Python Resource in Web Dev, which then receives and processes the POST request.

1. Right-click the **testServer** folder, then select **New Python Resource**.

   ![Create New Python Resource](new-python-resource.png)

2. Name the resource **postjson** and click **Create Resource**.

    ![](postjson-create-resource.png)

3. From the HTTP Method dropdown, select **doPost**, and check **Enabled**.

    ![Select HTTP Method and Enable Resource](doPost-enabled.png)

4. Paste the following code to accept JSON data, print it to the Gateway logs, and return a simple HTML response.  

   ```python title="postjson Python Resource (Web Dev Section)"
   # Accept JSON data from a POST request.
   # Expecting 'names' and 'values' lists of equal length.

   data = request['data']
   names = data['names']
   values = data['values']

   system.util.getLogger("WebDev").infof("Names: %s | Values: %s", names, values)

   html = "<html><body>"
   for i in range(len(names)):
       html += "%s: %s<br>" % (names[i], values[i])
   html += "</body></html>"

   return {'html': html}
   ```

5. Open a Perspective view and add a **Button** component. In this example, we named the button **POST JSON**.

    ![Add a Perspective Button](post-json-button.png)

6. With the Button selected, right-click and select **Configure Events**.

    ![Configure Component Events](configure-events.png)

7. Under Mouse Events, select **onClick**, then add a **Script** action. Paste the following code to send a POST request to your new endpoint.

    ```python
    # Post data to the web service in JSON format.
    # This allows you to use the 'data' object in the Python Resource.

    projectName = "MyProject"
    folderName = "testServer"
    doPostName = "postjson"
    url = "http://localhost:8088/system/webdev/%s/%s/%s" % (projectName, folderName, doPostName)

    params = {
        "names": ["String", "Integer"],
        "values": ["Hello World", 42]
    }

    jsonParams = system.util.jsonEncode(params)

    client = system.net.httpClient()
    response = client.post(
        url,
        data=jsonParams,
        headers={"Content-Type": "application/json"}
    )

    system.perspective.print(response)
    ```

    ![](onClick-script.png)

8. Save the project.

9. Open the Perspective Session and click the Button to send the POST request. The printed response appears in the Session Console, and the Gateway logs show the formatted data.

The Gateway can now receive HTTP POST requests at: `http://localhost:8088/system/webdev/MyProject/testServer/postjson`

### HTTP Get Example

This example shows how to respond to a simple HTTP GET request using Web Dev by creating a Python Resource that returns an HTML message, which can be viewed directly in a browser or triggered from a Perspective Event Script.

1. Right-click the **testServer** folder, then select **New Python Resource**.

   ![Create New Python Resource in testServer folder](new-python-resource.png)

2. Name the resource **getexample**, then click **Create Resource**.

   ![Name the getexample Resource](getexample-create-resource.png)

3. From the HTTP Method dropdown, select **doGet**, and check **Enabled**.

   ![Select doGet HTTP Method and Enable Resource](doGet-enabled.png)

4. Paste the following code to return a simple HTML message confirming that the Gateway received your GET request.

   ```python title="getexample Python Resource (Web Dev Section)"
   # Return a simple HTML response to confirm a GET request.

   html = "<html><body><h2>Hello from Ignition Web Dev!</h2></body></html>"
   return {'html': html}
   ```

5. Save the resource, then open a web browser and navigate to:

    `http://localhost:8088/system/webdev/MyProject/testServer/getexample`

    The HTML message appears in the browser window.

6. To test the endpoint, open a Perspective view and add a Button component. In this example, we named the Button **GET EXAMPLE**.

    ![](get-example-button.png)

7. With the Button selected, right-click and select **Configure Events**.

    ![Configure Component Events](configure-events.png)

8. Under Mouse Events, select **onClick**, then add a **Script** action. Paste the following code to send a GET request to your endpoint and print the response text in the Session Console.

    ```python
    projectName = "MyProject"
    folderName = "testServer"
    doGetName = "getexample"
    url = "http://localhost:8088/system/webdev/%s/%s/%s" % (projectName, folderName, doGetName)

    client = system.net.httpClient()
    response = client.get(url)
    system.perspective.print(response)
    ```

9. Save the project.

10. Open the Perspective Session and click the Button. The Gateway's response appears in the Session Console, confirming that the Web Dev resource successfully handles HTTP GET requests.

The Gateway can now respond to HTTP GET requests at: `http://localhost:8088/system/webdev/myProject/testServer/getexample`