Tutorial

How to Create a One-Page Swag Store In 15 Minutes Using Medusa.Express

Aug 18, 2022 by

Shahed Nasser

Learn how to quickly create a one-page swag store using Medusa.Express, Stripe, Heroku, and Netlify.

What if you could fit a whole ecommerce experience into just one page?

Some online sellers like to simplify ecommerce experiences, especially when they have only one or a few products to sell. Medusa.Express enables online sellers to sell products through a simple URL-link guiding them to a one-page checkout. You can see the demo here.

In this tutorial, you’ll learn how to set up a one-page swag store with Medusa using Medusa.Express as a frontend. This includes setting up the Medusa server, installing the Medusa admin, and finally installing the Medusa.Express storefront.

Required Stripe Account

Before going through this tutorial, you must have a Stripe development account set up as you’ll need to use API keys to configure both the Medusa server and Medusa.Express storefront.

Make sure that the account is set to test mode.

The 5-Minute Version of this Tutorial

If you’re not interested in following along with this tutorial and want the easy way to directly deploy your one-page swag store, here’s how you can do it in 5 minutes:

Deploy Medusa Server to Heroku

You can deploy the Medusa server to Heroku for free using this link.

You also need to configure the Stripe plugin.

Please keep in mind that to upload products you’ll need to install a file storage plugin. You can use MinIO, S3, or Spaces.

Alternatively, if you just want to test out how everything works first, you can run the following command to add demo products:

heroku run -a <APP_NAME> -- npm run seed

Where

Copy to clipboard
<APP_NAME>

is the name you chose for the Heroku app.

Deploy Medusa Admin to Netlify

You can deploy the Medusa Admin to Netlify for free using this link.

Please keep in mind you must set the

Copy to clipboard
ADMIN_CORS

environment variable on your Heroku server to the URL of the Medusa Admin.

Deploy Medusa.Express to Netlify

You can deploy the Medusa.Express storefront to Netlify for free using this link.

Please keep in mind you must set the

Copy to clipboard
STORE_CORS

environment variable on your Heroku server to the URL of the Medusa.Express storefront.

Test it Out

You can test out your deployment by going to

Copy to clipboard
<MEDUSA_EXPRESS_URL>/<PRODUCT_HANDLE>

, where

Copy to clipboard
<MEDUSA_EXPRESS_URL>

is the URL of your Medusa.Express storefront, and

Copy to clipboard
<PRODUCT_HANDLE>

is the handle of a product you want to test the purchase.

If you’re unsure what the product handle is, you can open the product edit form on the Medusa Admin and see the value in the Handle input field.

For example, if you used the

Copy to clipboard
seed

command, you can open

Copy to clipboard
<MEDUSA_EXPRESS_URL>/t-shirt

and you can go through the full checkout flow.

Prerequisites

If you’re following along with the rest of the tutorial, you’ll need Node.js installed with at least version 14.

Install Medusa Server

In this section, you’ll install the Medusa server locally. This is the server that the Medusa.Express storefront will connect to.

Start by installing the Medusa CLI tool:

npm install @medusajs/medusa-cli -g

Then, run the following command to install the Medusa server:

medusa new swag-store --seed

This installs the Medusa server under the directory

Copy to clipboard
swag-store

. The

Copy to clipboard
--seed

option creates an SQLite database and seeds it with demo data.

Finally, change to the newly created directory and run the server:

cd swag-store
npm start

This runs the Medusa server on

Copy to clipboard
localhost:9000

. You can test that it’s working by going to

Copy to clipboard
localhost:9000/store/products

. You should receive a JSON response with the demo products you’ve seeded into your database.

Configure Stripe Plugin

Copy to clipboard
medusa-config.js

, add the following to the

Copy to clipboard
plugins

array:

const plugins = [
  ...,
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
];

Then, add the following environment variable:

STRIPE_API_KEY=<YOUR_SECRET_KEY>

Where

Copy to clipboard
<YOUR_SECRET_KEY>

is your Stripe’s secret key. You can retrieve it from your Stripe dashboard by going to Developers at the top right, choosing API Keys from the left sidebar, and copying the value of the Secret Key.

Additional Steps

