WEBVTT

00:00:00.600 --> 00:00:05.963
In this lesson, we will install Gramlot with
Python, create a Hello world page, and

00:00:05.963 --> 00:00:07.255
run it with Uvicorn.

00:00:07.435 --> 00:00:12.604
We will see exactly when saving the source,
automatic server reload and refreshing

00:00:12.604 --> 00:00:14.495
the browser change the result.

00:00:14.675 --> 00:00:20.418
Then we will try the same welcome page with
Node, and open a standalone HTML file

00:00:20.418 --> 00:00:22.119
directly in the browser.

00:00:22.299 --> 00:00:24.275
The learning goals are on the right.

00:00:24.455 --> 00:00:27.783
When we open our page, the browser will take
their place.

00:00:29.600 --> 00:00:31.429
Start in a new project folder.

00:00:31.609 --> 00:00:36.952
Type python three dash m venv dot venv, then
press Enter to create the virtual

00:00:36.952 --> 00:00:37.774
environment.

00:00:37.954 --> 00:00:40.856
Activate that environment with the source
command.

00:00:41.036 --> 00:00:44.651
Now install Gramlot and its Uvicorn adapter
with pip.

00:00:44.831 --> 00:00:47.903
We are using the published versions shown in
the command.

00:00:48.083 --> 00:00:52.509
Installation makes the packages available;
it does not open a web page.

00:00:52.689 --> 00:00:56.839
The learning goals stay on the right until
we are ready to open the browser.

00:00:58.640 --> 00:01:01.768
Create the project with gramlot uvicorn new
hello.

00:01:01.948 --> 00:01:03.541
Enter the hello folder.

00:01:03.721 --> 00:01:09.300
Open pages slash index dot py in the editor
and replace the sample with this small

00:01:09.300 --> 00:01:09.640
Page.

00:01:09.820 --> 00:01:13.861
We import Page as BasePage and define our
own Page class.

00:01:14.041 --> 00:01:19.353
Its main method receives root, and root dot
h one declares the Hello world heading.

00:01:19.533 --> 00:01:22.001
Click Save file to write the source to disk.

00:01:22.181 --> 00:01:27.034
We have saved the Page, but have not started
its server or opened it in the browser.

00:01:28.840 --> 00:01:33.009
Run Uvicorn with app colon application and
dash dash reload.

00:01:33.189 --> 00:01:36.635
Wait for the terminal to confirm that the
server is running.

00:01:36.815 --> 00:01:41.369
Now enter its local address in the browser
address field and press Open.

00:01:41.549 --> 00:01:43.739
Only now does Hello world appear.

00:01:43.919 --> 00:01:49.020
The sequence matters: save the Page, start
the server, then ask the browser to open

00:01:49.020 --> 00:01:49.758
the address.

00:01:49.938 --> 00:01:53.191
The two panels show the command and its
actual result.

00:01:55.000 --> 00:01:58.359
Change the heading in the editor to Welcome
to Gramlot.

00:01:58.539 --> 00:02:03.455
The browser still shows Hello world: editing
text has not changed the running page.

00:02:03.635 --> 00:02:04.878
Click Save file.

00:02:05.058 --> 00:02:07.567
The browser still shows the previous result.

00:02:07.747 --> 00:02:12.486
In the terminal, Uvicorn detects the saved
file and restarts the application

00:02:12.486 --> 00:02:13.359
automatically.

00:02:13.539 --> 00:02:18.028
Wait for application startup to complete,
then click Reload in the browser.

00:02:18.208 --> 00:02:20.609
The heading now says Welcome to Gramlot.

00:02:20.789 --> 00:02:25.955
The reload option watches the source files;
after saving, we only need to refresh

00:02:25.955 --> 00:02:26.721
the browser.

00:02:28.520 --> 00:02:30.891
Now let's run the welcome page with Node.

00:02:31.071 --> 00:02:36.297
In a separate folder, use the official
create command to generate a page project.

00:02:36.477 --> 00:02:39.391
Enter that project and run npm install.

00:02:42.522 --> 00:02:47.813
The editor shows the JavaScript Page: it
still declares the heading with root dot h

00:02:47.813 --> 00:02:48.068
one.

00:02:48.248 --> 00:02:50.632
Save this source before starting the server.

00:02:50.812 --> 00:02:55.260
Run npm start and wait for the local address
printed in the terminal.

00:02:55.440 --> 00:02:58.205
Enter that address in the browser and press
Open.

00:02:58.385 --> 00:03:01.054
The welcome page is now served by Node.

00:03:01.234 --> 00:03:06.096
Notice that the previous result was not
replaced until we opened the new address.

00:03:16.480 --> 00:03:21.321
Open a second terminal tab in the JavaScript
project, leaving the Node server

00:03:21.321 --> 00:03:21.824
running.

00:03:22.004 --> 00:03:25.556
Run npm run build in the JavaScript project.

00:03:25.736 --> 00:03:29.905
The terminal reports the generated index dot
html file.

00:03:30.085 --> 00:03:33.157
Stop the Node server: we will open the file
itself.

00:03:33.337 --> 00:03:38.499
Put the file address ending in index dot
html into the browser address field.

00:03:38.679 --> 00:03:40.707
Click Open HTML file.

00:03:40.887 --> 00:03:46.469
The address now starts with file, instead of
http, and the welcome page appears from

00:03:46.469 --> 00:03:47.533
that local file.

00:03:47.713 --> 00:03:50.730
Reload it with the browser offline: it still
works.

00:03:50.910 --> 00:03:55.294
This simple standalone build needs no
running Python or Node server.

00:04:01.480 --> 00:04:06.890
We installed Gramlot, wrote and saved a
Page, started Uvicorn and opened the result

00:04:06.890 --> 00:04:07.868
in the browser.

00:04:08.048 --> 00:04:13.004
We changed the heading and saved the source,
watched Uvicorn reload automatically,

00:04:13.004 --> 00:04:14.575
and refreshed the browser.

00:04:14.755 --> 00:04:20.703
Finally, we ran the JavaScript Page with
Node and opened its generated HTML file

00:04:20.703 --> 00:04:22.041
directly, offline.

00:04:22.221 --> 00:04:25.464
Next, we will connect inputs and the page to
Data.