Create an API and integrate it with the frontend

In this tutorial, we will guide you through the process of creating a backend file and seamlessly integrating it with a frontend file using MagicJS.

The tool used in this guide is MERN.AI. You can download their free version by clicking here.

Create and Integrate API

Creating Frontend and Backend Files

Let's start by creating a frontend file in the 'main-features' folder.

1. Add a new file by right clicking on 'main-features' folder.

2. Select 'Blank UI/React Component' and create a file named 'test-ui'

3. Give the path as '/test-ui' in the properties tab.

4. Create a backend file using the 'Blank Backend Function' option and name the backend file as 'test'.

Note that the 'server.tsx' extension will be automatically appended to the file by mern.ai.

It's important to append the 'server.tsx' extension manually for all backend functions when using other IDEs like VS Code.

In the backend file, you'll find a boilerplate for creating a backend function as given below:

test.server.tsx

import { createBackendFunction, useFunctionContext } from "@magicjs.dev/backend"

export default createBackendFunction(async function () {
    const ctx = useFunctionContext(this)

    return "Message from server"
})

• This code defines a backend function using the @magicjs.dev/backend library, which, when invoked, will return the message "Message from server".

Calling Backend Function from Frontend

Let's trigger the backend function on a button click.

Refer the below code and update the test-ui.tsx file

test-ui.tsx

import { Button } from "antd"
import React from "react"
import testServer from "./test.server"

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div>
            <h1>Backend Test</h1>
            <h1>{`Response from backend: ${msg}`}</h1>
            <Button onClick={() => testServer().then((msg) => setMsg(msg))}>
                Call Backend function
            </Button>
        </div>
    )
}

Expand for Tailwind styled code.

test-ui.tsx

import React from "react";
import testServer from "./test.server";

export default function Component(props: any) {
    const [msg, setMsg] = React.useState("")

    return (
        <div className='flex flex-col justify-center items-center min-h-screen'>
            <div className="container">
                <h1 className="text-[72px] text-[#505050] font-medium mb-[56px]">Backend Test</h1>
                <h1 className="text-[56px] text-[#000000] mb-8">
                    Response from backend: <span className="text-[#147E1D]">{msg}</span>
                </h1>
                <button
                    onClick={() => testServer().then((msg) => setMsg(msg))}
                    className='text-[25px] text-[#151515] border border-[#BFBFBF] rounded-[10px] px-[62px] py-[15px] hover:opacity-70 active:scale-95'
                >
                    Call Backend function
                </button>
            </div>
        </div>
    )
}

• In the above code, the button triggers a request to the backend server, and upon receiving a response, it displays the response message on the UI.

After saving the changes, test the functionality by clicking the button. You should see the message from the backend displayed on the frontend.

Tailwind Styled Output

Our backend relies on Express.js for development.

🎉 Congratulations! You've learned how to create a backend function and seamlessly integrate it into the frontend using MagicJS framework.

---