How I Created a One-Page Swag Store in 15 minutes
Tags: opensource, javascript, webdev, programming
Published: 2022-08-18 10:56:15

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](https://www.medusa.express/coffee-mug).

In this tutorial, you’ll learn how to set up a one-page swag store with [Medusa](https://medusajs.com/) using Medusa.Express as a frontend. This includes setting up the Medusa server, installing the Medusa admin, and finally installing the Medusa.Express storefront.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2d7kmn1ypz3tg1cy2uh.gif)

## 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 button:

[![https://www.herokucdn.com/deploy/button.svg](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/medusajs/medusa-starter-default/tree/feat/deploy-heroku)

You also need to [configure the Stripe plugin](https://docs.medusajs.com/add-plugins/stripe#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](https://docs.medusajs.com/add-plugins/minio), [S3](https://docs.medusajs.com/add-plugins/s3), or [Spaces](https://docs.medusajs.com/add-plugins/spaces).

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

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

Where `<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 button:

[![https://www.netlify.com/img/deploy/button.svg](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin)

Please keep in mind you must set the `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 button:

[![https://www.netlify.com/img/deploy/button.svg](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/medusa-express-nextjs)

Please keep in mind you must set the `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 `<MEDUSA_EXPRESS_URL>/<PRODUCT_HANDLE>`, where `<MEDUSA_EXPRESS_URL>` is the URL of your Medusa.Express storefront, and `<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.

![Retrieve product handle from admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf95z2g46jmghfq6dtea.png)

For example, if you used the `seed` command, you can open `<MEDUSA_EXPRESS_URL>/t-shirt` and you can go through the full checkout flow.

![Medusa.Express demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxs69ym2tfrip2oqf6df.png)

## Prerequisites

If you’re following along with the rest of the tutorial, you’ll need [Node.js](https://nodejs.org/en/) 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:

```bash
npm install @medusajs/medusa-cli -g
```

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

```bash
medusa new swag-store --seed
```

This installs the Medusa server under the directory `swag-store`. The `--seed` option creates an SQLite database and seeds it with demo data.

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

```bash
cd swag-store
npm start
```

This runs the Medusa server on `localhost:9000`. You can test that it’s working by going to `localhost:9000/store/products`. You should receive a JSON response with the demo products you’ve seeded into your database.


![Example of retrieve products response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggvvz34r5qm7nk2dpfm5.png)

### Configure Stripe Plugin

In `medusa-config.js`, add the following to the `plugins` array:

```jsx
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:

```bash
STRIPE_API_KEY=<YOUR_SECRET_KEY>
```

Where `<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](https://docs.medusajs.com/add-plugins/minio), [S3](https://docs.medusajs.com/add-plugins/s3), or [DigitalOcean Spaces](https://docs.medusajs.com/add-plugins/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:

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

Then, change to the newly created directory `swag-admin` and install the dependencies:

```bash
cd swag-admin
npm install
```

### Test Medusa Admin

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

```bash
npm start
```

This runs the Medusa admin on `localhost:7000` by default. If you open it in your browser, you’ll see a login screen.

![Log in to admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lll3acxxwdjjt1d2iix9.png)

Enter the email `admin@medusa-test.com` and password `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.


![Products listing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dtdhv8e13kd2wvn4pzt.png)

### 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.


![Enable Stripe in all regions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ztl9a9ofyhvnwe28bgu.png)

## Install Medusa.Express Storefront

The Medusa.Express storefront is available in both [Gatsby](https://github.com/medusajs/medusa-express-gatsby) and [Next.js](https://github.com/medusajs/medusa-express-nextjs). 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:

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

Then, change to the newly created `swag-storefront` directory and install the necessary dependencies:

```bash
cd swag-storefront
npm install
```

Next, rename the `.env.template` file to `.env`:

```bash
mv .env.template .env
```

And add the following variable to `.env`:

```bash
NEXT_PUBLIC_STRIPE_API_KEY=<YOUR_PUBLISHABLE_KEY>
```

Where `<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:

```bash
npm run dev
```

This starts your storefront at `localhost:8000`. You can test out the one-page checkout flow by going to `localhost:8000/<PRODUCT_HANDLE>`, where `<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.

![Get product handle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo4ednv70v8jgdklkjyb.png)

Since you seeded the database with demo products, you should be able to find a product at `localhost:8000/t-shirt`.

![A product's page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xxhnwesqtnb0v16jsfo.png)

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.

![Use Stripe for Payment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwkghgfw2ljgch8qcpi5.png)

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

![Order Confirmation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69b3rmh66m643i002kz5.png)

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

![Order details page in admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7mrtt8robf9cplclg3z.png)

## When to Use Medusa.Express

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

1. **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.
2. **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.
3. **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](https://docs.medusajs.com/deployments/server/) and [admin](https://docs.medusajs.com/deployments/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](https://docs.medusajs.com/deployments/admin/deploying-on-netlify).

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!

> Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via [Discord](https://discord.gg/F87eGuwkTp).