How to Use a Monorepo to Deploy Your Gatsby Ecommerce Storefront and Admin

Introduction

A Monorepo is a codebase that incorporates a number of tasks, usually utilizing a number of and completely different frameworks however unified in a single repository.

Medusa is an open supply headless commerce that lets you construct an ecommerce platform by its API with just some instructions in a brief period of time. Along with its core that holds all extensive ecommerce features, Medusa additionally has ready-made Gatsby storefront and admin web sites that you should utilize to amplify your ecommerce enterprise.

By default, the storefront, admin, and Medusa server are all distributed as separate tasks. This separation offers builders the liberty to form their ecommerce stack as they see match to their use case. Nevertheless, it’s simpler to handle the completely different elements that form your ecommerce stack from one repository somewhat than completely different ones.

On this tutorial, you’ll learn to arrange and deploy the whole thing of the frontend of your ecommerce stack in a monorepo with two tasks, one for the admin panel and the opposite for the storefront.

Stipulations

To comply with together with this tutorial you want the next:

The server must have its API able to be consumed over HTTPS. It is because when you deploy your apps to Vercel, they are going to have by default a website with an SSL certificates. For those who attempt to make requests from them to a server with out an SSL certificates, then you’ll get a mixed-content warning in your browser and also you gained’t be capable of fetch information from the API.

• A GitHub account and a newly created repository to be the monorepo.
• A Vercel account.
• Optionally you may set up and use Yarn to comply with together with this tutorial. You’ll nonetheless be capable of comply with together with this tutorial in case you want utilizing NPM.

Set Up a Monorepo

Step one is to create the Monorepo that can maintain the storefront and admin.

Open your terminal and run the next command:

mkdir medusa-monorepo && cd medusa-monorepo && git init

With this command you’re doing three issues:

1. Creating a brand new folder for the monorepo, which is known as medusa-monorepo.
2. Change to the monorepo listing.
3. Initialize a git repository to have a management model system.

Add Admin Web site to The Monorepo

The primary venture you’ll add to the monorepo is the admin. Medusa offers an intuitively designed admin panel that features all options to handle your ecommerce retailer.

So as to add Medusa’s Admin to the monorepo, contained in the medusa-monorepo folder run the next command:

git clone https://github.com/medusajs/admin admin

This can clone the admin’s GitHub repository inside your monorepo into a brand new listing referred to as admin.

Ensure there isn’t any .git folder inside medusa-monorepo/admin. If not, the admin venture shall be a sub-module of the monorepo somewhat than managed by the monorepo itself.

The following step is to put in the dependencies for the admin app. Run the next command to vary to the admin listing and set up the dependencies:

cd admin
yarn set up

Let’s check the admin app regionally. For that, it is advisable to have a neighborhood Medusa server put in and working. Then, run the next command contained in the admin folder:

yarn develop 

You’ll be able to view the admin within the browser by going to the URL http://localhost:7000.

For those who get a CORS error, please examine this guide to resolve it.

Add Storefront Web site to the Monorepo

Medusa offers nice flexibility in your selection of the storefront. You should utilize one of many ready-made starters, or you may create a storefront utilizing a framework of your selection from scratch.

On this tutorial, you’ll be utilizing Medusa’s Gatsby starter on your ecommerce storefront.

So as to add the Gatsby Storefront to the monorepo, clone the repository contained in the medusa-monorepo listing with the next command:

git clone https://github.com/medusajs/gatsby-starter-medusa.git storefront

This can create a brand new listing storefront inside medusa-monorepo which can maintain the code on your storefront.

As defined earlier, ensure that there’s no .git folder contained in the medusa-monorepo/storefront folder. If there’s a .git folder then delete it.

The following step is to put in the dependencies of the storefront app. Use the next command to vary to the storefront listing and set up the dependencies:

cd storefront
yarn set up

Let’s check the storefront regionally. You additionally want a Medusa server put in and working regionally first.

Then, run the next command contained in the storefront folder:

yarn develop 

You’ll be able to examine the storefront in your browser by going to localhost:8000.

For those who get a CORS error, please examine this guide to resolve it.

Push Adjustments to the Monorepo

Now that each the storefront and the admin are working regionally, the final step earlier than deploying them is pushing the modifications to the monorepo you created in your GitHub account.

Deploy to Vercel

One of many benefits of utilizing Vercel for deployment is that it lets you deploy a number of apps individually from a monorepo. Moreover, you get out-of-the-box CI/CD. So, each time you push new commits to GitHub, Vercel will set off a brand new deployment with these modifications and your apps shall be up to date.

Log in along with your Vercel account and go to your dashboard. Right here you’ll create two tasks, one for the admin app and one other for the storefront app.

Deploy the Admin Web site

First, you’ll create the admin venture. Click on on the New Undertaking button and you may be redirected to the brand new venture display screen. Then, it is advisable to import your repository from GitHub. For those who don’t have your GitHub account already linked to Vercel, click on on Add GitHub Account and provides the mandatory permissions to Vercel so it may well learn your repositories.

As soon as Vercel can entry your monorepo it is best to be capable of import it. Click on on Import.

On the subsequent web page, you’ll be requested to configure the venture:

