Most web applications are served from remote machines in data centers miles and miles away from the devices that are using them. Because we’re used to high-speed internet connections, that distance can seem trivial and unnoticeable.
The Tessel 2 can run a server and deliver web applications to locally connected devices. It’s quicker than those remote machines due to the immediate distance between the Tessel and devices connected to it. By the end of this article, we’ll start a server on the Tessel and serve a web application that controls the Tessel LEDs through a local network.
In your command line, make a folder for your Tessel code, then initialize a Tessel project in that folder by running each of the following commands in the terminal:
Rename the “index.js” file you’ve just created to “webserver.js”, then copy and paste the below script over the existing text:
Now that our server is in place, let’s get our access point set up. In the terminal, run the following command:
t2 ap -n TesselRouter
If you haven’t read about creating access points yet, check out the access point tutorial. After connecting to TesselRouter, run the following command in your terminal:
t2 run webserver.js
When “Server running at http://192.168.1.101:8080/” appears in the terminal, connect to that URL (or http://tessel.local:8080/, replacing “tessel” with the name of your Tessel) in a web browser of the device connected to the TesselRouter network.
Now let’s take it up a notch by adding some interactivity between the web page and the Tessel!
Let’s start this next part by building out the web page we want Tessel to send to your web browser.
Create a file called index.html in your project directory and open it up in your preferred text editor to add the initial html:
Open that file in the browser to see the UI for this web app.
Now let’s check out the server again to finish up the project.
Replace the code in webserver.js with the following:
In order to make code pushing more efficient, Tessel only pushes the entry point file and its Node dependencies by default. Since index.html is not included in this default push, we’ll need to explicitly require it with a .tesselinclude file (Read more about project files here).
You already have a .tesselinclude file, which was created when you ran t2 init. Open it up and copy and paste the following on a new line:
Finally, let’s fire up our server again by running:
t2 run webserver.js
Once the server is running, connect to the URL in the web browser.
Click on the buttons to toggle the lights.
Here is a demo video:
The full code for this project can be found in this repo.