To upload images for your products, you must install a file storage plugin. You can do that using MinIO, S3, or DigitalOcean Spaces.

Install Medusa Admin

In this section, you’ll install the Medusa Admin. The Medusa Admin allows you to manage orders, products, and much more all from an intuitive dashboard.

In your terminal and in a separate directory, run the following command to install the admin:

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

Then, change to the newly created directory

Copy to clipboard
swag-admin

and install the dependencies:

cd swag-admin
npm install

Test Medusa Admin

While the Medusa server is still running, run the following command to start the Medusa admin:

npm start

This runs the Medusa admin on

Copy to clipboard
localhost:7000

by default. If you open it in your browser, you’ll see a login screen.

Enter the email

Copy to clipboard
admin@medusa-test.com

and password

Copy to clipboard
supersecret

to log in. These are the credentials of a demo user that’s available when you seeded the server’s database.

After you log in, click on Products on the left dashboard. You should see the demo products you added, and you should be able to create new products.

Enable Stripe Payment Provider

To ensure that Stripe is available as a payment provider on the Medusa.Express storefront, go to Settings then Choose Regions.

For each region, select the region from the left side, scroll down in the right-side form to the Payment Providers input, and choose Stripe from the list. Then, click Save.

Install Medusa.Express Storefront

The Medusa.Express storefront is available in both Gatsby and Next.js. In this tutorial, you’ll use the Next.js storefront.

In a separate directory than the previous ones, run the following command to install Medusa.Express storefront:

git clone https://github.com/medusajs/medusa-express-nextjs.git swag-storefront

Then, change to the newly created

Copy to clipboard
swag-storefront

directory and install the necessary dependencies:

cd swag-storefront
npm install

Next, rename the

Copy to clipboard
.env.template

file to

Copy to clipboard
.env

mv .env.template .env

And add the following variable to

Copy to clipboard
.env

NEXT_PUBLIC_STRIPE_API_KEY=<YOUR_PUBLISHABLE_KEY>

Where

Copy to clipboard
<YOUR_PUBLISHABLE_KEY>

is your Stripe’s publishable key. You can retrieve it from your Stripe’s dashboard by going to Developers at the top right, choosing API Keys from the left sidebar, and copying the value of Publishable Key.

Test Medusa.Express

While your Medusa server is still running, run the following command to start your Medusa.Express storefront:

npm run dev

This starts your storefront at

Copy to clipboard
localhost:8000

. You can test out the one-page checkout flow by going to

Copy to clipboard
localhost:8000/<PRODUCT_HANDLE>

, where

Copy to clipboard
<PRODUCT_HANDLE>

is the handle of the product you want to test the checkout with.

If you’re unsure of the handle of a product, you can go to the product’s edit form on the Medusa Admin and check out the value in the Handle input.

Since you seeded the database with demo products, you should be able to find a product at

Copy to clipboard
localhost:8000/t-shirt

Choose the size, color, and quantity, then click Continue. In the next step, provide Shipping information. After that, you can use Stripe to purchase the item.

Once you’re done, click Complete order. You’ll see a confirmation message that your order was placed.

If you check your Medusa Admin dashboard, you can see the order and its details.

When to Use Medusa.Express

Medusa.Express is helpful for many cases, here are a few examples;

Shopping on Social Media: When setting up a shop on social media platforms such as Instagram Shopping, or just linking to your products on social media, it’s very helpful to use a platform like Medusa.Express. The customer can use the link to directly make the purchase.
Promotional Purposes on Blogs: Influencers and blog owners that sell swag don’t need to have a full-fledged store. They can link to the items they offer in their posts and have their customers directly make the purchase.
Unique Marketing Strategy: When marketing your store and products, you’ll often find that while your customer does go to your website and might even add the item to the cart, they’ll often leave that cart abandoned and never make the purchase. Medusa.Express encourages customers to make the purchase directly and in a minute.

What’s Next?

After following the previous setup, you’ll need to deploy your Medusa server and admin. You can also deploy the Medusa Express storefront using the button shown earlier in the tutorial or following a similar process to deploying the Gatsby storefront.

After that, you can start using those product links on your social media accounts, blog, and emails, or just send them directly to your customers to make purchases!