MagicJS
mern.aiUniversityGitHub
  • Introduction to MagicJS
  • Why MagicJS?
  • Getting Started & Installation
  • Basic Guide
    • Create a new page using React
    • Navigate between pages
    • Create an API and integrate it with the frontend
    • Authenticate Users
      • Authorise based on Roles
    • Advanced State Management with useContent()
    • Perform CRUD Operations
    • Adding Realtime capabilities using socket
    • Handling file uploads and downloads
  • Advanced Guide
    • Understanding the concept of features in MagicJS
    • Using UI components & functions across multiple Magic Features
    • Advanced Routing of pages
    • Enable SSR
    • Access MongoDB
    • Styling pages using Tailwind CSS
  • Deploying
  • Update MagicJS
  • API References
    • Frontend
      • <LinkDisplay>
      • createSrc()
      • createUploader()
      • importUI()
      • loadConfig()
      • protected()
      • useParams()
      • useAxios()
      • useLogin()
      • useSocket()
      • useContent()
      • usePromise()
      • useNotification()
    • Backend
      • createBackendFunction()
      • data()
      • io()
      • ServerInstance()
      • utils
        • hash()
        • verifyHash()
        • initiateEmailVerification()
        • saveFileToUserUploads()
        • readFileFromUserUploads()
        • removeFileFromUserUploads()
        • assignRoleToUser()
        • unassignRoleFromUser()
        • findAllRolesByUser()
        • isUserInAnyRoles()
        • assignRoleToUser()
Powered by GitBook
On this page

Was this helpful?

Getting Started & Installation

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

PreviousWhy MagicJS?NextCreate a new page using React

Last updated 1 year ago

Was this helpful?

Either you can use any online based IDEs like or you can use offline IDEs like "Visual Studio Code".

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.

  1. Follow the on-screen instructions.

  2. Wait for a few minutes for the setup to complete.

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

The above UI is a placeholder UI from MagicJS as there is no UI file mapped to the root.

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.

Pre-Requisites

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:

nvm install v18.2.0

Use the installed Node.js version,

nvm use v18.2.0

Install MagicJS

Install MagicJS Framework using NPM:

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

Initialize your project

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

magicjs --init

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

npm start

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

The above UI is a placeholder UI from MagicJS as there is no UI file mapped to the root.

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. to embark on your journey towards becoming a proficient product owner and unlocking exciting career opportunities!

Click here
"mern.ai"
Output
Output
Screenshot: Create a new Project.
Screenshot: Online IDE - mern.ai
Screenshot: Output