> 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

This page provides guidance on installing and using our framework in both offline and online IDEs.

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="https://629398272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrhfVeNvXQhNiRfJxJ9pq%2Fuploads%2FCp5IgmgeDDms9LyXWoad%2F1.png?alt=media&amp;token=c0e70d36-4f74-4f01-a948-5f5847803211" 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="https://629398272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrhfVeNvXQhNiRfJxJ9pq%2Fuploads%2FUlVyjebZtJvMmUBTF1nT%2FScreenshot%202024-01-09%20at%201.36.20%20PM.png?alt=media&amp;token=6c4012af-4e44-4d94-b78f-07e0de61dce1" 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="https://629398272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrhfVeNvXQhNiRfJxJ9pq%2Fuploads%2FjA3RT4bTzIX7yjcn0d89%2Fimage%203.png?alt=media&amp;token=c3fdf41b-0b8c-4c28-b351-3b355e65375f" 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="https://629398272-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrhfVeNvXQhNiRfJxJ9pq%2Fuploads%2FjA3RT4bTzIX7yjcn0d89%2Fimage%203.png?alt=media&amp;token=c3fdf41b-0b8c-4c28-b351-3b355e65375f" 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!