Mastro as a server on the command line

When generating a static site, the whole website is generated upfront. On the other hand, when on-demand rendering (which some people also call server-side-rendering or SSR), the HTML is generated anew on every request by the server. 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.

In this chapter, we’ll install Mastro as a development server on your laptop using the command line. In the next chapter, we’ll see how to use this setup to deploy a statically generated site (like we’ve done so far with the VS Code extension, but this time with the command line), and also how to run Mastro as a production server doing on-demand server-side rendering.

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

In this section, we’ll be using the modern Deno JavaScript runtime, which makes our life quite a bit easier compared to other runtimes. No messing with npm install and node_modules folders. And in Deno, niceties like TypeScript, Deno.serve, and a formatter are all built-in and pre-configured. However, you can also use Mastro with Node.js or with Bun, should you choose to do so.

To preview your website in a browser, while you work on it, let’s 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 use PowerShell, or for additional compatibility with Linux servers use WSL.

2. Install Deno: 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 npm:@mastrojs/create-mastro@latest
   

   ⧉

   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.