How I Created a One-Page Swag Store in 15 minutes

Shahed Nasser - Aug 18 '22 - - Dev Community

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.

Image description

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

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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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
Enter fullscreen mode Exit fullscreen mode

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

medusa new swag-store --seed
Enter fullscreen mode Exit fullscreen mode

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:

cd swag-store
npm start
Enter fullscreen mode Exit fullscreen mode

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

Configure Stripe Plugin

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

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

Then, add the following environment variable:

STRIPE_API_KEY=<YOUR_SECRET_KEY>
Enter fullscreen mode Exit fullscreen mode

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, 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
Enter fullscreen mode Exit fullscreen mode

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

cd swag-admin
npm install
Enter fullscreen mode Exit fullscreen mode

Test Medusa Admin

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

npm start
Enter fullscreen mode Exit fullscreen mode

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

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

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

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
Enter fullscreen mode Exit fullscreen mode

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

cd swag-storefront
npm install
Enter fullscreen mode Exit fullscreen mode

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

mv .env.template .env
Enter fullscreen mode Exit fullscreen mode

And add the following variable to .env:

NEXT_PUBLIC_STRIPE_API_KEY=<YOUR_PUBLISHABLE_KEY>
Enter fullscreen mode Exit fullscreen mode

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:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Order Confirmation

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

Order details page in admin

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 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!

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

Image
Fitting a Cat Flap in a UPVC Door
Image
How Much Does a Cat Flap Cost?
Image
The History Of Modern Freestanding Bioethanol Fireplace In 10 Milestones
Image
Magia Mebli do Sypialni: Stwórz Przestrzeń Marzeń!
Image
14 Savvy Ways To Spend Leftover Asbestos Trust Fund Payouts Budget
Image
10 Reasons Why Good Web Design Is Crucial for Your Website!
Image
15 Gifts For The ADHD Diagnosis Adults Lover In Your Life
Image
The Most Worst Nightmare About Average Payout For Asbestosis Get Real
Image
The 3 Most Significant Disasters In Asbestos Personal Injury Lawsuit History
Image
Navigating Dependency Complexity: Effective Strategies for Software Engineers

dependencycomplexity, softwareengineering
Image
Responsible For The Asbestos Lawsuit Budget? 12 Top Notch Ways To Spend Your Money
Image
7 Little Changes That'll Make A Big Difference With Your Asbestos Litigation
Image
Why No One Cares About Self Propelled All Terrain Wheelchair
Image
10 Bifold Door Replacement-Friendly Habits To Be Healthy
Image
10 Things You've Learned In Kindergarden To Help You Get Started With Bi-Fold Door Repair
Image
A Retrospective The Conversations People Had About How To Get Assessed For ADHD 20 Years Ago
Image
best pet food for overweight dogs dubai
Image
Ten Easy Steps To Launch Your Own Self Propelled Wheelchair Ebay Business
Image
The Three Greatest Moments In Asbestos Lawsuit History
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player