Introduction

Shopify made establishing and growing an online business easy. But it is not developer-friendly means you can't change everything the way you want. There should be a way to solve this problem and Medusa is what exactly for.

If you are a developer then you should give this a try. Why medusa over Shopify?

Developer friendly - More customizations, hack around different things according to your needs.
As medusa is Open Source you have full control over customizations, data, codebase etc.
For more brief comparisons, read this article - Shopify vs. Open Source: How does Medusa compare?

What is Medusa?

Medusa is an Open Source alternative to Shopify and built for developers. With medusa, you can build a highly customizable, headless commerce store within minutes. Not only that, but Medusa also gives you a nice admin dashboard and a commerce engine to manage all the things like orders, payments, products etc.., out of the box.

As medusa is built for developers, you can do a lot of customization to the core. You have full control over everything. In this blog, let's see how to add a custom endpoint in the backend for your storefront.

Set Up a Medusa project

Before we began, let's quickly set up a project.

Make sure you have these dev tools installed in your system. These are necessary to run the medusa project in your system.
- NodeJs
- Git
- Postgresql
- Redis
Install Medusa CLI

Medusa CLI helps you manage and run your Medusa project easily from the command line. You can install it with npm.

npm install -g @medusajs/medusa-cli

Create a Medusa project

This will generate your medusa backend code with all the required folders to add custom functionalities.

medusa new my-medusa-store --seed

Note: --seed tag pre-populates some data in your database for testing purposes.

Go to project directory

cd my-medusa-store

Start the Medusa engine

Start your medusa server with this command.

medusa develop

The server will now be available at http://localhost:9000
This will be our current backend file structure

.
├── node_modules
├── src
│   ├── api
│   └── services
├── .babelrc.js
├── .gitignore
├── docker-compose.yml
├── Dockerfile
├── medusa-config.js
├── README.md
└── package.json

How to add a custom endpoint to our backend?

Medusa gives you a few endpoints when generating a project with medusa CLI. But you can add your own endpoints if you want. Let’s see how to add a custom endpoint to your storefront.

Start by creating a new index.js file in the src/api directory.

├── src
│   ├── api/
|   |    └── index.js

To create a new endpoint you just need to register a new router. Medusa has a convention to put all the Storefront APIs under the /store prefix. So let's add a /store/myStore route.

import { Router } from "express"

export default () => {
  const router = Router()

  router.get("/store/myStore", (req, res) => {
    res.json({
      message: "Welcome to My Store!"
    })
  });

  return router
}

Now restart the server and send a request to http://localhost:9000/store/myStore, you will receive your response.

In the same way, you can add multiple endpoints to your backend.

There are two ways you can add multiple endpoints.

Add multiple endpoints in a single file.

...
router.get("/store/myStore", (req, res) => {
   res.json({
     message: "Welcome to My Store!"
   })
});

router.get("/store/myStore2", (req, res) => {
   res.json({
     message: "Welcome to My Store 2!"
   })
});
...

Or add different endpoints in different files.

Create a file myStore.js under src/api directory.

// src/api/myStore.js

import { Router } from "express"

export default () => {
  const router = Router()

  router.get("/store/myStore", (req, res) => {
    res.json({
      message: "Welcome to My Store!"
    })
  });
}

Create another file myStore2.js under the same directory src/api.

// src/api/myStore2.js

import { Router } from "express";

export default () => {
  const router = Router()

  router.get("/store/myStore2", (req, res) => {
    res.json({
      message: "Welcome to My Store 2!"
    })
  });
}

Now, in index.js import all the routes and export them as a single router.

import myStoreRoute from "./myStore";
import myStore2Route from "./myStore2";

export default () => {
  const router = Router();

  myStoreRoute(router);
  myStore2Route(router);

  return router;
}

Protected routes

You can also protect your endpoints to select customers by giving access to some routes only when customers logged in. For that, you can use authenticate middleware provided by medusa.

Here’s an example

import authenticate from '@medusajs/medusa/dist/api/middlewares/authenticate';

router.get('/store/products/25345/checkout', authenticate(), (req, res) => {
  
});

Conclusion

That's it! This article shows how easy is to add custom endpoints to your Storefront. For more info, read Medusa's official docs.

Aviyel is a collaborative platform that assists open source project communities in monetizing and long-term sustainability. To know more visit Aviyel and find great blogs and events, just like this one! Sign up now for early access, and don’t forget to follow us on our socials.

How to add a custom endpoint in the backend for Storefront in Medusa?