Install Mastro on the command line

In the previous chapter, you learned how loading a web page into the browser (also known as the client) involves making a request to a server over the HTTP protocol. The server then sends back a HTTP response containing the HTML.

In this chapter, we’ll install Mastro as a development server on your laptop using the command line. This setup can be used to later deploy a statically generated site (like we’ve done so far with the VS Code extension), as well as using Mastro as a server web framework doing on-demand server-side rendering.

Running a server means that the HTML is generated on every request by the server, instead of beforehand as when you generate a static site. This comes at the cost of running a server, but enables you to send different pages to different users. When paired with a database like PostgreSQL (and perhaps a query builder like Kysely), Mastro can even serve as a full-stack framework.

Different ways to run Mastro

Here’s a table listing the various ways you can run Mastro. Either locally (meaning on your laptop or desktop), or on a production system in some data center, to host your live website. And either using VS Code for Web in your browser, or by installing things and using the command line.

Setup local development server

To preview your website in a browser, while you work on it, start a local development server.

1. Open a terminal application on your computer, which will provide you with a command-line interface (CLI). On macOS, the pre-installed terminal app can be found under /Applications/Utilities/Terminal. On Windows, you can try PowerShell, or for additional compatibility use WSL.

2. Install Deno – a JavaScript runtime without a web browser, similar to Node.js. The easiest way is by copy-pasting the following into your terminal:

   curl -fsSL https://deno.land/install.sh | sh
   

   ⧉

   Copied!

   and hit enter.

3. Navigate to the folder where you want to create your new project folder in, for example type:

   cd Desktop
   

   ⧉

   Copied!

   and hit enter.

4. Then type (or copy-paste):

   deno run -A jsr:@mastrojs/mastro@0.3.1/init
   

   ⧉

   Copied!

   and hit enter. This Mastro initalization script will ask you for a folder name for your new server project. Enter for example test-server and hit enter (folder names with spaces are a bit of a pain on the command-line).

5. Then it will tell you to cd test-server, and from there you can enter:

   deno task start
   

   ⧉

   Copied!

   This will start your server! You can see the dummy page it’s serving by opening the following URL in your web browser: http://localhost:8000 (The 8000 is the port. If you’d want to run multiple web servers on the same machine, each would need to use a different port.)

   To stop the server again, switch back to the terminal and press Ctrl-C on your keyboard.

To edit the files in the newly created folder, you’ll want to install Visual Studio Code on your computer (or a similar code editor) and open the newly created project folder in it.

Check out the contents of the generated folder. It’s a bare-bones Mastro project, but now:

• with a deno.json file, which specifies the Mastro version to use, and what happens if you type deno task start or deno task generate,
• the deno.lock file, which remembers exactly which version of each package was used,
• the server.ts file, which is executed to start up the server (here you might add customizations like middleware), and
• the file in the routes/ folder is now called index.server.ts instead of index.server.js, because it’s TypeScript – JavaScript with type annotations. This allows deno check to find certain problems in your code even without running it.

Congrats, you’re all set now to work locally on your project.