Install Marko

[!NOTE] If you'd like to experiment and learn about Marko directly in your browser, head over to our Playground. You can develop a Marko application right there without any local setup.

Prerequisites

Node.js v18, v20, v22 or higher.
IDE - We recommend VS Code and our Official Marko extension
Terminal - You will use the command-line interface (CLI) to set up and start the application.

Marko Run Setup (Recommended)

Marko Run makes it easy to get started with minimal configuration and is the recommended starting point for a new Marko project. It's the official application framework from the Marko team and powered by Vite.

To set up your project:

bash

npm init marko -- -t basic
cd ./my-marko-application
npm run dev

Open src/routes/+page.marko in your editor to modify the index page. See the routing documentation to learn how to add additional pages to your project.

Manual Setup

If you prefer to create your own application structure, you can set up your project using your preferred bundler. The Marko team maintains the plugins for Vite, Webpack, and Rollup. The following guide will help you set up Vite.

Create your project directory

Create an empty directory with your project's name and navigate into it:
bash
```
mkdir my-marko-application
cd my-marko-application
```
Once inside the directory, initialize your package.json file, which is used to manage your project's dependencies:
bash
```
npm init --yes
```
Install Marko

Let's install the dependencies required for Marko.

First, install marko 6 as your dependency.
bash
```
npm install marko@next
```
Next, install Vite and the Marko plugin as development dependencies using the npm -D flag:
bash
```
npm install -D vite @marko/vite
```

Create the vite.config.ts file

Create vite.config.ts file to export the Vite configuration and add the marko() plugin to the plugins list.

typescript

import { defineConfig } from "vite";
import marko from "@marko/vite";

export default defineConfig({
  plugins: [marko()],
});

Create your first Marko page

In your text editor, create a src/routes/index.marko file. This will be your first Marko page of the project. Copy and paste the following content into the new file:
marko
```
<html lang="en">
  <body>
    <h1>Hello Marko!</h1>
  </body>
</html>
```
Add a server

By default, the marko() plugin requires the use of Vite Server Side Rendering (SSR) mode (this can be disabled with the Marko plugin's linked option). Therefore, you need to create a server file to start your application. This guide will use express.

First, install express:
bash
```
npm install express
```
Now, create the server logic inside an index.js file. This code sets up an Express server and integrates with Vite for handling server-side rendering of a Marko template. For simplicity, this setup is intended for development environments only. For more examples, refer to the Marko JS examples repository.
javascript
```
import express from "express";
import { createServer } from "vite";

const app = express();

const vite = await createServer({
  server: {
    middlewareMode: true,
  },
  appType: "custom",
});

app.use(vite.middlewares);

app.get("/", async (req, res) => {
  const template = (
    await vite.ssrLoadModule("./src/routes/index.marko?marko-server-entry")
  ).default;
  const result = template.render();
  res.header("Content-Type", "text/html");
  result.pipe(res);
});

app.listen(3000);
```
Note that ?marko-server-entry is used to indicate the server code's entry point to the Vite plugin.
Start the application

You can now start the application using the command below and access http://localhost:3000 to see the preview of your code while you build your app!
bash
```
node index.js
```

Set up TypeScript

Marko’s TypeScript support offers in-editor error checking, makes refactoring less scary, verifies that data matches expectations, and even helps with API design.

Or perhaps you simply want more autocomplete in VS Code—that works too!

To add TypeScript support to your Marko application, add a tsconfig.json file in the project's root directory. You can use the following tsconfig.json as a starting point:

json

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "ESNext"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "noImplicitOverride": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "verbatimModuleSyntax": true
  }
}

For type checking Marko files in the CLI, you can install @marko/type-check in your project with the following command:

bash

npm install -D @marko/type-check

You can then use mtc (Marko type check) instead of tsc:

bash

mtc

For more information about working with Marko and TypeScript check this reference page.

IDE Plugin

The Marko team maintains a Marko VS Code extension that provides Marko syntax highlighting, pretty-printing, TypeScript, IntelliSense, and more.

For other editors, you can use the Marko language server to enhance the developer experience with Marko in your IDE.

Installation

Install Marko

Prerequisites

Marko Run Setup (Recommended)

Manual Setup

Set up TypeScript

IDE Plugin

Next steps