> For the complete documentation index, see [llms.txt](https://skyslit.gitbook.io/magicjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://skyslit.gitbook.io/magicjs/getting-started-and-installation.md).

# Getting Started & Installation

Either you can use any online based IDEs like ["mern.ai"](https://mern.ai/) or you can use offline IDEs like "Visual Studio Code".

{% tabs %}
{% tab title="mern.ai" %}
**Follow the steps given below:**

1. Go to mern.ai.
2. Sign up or Sign into your account.
3. Click on '+ New site or app' to create an app.

<div align="center"><figure><img src="/files/Hm92XY8bvqVQRSLB44Ey" alt="Screenshot: Create a new Project."><figcaption></figcaption></figure></div>

3. Follow the on-screen instructions.
4. Wait for a few minutes for the setup to complete.

<figure><img src="/files/HBjMU0mJk6Ab6eE7oge8" alt="Screenshot: Online IDE - mern.ai"><figcaption></figcaption></figure>

5. To view the output, just click on the external link icon next to "Compiler" at the top.

<figure><img src="/files/Z98AG2df1yQqNH9fm3Gd" alt="Screenshot: Output"><figcaption><p>Output</p></figcaption></figure>

{% hint style="info" %}
The above UI is a placeholder UI from MagicJS as there is no UI file mapped to the root.
{% endhint %}

{% hint style="success" %}
Take a look at the output URL in your browser.

Yes! Your app is deployed. The output can be viewed from any device, anywhere in the world, by visiting this URL.
{% endhint %}
{% endtab %}

{% tab title="Visual Studio Code" %}

## Pre-Requisites <a href="#pre-requisite-knowledge" id="pre-requisite-knowledge"></a>

#### **Open the VS code and follow the steps given below:**

1. Create a folder for your app and open that folder in VS code by going to File > Open folder.
2. Follow the steps given below:

Install Node.js by running the following command in your VS code terminal:

```bash
nvm install v18.2.0
```

Use the installed Node.js version,

```bash
nvm use v18.2.0
```

## Install MagicJS

Install MagicJS Framework using NPM:

```bash
npm i "@magicjs.dev/cli" --global
```

## Initialize your project

After MagicJS Framework is installed, you can now initialize your project:

```bash
magicjs --init
```

Wait until the script creates the necessary files for you. Once the dependencies are installed, start the project by running the command:

```bash
npm start
```

You will be able to view the output in url `http://localhost:3000`.

<figure><img src="/files/Z98AG2df1yQqNH9fm3Gd" alt=""><figcaption><p>Output</p></figcaption></figure>

{% hint style="info" %}
The above UI is a placeholder UI from MagicJS as there is no UI file mapped to the root.
{% endhint %}
{% endtab %}
{% endtabs %}

## **Ready to step into the role of a Product Owner?**

Dive into our comprehensive course designed to equip you with the skills and knowledge needed to excel. [Click here](https://university.mern.ai/) to embark on your journey towards becoming a proficient product owner and unlocking exciting career opportunities!