Mastro as a server on the command line

With static site generation (SSG), the whole website is generated upfront. On the other hand, when on-demand rendering or server-side-rendering (SSR), the HTML is generated each time 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, you will open a command line interface (CLI for short), and install Mastro as a development server on your laptop.

Different ways to run Mastro

Here’s a table listing the various ways you can run Mastro, with links to more infos.

Either in your browser (using VS Code for Web), or by using the command line.
And either locally (meaning on your laptop) to work on your site, or on a production system in some data center (so users can see your live website).

	Locally	Prod static site	Prod server
In your browser	Setup	Publish	n/a
Command line	Setup	Publish via CI/CD	Deploy server

Setup local development server

In this section, we’ll be using the modern Deno JavaScript runtime, which makes our life a bit easier compared to other runtimes. However, you can also use Mastro with Node.js or with Bun. (In Deno, you don’t need to mess with npm install and node_modules folders, and niceties like TypeScript, Deno.serve, and a formatter are all built-in.)

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

Open a terminal application on your computer, which will provide you with a command-line interface (CLI). VSCode has a terminal built in: to open it, select View -> Terminal in the menu. Alternatively, your OS has a terminal app pre-installed: on macOS under /Applications/Utilities/Terminal, on Windows you can use PowerShell, or for additional compatibility with Linux servers use WSL.
Install Deno: for example by copy and pasting the following into your terminal:
```
curl -fsSL https://deno.land/install.sh | sh
```
Copied!
then hit enter.
Navigate to the folder where you want to create your new project folder in, e.g. type:
```
cd Desktop
```
Copied!
and hit enter.
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 project. Enter for example mastro-test and hit enter (we’re using a dash, because folder names with spaces are a bit of a pain on the command-line).
Then it will tell you to cd mastro-test, 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 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 (File -> Open Folder… and choose your mastro-test folder).

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.

Deploy to production

But since your laptop is not always running and connected to the internet, if you want other people on the internet to be able to see it, you need a server in some data center to host your production website.

To deploy your website to production (either by statically generating it, or by running a server in production), see the Mastro deployment docs.

Usually, this involves committing your changes to the Git version control system on your computer, then pushing the commits to the GitHub server, and from there your code will be automatically published to a production web server.

Version control with Git

Just changing your project’s files on your computer will not change them on GitHub. To commit and push your changes, you can either:

continue to use the Source Control view built into VS Code,
install a GUI like GitHub Desktop or Git Up, or
use git on the command line, see e.g. this cheat sheet.

Regardless of which interface for Git you use, in the long run it pays off to learn the right mental model for Git.

In the next chapter, let’s look at some fun things you can do with a server.