• Give a reputation to your venture. For instance, medusa-admin.
• For the Framework Preset select Gatsby.js.
• For the foundation listing, click on on edit and a popup shall be proven with the folder construction of the monorepo. Select the admin folder and click on on proceed.

• Lastly, open Setting Variables and add an setting variable with the URL of your Medusa server:

GATSBY_MEDUSA_BACKEND_URL=<YOUR_MEDUSA_SERVER_URL>

Your configuration setup ought to appear to be this:

When you’re achieved, click on on Deploy. The deployment may take some time as Vercel will set up all of the dependencies, run the construct command, and eventually assign a brand new random area on your app with an SSL certificates included.

As soon as your app is deployed you may be redirected to the overview web page of the venture you simply created on your admin app. There, you could find the URL of your admin.

Copy the admin’s URL and go to your Medusa server. That you must add or change the CORS setting variable to permit your admin app to devour the API of your Medusa server:

ADMIN_CORS=<YOUR_ADMIN_URL>

As soon as the modifications are saved and mirrored on the Medusa server, you may go to the admin panel URL and it is best to see the login web page.

Attempt to log in along with your admin consumer credentials and you need to be redirected to your admin dashboard.

For those who seeded your server with dummy information on set up, you should utilize the e-mail admin@medusa-test.com and password supersecret.

Deploy Storefront Web site

The method to deploy the storefront app is a bit completely different than the Admin. It is because the storefront is configured to render as a static site generator (SSG). To do this, the storefront must make some requests to the Medusa server throughout construct time. Because the area identify for the storefront continues to be not arrange or added as an setting variable on the Medusa server at this level, a CORS error shall be thrown throughout construct time.

So, you’ll first create a venture with basic configurations and, if you receive the URL of your storefront, replace these configurations to one thing extra particular and redeploy your app.

In your Vercel dashboard, click on on the New Undertaking button and you may be redirected to the brand new venture display screen. On that web page, click on on the Import button of the identical medusa-monorepo repository.

For the venture configurations:

• That you must give a reputation to the venture, on this case, it will likely be medusa-storefront.
• For Framework preset select Different. In a while, you’ll replace this setting to Gatsby.js.
• Open Setting Variables and add the next setting variable with the URL of your Medusa server as its worth:

GATSBY_MEDUSA_BACKEND_URL=<YOUR_MEDUSA_SERVER_URL>

At this level, you don’t have to decide on any listing since you solely want an app deployed on Vercel to get the storefront URL, as defined at the beginning of this part.

The configuration ought to be one thing like this:

When you’re achieved, click on on Deploy. Vercel will begin a brand new deployment, however on this case, it is not going to set up or construct something, and ultimately, it can assign a random URL to the newly created app.

When the deployment is completed, you’ll get a congratulations display screen, click on on Go to Dashboard.

In your venture’s dashboard, you may see the information associated to the deployment. Copy the URL of your storefront.

Then, go to your Medusa server once more and alter or add the setting variable STORE_CORS so the storefront could make requests to it with out CORS errors:

STORE_CORS=<YOUR_STOREFRONT_URL>

When you’ve saved the brand new setting variable and the change is mirrored in your server, the subsequent factor to do is replace the configurations of the storefront venture with configurations particular to it.

In your venture’s dashboard, go to the Settings tab

Within the Construct & Growth Settings part, change the Framework preset to Gatsby.js and click on on Save.

Within the Root listing part, change the worth to storefront. That is the trail of the storefront within the monorepo. Then, click on on Save.

Your settings ought to look one thing like this:

The final step is to set off a brand new deployment with the brand new configurations. Go to the Deployments tab

It’s best to then see a beforehand completed deployment. Click on on the three dots on the proper aspect of that deployment and click on on Redeploy.

A brand new deployment will begin. This time Vercel will change to the storefront listing, set up the dependencies, and construct the app. As soon as the brand new deployment is accomplished, you will note the overview display screen.

Now you may go to your app’s URL and it is best to see the newly deployed storefront app with the merchandise and information out of your Medusa server.

Take a look at Deployed Apps

To check each apps, you may strive to enroll as a brand new consumer on the storefront app:

Then, go to your admin dashboard and it is best to see your newly created consumer.

To check the CI/CD you may return to your monorepo code and make some modifications, then commit and push them to GitHub, Vercel will detect there’s a new commit in your monorepo and it’ll begin a brand new deployment for all of your apps.

Conclusion

Medusa’s versatile structure makes it straightforward to deploy completely different elements of your ecommerce stack individually or collectively.

By utilizing a monorepo, you may make the most of options from internet hosting platforms like Vercel corresponding to out-of-the-box CI/CD and a safe area to go to your apps.

Going ahead, you may deal with creating or including new functionalities on your ecommerce retailer together with:

1. Arrange Stripe as a cost methodology utilizing the Stripe Plugin.
2. Add a product search engine to your storefront utilizing the Algolia plugin to enhance your buyer’s expertise.
3. Add an e mail notifications system utilizing the SendGrid plugin to ship emails to your prospects and admin customers.

When you have any points or questions associated to Medusa, be happy to succeed in out to the Medusa crew by way of Discord.