Forem: Mark Munyaka

Build a Landing Page using Strapi and Vanilla HTML

Mark Munyaka — Thu, 03 Jul 2025 12:31:20 +0000

This tutorial shows you how to build a professional landing page with HTML, CSS, and JavaScript, connected to a Strapi backend for contact form submissions. You'll deploy the frontend to Cloudflare Pages and the backend to Strapi Cloud.

Prerequisites

Node.js (LTS v20 or v22) installed on your local machine.
GitHub/GitLab/Google Account to create a Strapi Cloud Account

Create a Strapi project locally

Open your working directory in a terminal and run the following command to create a Strapi project:

npx create-strapi-app@latest backend

Answer the prompts as follows:

- Ok to proceed? y

When prompted, select Login/Sign up, then copy the redirect URL and open it in your browser.

Ensure the confirmation code in your browser matches the one in your terminal, then click Confirm. Complete the login process, then return to your terminal.

Continue with the following responses:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? No
? Start with Typescript? No
? Install dependencies with npm? Yes
? Initialize a git repository? No

Change into the new Strapi project directory named backend:

cd backend

Register an Admin User

Start your Strapi server.

npm run develop

Visit localhost:1337/admin in your browser and create an admin user.

After logging in, you’ll see the dashboard.

Create a `Contact` collection type

Click Content-Type Builder and create a new collection called Contact.

Click + Add new field and add the following fields to your Contact collection:

Name: text field(short)
Email: email field
Message: text field(long)

Click Save and wait for your Strapi server to restart.

Deploy to Strapi Cloud

Deploy your project for free to Strapi Cloud. First stop your Strapi server by pressing CTRL + C keyboard combo.

Run the following command in your Strapi project folder, backend:

npm run strapi deploy

Give your project a name, choose a NodeJS version and select the region closest to you.

? How would you like to name your project? biz-landing
? Choose your NodeJS version 22 (recommended)
? Choose a region for your project United States (East)

Once your project is deployed you will receive a clickable link that starts with https://cloud.strapi.io/projects. Copy the link and visit it in your browser.

You will see the Strapi Cloud project we have just created, biz-landing in the Strapi Cloud Dashboard.

Click the project link to access the Strapi Cloud project page.

Click the Visit app button in the top right corner to access your deployed Strapi project.

Add API Permissions

Register an admin user then log in to the admin panel of your new Strapi cloud hosted instance. In the new page that opens, complete the form to create the first administrator user of this Strapi Cloud project.

Visit the Settings page then select Roles under Users & Permissions Plugin.

Select Public role. Click Permissions tab and select Contact.

Enable the create permission for your Contact collection.

Click Save.

Test the API

In your terminal run the following command to create a new Contact

curl -X POST \
  https://your-strapi-cloud-url.com/api/contacts \
  -H "Content-Type: application/json" \
  -d '{
    "data": {
      "Name": "John Doe",
      "Email": "john@example.com",
      "Message": "This is a test message"
    }
  }'

Replace https://your-strapi-cloud-url.com with your own Strapi Cloud project URL.

You should see a JSON response similar to this:

{
    "data": {
        "id": 1,
        "documentId": "ghn77cyweudup0o1wtpcr8ku",
        "Name": "John Doe",
        "Email": "john@example.com",
        "Message": "This is a test message",
        "createdAt": "2025-07-03T08:42:44.306Z",
        "updatedAt": "2025-07-03T08:42:44.306Z",
        "publishedAt": "2025-07-03T08:42:44.289Z"
    },
    "meta": {}
}

Verify that the contact was saved by checking your Strapi Admin Panel. Visit the Content Manager section and click Collection types then Contacts then view the entries.

Create Contact Form

In your local machine, open your terminal and navigate one directory above your Strapi project folder:

cd ..

Create a new folder called frontend to store your landing page files.

mkdir frontend

Open up the frontend folder in your terminal.

cd frontend

Add an index.html file to your frontend folder.

touch index.html

Add the following code to your index.html file:

<form class="contact-form" id="contactForm">
  <input type="text" id="name" name="name" placeholder="Your Name" required>
  <input type="email" id="email" name="email" placeholder="Your Email" required>
  <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
  <button type="submit">Send Message</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', async function(e) {
  e.preventDefault();

  const formData = {
    data: {
      Name: document.getElementById('name').value,
      Email: document.getElementById('email').value,
      Message: document.getElementById('message').value
    }
  };

  try {
    const response = await fetch('https://your-strapi-cloud-url.com/api/contacts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    });

    if (response.ok) {
      alert('Message sent successfully!');
      document.getElementById('contactForm').reset();
    } else {
      alert('Error sending message. Please try again.');
    }
  } catch (error) {
    alert('Error sending message. Please try again.');
  }
});
</script>

This Contact form will send form data to your Strapi API upon submission. Remember to replace https://your-strapi-cloud-url.com with your actual Strapi Cloud URL.

Open the page in your browser and test the form to see if it submits a contact

Deploy Contact Form to Cloudflare Pages

Install Wrangler CLI:

npm install -g wrangler

Authenticate with Cloudflare:

wrangler login

Make sure you are inside the frontend folder and run this to deploy to Cloudflare Pages:

wrangler pages deploy . --project-name=biz-landing

After deployment, you will receive a Cloudflare Pages URL for your project, visit it in your browser.

Test the form to see if it submits a contact.

Of course you can verify the entry in your Strapi Admin as well

Create Full Landing Page

The contact form works, next create the full landing page.

We've built a sample business landing property development website for "Landho" a fictional company that includes:

Responsive design with mobile navigation
Hero section and 6 key services (Residential, Commercial, Project Management, Investment, Land Acquisition, Consulting)
About section, functional contact form with Strapi API integration, and Google Maps

The website is designed as an example to convert visitors into leads through the strategically placed contact form that automatically sends inquiries to your Strapi backend for processing.

Update your index.html file with the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landho - Property Developers</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: white;
            color: black;
        }

        .navbar {
            background-color: black;
            padding: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            height: 60px;
        }

        .logo {
            color: white;
            font-size: 24px;
            font-weight: normal;
            text-decoration: none;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            align-items: center;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            color: white;
            text-decoration: none;
            padding: 20px 18px;
            display: block;
            font-size: 16px;
            font-weight: normal;
        }

        .nav-link.active {
            background-color: white;
            color: black;
        }

        .menu-toggle {
            background: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            padding: 10px;
            font-family: Arial, sans-serif;
        }

        .dropdown-menu {
            position: absolute;
            top: 60px;
            right: 20px;
            background-color: black;
            min-width: 200px;
            display: none;
        }

        .dropdown-menu.active {
            display: block;
        }

        .dropdown-item {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
            font-size: 16px;
            font-weight: normal;
        }

        .dropdown-item.active {
            background-color: white;
            color: black;
        }

        .content {
            margin-top: 60px;
        }

        .hero {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .hero-image {
            width: 100%;
            height: 400px;
            background-color: black;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-text h1 {
            font-size: 48px;
            color: black;
            margin-bottom: 20px;
            font-weight: normal;
        }

        .hero-text p {
            font-size: 18px;
            color: black;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .hero-cta {
            background-color: black;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            font-size: 16px;
            display: inline-block;
        }

        .services-section {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .services-section h2 {
            font-size: 36px;
            color: black;
            margin-bottom: 40px;
            font-weight: normal;
            text-align: center;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .service-card {
            background-color: white;
            text-align: center;
        }

        .service-image {
            width: 100%;
            height: 200px;
            background-color: black;
            margin-bottom: 15px;
        }

        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .service-name {
            font-size: 18px;
            color: black;
            margin-bottom: 10px;
            font-weight: normal;
        }

        .service-description {
            font-size: 14px;
            color: black;
            margin-bottom: 15px;
            font-weight: normal;
            line-height: 1.4;
        }

        .service-cta {
            background-color: black;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            font-size: 16px;
            display: inline-block;
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .hero {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .hero-text h1 {
                font-size: 36px;
            }

            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }
        }

        @media (min-width: 769px) {
            .dropdown-menu {
                right: 100px;
            }
        }

        .about-section {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-section h2 {
            font-size: 36px;
            color: black;
            margin-bottom: 40px;
            font-weight: normal;
            text-align: center;
        }

        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .about-text h3 {
            font-size: 24px;
            color: black;
            margin-bottom: 20px;
            font-weight: normal;
        }

        .about-text p {
            font-size: 16px;
            color: black;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .about-image {
            width: 100%;
            height: 400px;
            background-color: black;
        }

        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .contact-section {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .contact-section h2 {
            font-size: 36px;
            color: black;
            margin-bottom: 40px;
            font-weight: normal;
            text-align: center;
        }

        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .contact-form input,
        .contact-form textarea {
            padding: 15px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            background-color: white;
            color: black;
            border: 1px solid black;
        }

        .contact-form button {
            padding: 15px;
            font-size: 16px;
            font-family: Arial, sans-serif;
            background-color: black;
            color: white;
            cursor: pointer;
        }

        .map-container {
            width: 100%;
            height: 200px;
            margin-bottom: 20px;
        }

        .contact-details h3 {
            font-size: 20px;
            color: black;
            margin-bottom: 15px;
            font-weight: normal;
        }

        .contact-details p {
            font-size: 16px;
            color: black;
            margin-bottom: 8px;
        }

        .footer {
            background-color: black;
            padding: 30px 20px;
            text-align: center;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-content p {
            color: white;
            font-size: 16px;
            font-weight: normal;
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .hero {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .hero-text h1 {
                font-size: 36px;
            }

            .services-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 20px;
            }

            .about-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .contact-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }
    </style>

</head>

<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">Landho</a>

            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Properties</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>

            <button class="menu-toggle">Menu</button>

            <div class="dropdown-menu">
                <a href="#" class="dropdown-item active">Home</a>
                <a href="#" class="dropdown-item">Services</a>
                <a href="#" class="dropdown-item">Properties</a>
                <a href="#" class="dropdown-item">Contact</a>
            </div>
        </div>
    </nav>

    <div class="content">
        <section class="hero">
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600&h=400&fit=crop"
                    alt="Modern property development">
            </div>
            <div class="hero-text">
                <h1>Premium Property Development Solutions</h1>
                <p>Landho is your trusted partner for exceptional property development projects. From residential estates to commercial complexes, we deliver innovative solutions that exceed expectations. Whether you're looking to invest or develop, we have the expertise to bring your vision to life.</p>
                <a href="#" class="hero-cta">View Projects</a>
            </div>
        </section>

        <section class="services-section">
            <h2>Our Services</h2>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=280&h=200&fit=crop"
                            alt="Residential Development">
                    </div>
                    <div class="service-name">Residential Development</div>
                    <div class="service-description">Complete residential development services from planning to completion</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=280&h=200&fit=crop"
                            alt="Commercial Development">
                    </div>
                    <div class="service-name">Commercial Development</div>
                    <div class="service-description">Modern office buildings and retail spaces designed for success</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=280&h=200&fit=crop"
                            alt="Project Management">
                    </div>
                    <div class="service-name">Project Management</div>
                    <div class="service-description">End-to-end project management ensuring timely and quality delivery</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=280&h=200&fit=crop"
                            alt="Property Investment">
                    </div>
                    <div class="service-name">Property Investment</div>
                    <div class="service-description">Strategic investment opportunities in prime locations</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?w=280&h=200&fit=crop"
                            alt="Land Acquisition">
                    </div>
                    <div class="service-name">Land Acquisition</div>
                    <div class="service-description">Expert guidance in identifying and acquiring prime development land</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>

                <div class="service-card">
                    <div class="service-image">
                        <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=280&h=200&fit=crop"
                            alt="Consulting Services">
                    </div>
                    <div class="service-name">Consulting Services</div>
                    <div class="service-description">Professional consulting for property development and investment decisions</div>
                    <a href="#" class="service-cta">Learn More</a>
                </div>
            </div>
        </section>

        <section class="about-section">
            <h2>About Us</h2>
            <div class="about-content">
                <div class="about-text">
                    <h3>Over 25 Years of Property Development Excellence</h3>
                    <p>Landho has been transforming landscapes and communities since 1998, delivering exceptional property development projects across the region. Our commitment to innovation, quality, and sustainable development has made us the preferred choice for investors and homeowners alike.</p>
                    <p>We specialize in creating comprehensive property solutions that meet the evolving needs of modern living and business. Our experienced team combines architectural expertise with market insight to deliver projects that stand the test of time.</p>
                    <p>From luxury residential estates to cutting-edge commercial developments, Landho is your trusted partner in creating spaces that inspire and endure. Discover why we are the leading property development company in the region.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?w=600&h=400&fit=crop" alt="Property development team">
                </div>
            </div>
        </section>

        <section class="contact-section">
            <h2>Contact Us</h2>
            <div class="contact-content">
                <div class="contact-form-container">
                    <form class="contact-form" id="contactForm">
                        <input type="text" id="name" name="name" placeholder="Your Name" required>
                        <input type="email" id="email" name="email" placeholder="Your Email" required>
                        <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>
                        <button type="submit">Send Message</button>
                    </form>
                </div>
                <div class="contact-info-container">
                    <div class="map-container">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.4037!2d28.3473!3d-15.3875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTXCsDIzJzE1LjAiUyAyOMKwMjAnNTAuMyJF!5e0!3m2!1sen!2szm!4v1625000000000!5m2!1sen!2szm" width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                    <div class="contact-details">
                        <h3>Visit Our Office</h3>
                        <p>123 Main Street</p>
                        <p>Lusaka, Zambia</p>
                        <p>Phone: +260 123 456 789</p>
                        <p>Email: info@landho.com</p>
                        <p>Hours: Mon-Fri 8AM-5PM</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <p>© 2025 Landho Property Developers. All rights reserved.</p>
        </div>
    </footer>

    <script>
        const menuToggle = document.querySelector('.menu-toggle');
        const dropdownMenu = document.querySelector('.dropdown-menu');

        menuToggle.addEventListener('click', () => {
            dropdownMenu.classList.toggle('active');
        });

        document.addEventListener('click', (e) => {
            if (!menuToggle.contains(e.target) && !dropdownMenu.contains(e.target)) {
                dropdownMenu.classList.remove('active');
            }
        });

        document.querySelectorAll('.nav-link, .dropdown-item').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();

                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                document.querySelectorAll('.dropdown-item').forEach(l => l.classList.remove('active'));

                const linkText = link.textContent;
                document.querySelectorAll('.nav-link, .dropdown-item').forEach(l => {
                    if (l.textContent === linkText) {
                        l.classList.add('active');
                    }
                });

                dropdownMenu.classList.remove('active');
            });
        });

        // Contact form functionality
        document.getElementById('contactForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = {
                data: {
                    Name: document.getElementById('name').value,
                    Email: document.getElementById('email').value,
                    Message: document.getElementById('message').value
                }
            };

            try {
                const response = await fetch('https://your-strapi-cloud-url.com/api/contacts', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    alert('Message sent successfully! We will get back to you soon.');
                    document.getElementById('contactForm').reset();
                } else {
                    alert('Error sending message. Please try again or contact us directly.');
                }
            } catch (error) {
                alert('Error sending message. Please try again or contact us directly.');
            }
        });
    </script>
</body>
</html>

View it in your browser and test the contact form again if you wish.

Deploy Full Landing Page

Deploy it to Cloudflare Pages

wrangler pages deploy . --project-name=biz-landing

Visit the your Cloudflare Pages URL to view your updated landing page and confirm that the contact form still works.

Conclusion

You've built a complete landing page with Strapi backend and deployed it to Cloudflare Pages. The contact form automatically saves submissions to your Strapi Cloud database, giving you a professional lead capture system ready for production use.

GitHub Repo for Article Source Code

How to self-host Strapi on Railway

Mark Munyaka — Sun, 19 Jan 2025 05:46:48 +0000

Self-hosting Strapi on Railway is an efficient and cost-effective way to deploy and manage your Strapi-powered projects. Strapi, an open-source headless CMS, provides developers with a flexible platform to build and customize APIs, while Railway simplifies the deployment process with its robust and developer-friendly infrastructure.

In this guide, you'll learn how to set up Strapi locally, prepare your project for deployment, and host it on Railway using two methods: the Railway CLI and GitHub integration. By following this tutorial, you'll have a fully operational Strapi app running online, ready to serve content and expose APIs to your applications.

Whether you're new to Strapi or an experienced developer looking to optimize your deployment workflow, this guide provides clear and actionable steps to achieve your goals. Let’s dive in!

Pre-requisites

Node.js installed on your dev machine. (v18 or v20)Download and install Node.js using this link
GitHub Account. Create GitHub account here
GitHub CLIDownload and Install GitHub CLI here
Railway Account. Sign up for Railway here
Railway CLI. Download and Install Railway CLI here

Hello, Strapi

Open up your working directory and create a new Strapi project named hello.

npx create-strapi-app@latest hello --quickstart --no-run

Generate an admin user for your project.

cd hello

npm run strapi admin:create-user -- --firstname=Kai --lastname=Doe --email=chef@strapi.io --password=Gourmet1234

Run your Strapi app.

npm run develop

Visit http://localhost:1337/admin in your browser to login.

Create a new collection type name it Global. Add a single text field named text.

Click on Content-Type Builder > Create new collection type in the navigation.

Add a new entry to the Global collection. Give it the value, "Hello Strapi".

Go to Content Manager > Collection types - Global in the navigation.
Click on Create new entry.

Enable Public Read access to your Global collection API. Click on Settings > Users & Permissions Plugin > Roles > Public > Permissions.

In your terminal test out the API by running the following command:

curl localhost:1337/api/globals

You should see the following JSON response:

{
    "data": [
        {
            "id": 2,
            "documentId": "cnuj5blzet9zbtyv3311rpjp",
            "text": "Hello Strapi",
            "createdAt": "2025-01-18T07:22:01.233Z",
            "updatedAt": "2025-01-18T07:22:01.233Z",
            "publishedAt": "2025-01-18T07:22:01.241Z"
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 1
        }
    }
}

Deploy to Railway using CLI

Railway offers many ways to deploy your web app. You can use the dashboard, the CLI, the API etc. This article: Railway Deployment Options explains all the numerous ways you can deploy an app on the Railway platform.

In this step, we will use the Railway CLI. If you prefer using the dashboard skip to the next section.

Stop your Strapi server using CTRL + C.

In your terminal, install the Railway CLI tool:

curl -fsSL https://railway.com/install.sh | sh

railway login --browserless

Create a new Railway project:

railway init

Link your Strapi project folder to your Railway project:

railway link

Deploy your Strapi app.

railway up --detach

The deployment will fail, as you will need to update your Railway project with the necessary environment variables.
The following variables need to be added to your Strapi project in Railway: HOST, PORT, APP_KEYS, API_TOKEN_SALT, ADMIN_JWT_SECRET, TRANSFER_TOKEN_SALT, DATABASE_CLIENT, DATABASE_FILENAME, DATABASE_SSL and JWT_SECRET.

Copy the values from your .env file:

HOST=0.0.0.0
PORT=1337
APP_KEYS=/M/DMAN536wRHe+Vf9K2Cg==,uogMfTxg3jJvNfctla2xAw==,ne6731wcSzH2tQ6dgDiEYQ==,srycFvmx8KTrsq6N60C8DA==
API_TOKEN_SALT=XJtQnpUf8OEXL7b7LBWunQ==
ADMIN_JWT_SECRET=+DSzXmSsQOsS0V6O0npL2g==
TRANSFER_TOKEN_SALT=fceG+mK0nhBh7c8AbX1HAw==
DATABASE_CLIENT=sqlite
DATABASE_SSL=false
DATABASE_FILENAME=.tmp/data.db
JWT_SECRET=Ppx1F1bpyYnjumiGIJSk3g==

Select Variables in your Railway dashboard to update your project with the required environment variables.

After updating the environment variables, redeploy your Strapi app.

railway up

When the Strapi app deployment is ready, generate a domain.

railway domain

Test Strapi API hosted on Railway

Test out your Railway-hosted Strapi API in your terminal. Run the following command:

curl <your-railway-project-url>/api/globals

Replace <your-railway-project-url> with the URL generated by Railway. You should get the same response as you did when you tested the project locally.

In your browser visit <your-railway-project-url>/admin to login to your project.

Deploy to Railway using GitHub

We will use the GitHub and the Railway dashboard for this option.

Turn Strapi project into GitHub repo

Before you deploy the project to Railway, you must turn it into a GitHub repo.

Stop your Strapi server using CTRL + C.

Initialize your project directory as a Git repo.

git init

Comment out or delete the text .tmp in your .gitignore file so that source control includes the SQLite database for your Strapi app.

Commit your project files.

git add .

git commit -m "Initial commit"

Authenticate with GitHub

gh auth login

Upload your repo to GitHub

gh repo create hello --public --source=. --remote=origin

git push --set-upstream origin master

Replace hello with your desired repo name.

Create a new Railway project

Visit https://dev.new in your browser. This will redirect you to https://railway.com/new and you will see a New Project modal with deployment options.

Select Deploy from GitHub repo and choose the repo you created previously.

The Railway platform will read the contents of your repo, initialize the project, build and then deploy it automatically as a service. The deployment will fail as a few settings need to be done in your Railway project.

Add Variables

The following variables need to be added to your Strapi project in Railway: HOST, PORT, APP_KEYS, API_TOKEN_SALT, ADMIN_JWT_SECRET, TRANSFER_TOKEN_SALT, DATABASE_CLIENT, DATABASE_FILENAME, DATABASE_SSL and JWT_SECRET.

Use the following values:

HOST=0.0.0.0
PORT=1337
APP_KEYS=/M/DMAN536wRHe+Vf9K2Cg==,uogMfTxg3jJvNfctla2xAw==,ne6731wcSzH2tQ6dgDiEYQ==,srycFvmx8KTrsq6N60C8DA==
API_TOKEN_SALT=XJtQnpUf8OEXL7b7LBWunQ==
ADMIN_JWT_SECRET=+DSzXmSsQOsS0V6O0npL2g==
TRANSFER_TOKEN_SALT=fceG+mK0nhBh7c8AbX1HAw==
DATABASE_CLIENT=sqlite
DATABASE_SSL=false
DATABASE_FILENAME=.tmp/data.db
JWT_SECRET=Ppx1F1bpyYnjumiGIJSk3g==

Select Variables in your Railway dashboard to update your project with the required environment variables.

After updating the variables you can deploy your Strapi project. The build will be successful.

Generate a Domain for your project

Select Settings inside your Railway project's service. Under Networking click Generate Domain. This allows you to access your service on the internet.

Railway will generate a domain name for your app. The URL will appear a few seconds after clicking Generate Domain. You will use this URL to access your Strapi API on the internet.

Test Strapi API hosted on Railway

Test out your Railway-hosted Strapi API in your terminal. Run the following command:

curl <your-railway-project-url>/api/globals

Replace <your-railway-project-url> with the URL generated by Railway. You should get the same response as you did when you tested the project locally.

In your browser visit <your-railway-project-url>/admin to login to your project.

Conclusion

Self-hosting Strapi on Railway is a straightforward and efficient way to deploy your project and make it accessible online. By leveraging Railway's tools and services, you can simplify the deployment process, manage your environment variables, and scale your application as needed. Whether you prefer using the CLI or GitHub for deployment, this guide equips you with the knowledge to set up a robust and flexible Strapi instance.

Now that your Strapi app is live, you can focus on building and delivering exceptional content and APIs to power your applications. Happy coding! For more advanced configurations or scaling needs, refer to the Railway Documentation or the Strapi Documentation. Happy coding!

Resources

Here are the resources mentioned in this guide to help you get started and explore further:

These references provide the tools and documentation needed to set up, deploy, and manage your Strapi application effectively.

Getting Started with Go and the Web: Deploy to Railway

Mark Munyaka — Mon, 30 Dec 2024 20:58:22 +0000

Getting Started with Go and the Web: Deploy to Railway

This guide aims to show you how to build a web app using Go. You will create and test a simple web server built using Go on your local machine then deploy your web app to Railway.

Railway is a hosting service you can use to deploy your apps. It supports all sorts of deployment configs and has a plethora of features to customize the hosting set up for your app.

Before We Start

To follow along with the guide, you must have Go installed on your machine. Download and install Go here: Download and Install Go.

Git and the GitHub CLI should be installed on your machine. Download and install Git from here: Downloads - Git. Download and install the GitHub CLI from here: Download and Install GitHub CLI.

A GitHub account and a Railway account are required. Sign up for GitHub here: Create GitHub account. And sign up for Railway here: Create Railway account

You must have some familiarity with HTML, CSS, JavaScript, HTTP to keep up with the concepts discussed in the guide.

Lastly, knowledge of Go is useful but not mandatory. This is a beginner guide.

Hello, World! Go

Open your work directory and initialize your project:

go mod init helloworld

Create a new file, main.go:

package main

import "fmt"

func main() {
  fmt.Println("Hello, World!")
}

Save the file and test it by running the following command in your terminal in your working directory:

go run main.go

You should the text "Hello, World!" in your terminal output.

Hello, World! Go on the Web

We just created a simple CLI app using Go. Next, let's create a simple web server using Go. Comment out the code you just wrote in the previous step. Above the comment block, add the following code:

package main

import "fmt"
import "net/http"

func main() {
  http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<h1>Hello, World!</h1>")
  })

  http.ListenAndServe(":80", nil)
}

Save the file and run it. Visit localhost in your browser and you should see the text "Hello, World!" on a webpage.

Deploy using Dockerfile and Railway CLI

Update main.go for Railway to detect the port your app is running on:

package main

import "fmt"
import "net/http"
import "os"

func main() {
  port := os.Getenv("PORT")
    if port == "" {
        port = "8000" // Default to port 8000
    }

  http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "<h1>Hello, World!</h1>")
  })

  http.ListenAndServe(":"+port, nil)
}

Create a Dockerfile file and add the following:

# Use the official Go image as a base
FROM golang:1.21-alpine

# Set the working directory
WORKDIR /app

# Copy go.mod and go.sum files (if they exist)
COPY go.mod ./

# Copy the source code
COPY . .

# Build the application
RUN go build -o main .

# Expose the port your app runs on
EXPOSE 8000

# Run the application
CMD ["./main"]

In your terminal, install the Railway CLI tool:

curl -fsSL https://railway.com/install.sh | sh

railway login --browserless

Create a new Railway project:

railway init

Link your project folder to your Railway project:

railway link

Deploy your app.

railway up

After deployment is complete, assign a domain

railway domain

Visit the Railway generated URL to test if everything is ok.

Create and Upload GitHub Repo

Initialize your project directory as a Git repo.

git init

Commit your project files. In this case it's just the main.go file.

git add main.go

git commit -m "Initial commit"

Authenticate with GitHub

gh auth login

Upload your repo to GitHub

gh repo create my-repo --public --source=. --remote=origin

git push --set-upstream origin master

Replace my-repo with your desired repo name.

Deploy to Railway

We will use the dashboard for a start.

Create a new Railway project

Visit dev.new in your browser. This will redirect you to railway.com/new and you will see a New Project modal with deployment options.

Select Deploy from GitHub repo and choose the repo you created previously.

The Railway platform will read the contents of your repo, initialize the project, build and then deploy it automatically as a service.

Generate a Domain for your project

Select Settings inside your Railway project's service. Under Networking click Generate Domain. This allows you to access your service on the internet.

Railway will generate a domain name for your app. The URL will appear a few seconds after clicking Generate Domain. You will use this URL to access your Go web app on the internet.

Test out your newly generated domain name in your browser. You should see the text "Hello, World!" when you visit the link.

Serve Static files using Go

In your local project folder, create a new folder, static. Create a new file named index.html inside static and add the following code:

<body>
  <h1>My Static Website</h1>
</body>

Update the main.go file to serve static files from the static folder. Comment out all the code you have written. Above the comment block, add the following code to main.go:

package main

import "net/http"

func main() {
    http.Handle("/", http.FileServer(http.Dir("./static")))
    http.ListenAndServe(":80", nil)
}

Test your code:

go run main.go

Visit localhost in your browser and you should see a webpage with the text: "My Static Website"

Update Deployment on Railway

To update your deployment, simply stage and commit the file changes you have made using Git.

git add .

git commit -m "App update"

Then push the updates to GitHub.

git push

Railway will automatically update your project right after pushing your changes to GitHub. Wait a few seconds and visit your app URL to test your changes

Conclusion

Congratulations! You have successfully built a simple web app using Go and deployed it to Railway. You learned how to create a basic web server, serve static files, and utilize GitHub for version control and deployment. Railway makes it easy to deploy and manage your applications with its user-friendly platform and powerful features. Keep experimenting with Go and Railway to build more complex and scalable web applications. Happy coding!

References

Getting Started with Go and the Web: Hello, World!

Mark Munyaka — Sun, 29 Dec 2024 02:58:41 +0000

Golang is growing in popularity as a server-side language. Developers use it as an alternative to more common technologies like PHP, Node.js, Ruby, Python, etc. One of the appeals of Go is its low resource usage. Developers on a budget can build powerful apps and host them cheaply on low-end infrastructure if they use Go.

This guide aims to gently introduce Go and see how it can be used to build applications for the web. This tutorial is aimed at beginners; however, experienced developers can also browse through it. You never know—you might learn a thing or two. Enough with the chit-chat, let's get started.

Prerequisites

To follow along with the guide, you need to have Go installed on your machine. Download and install Go by following the instructions: Download and Install Go.

Some knowledge of HTML is required for you to understand the concepts being illustrated. HTML is easy to catch on if you haven't written it before. Follow this guide if you haven't got a clue about HTML Learn HTML

Some knowledge of HTTP is required for you to understand the guide better. HTTP is the transport protocol for the web. Follow this guide to understand HTTP Learn HTTP

Hello World, Go

To get started with Go, open up your work folder and create a new file named main.go. Add the following code to main.go

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

Save the file and open up a new terminal session in your work directory. Run the following command:

go run main.go

You should see the following output:

Hello, World!

Congratulations! You have created your first program using Go. Pause and absorb the nice feeling. :) Now back to work.

That was just a warm up to get things started.

Hello World, Go on the Web

It's all well and good. We were able to print out "Hello, World!" on the terminal using Go, but that's not the aim of this guide. The real aim is to print out "Hello, World!" on a webpage using Go. So how do we do it?

First off, comment out the code you just wrote in main.go. At the top of your comment block, give it a ubiquitous name like "Step 1".

Above the comment block, add the following code:

package main

import "net/http"
import "fmt"

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request){
        fmt.Fprintf(w, "<h1>Hello, World!</h1>")
    })

    http.ListenAndServe(":80", nil)
}

Save the file and run it. Visit localhost in your browser and you should see the text "Hello, World!" on a webpage.

Dynamic Hello

Awesome! We just managed to create a web server using Go and print the text "Hello, World!". The next step is to make the text change based on user input. Why? So that we understand the purpose of server side languages and how they can make our web pages dynamic.

Comment out the code you wrote in the previous step and at the top of the comment block give it a useful name like "Step 2".

Above the comment block add the following code:

package main

import "fmt"
import "net/http"

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if r.FormValue("q") != "" {
            fmt.Fprintf(w, `
                <body>
                    <h1>Hello, %s</h1>
                </body>
            `, r.FormValue("q"))
            return
        }
        fmt.Fprintf(w, `
            <body>
                <form action="/" method="GET">
                    <label>Enter your name</label>
                    <input name="q">
                    <button type="submit">Submit</button>
                </form>
            </body>
        `)
    })

    http.ListenAndServe(":80", nil)
}

Stop your server (CTRL + C). Save the file and run it. Visit localhost in your browser and you should see a form input with the label, "Enter your name" and a "Submit" button.

Enter your name and click on "Submit". You should see the text "Hello, Jared", if your name is "Jared". Otherwise you will see the name you entered in the form.

Counter

Next, let's try something a different. How about a counter?

Comment out the code you wrote in the previous step and at the top of the comment block give it a useful name like "Step 3".

Above the comment block add the following code:

package main

import "fmt"
import "strconv"
import "net/http"

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        if r.Method == "POST" {
            count, _ := strconv.Atoi(r.FormValue("counter"))
            count++
           fmt.Fprintf(w, `
            <body>
                <form action="/" method="POST">
                    <label>Counter</label>
                    <input name="counter" value="%d" readonly>
                    <button type="submit">Add</button>
                </form>
                <a href="/">Reset</a>
            </body>
        `, count)
        return
        }

        fmt.Fprintf(w, `
            <body>
                <form action="/" method="POST">
                    <label>Counter</label>
                    <input name="counter" value="1" readonly>
                    <button type="submit">Add</button>
                </form>
            </body>
            <a href="/">Reset</a>
        `)
        })

    http.ListenAndServe(":80", nil)
}

Save the file and run it. Visit localhost in your browser and you should see a form input with the number "1" inside, the label, "Counter", and an "Add" button.

Clicking the button should increase the value of the counter.

Conclusion

Congratulations! You've successfully built your first web application with Go, starting with a simple "Hello, World!" and progressing to a dynamic web page with user interaction. You've learned how to set up a basic web server, handle user input, and create a counter with Go. This is just the beginning—Go’s simplicity and efficiency make it a great choice for building scalable web applications.

As you continue exploring Go, you'll find many more advanced features and libraries that can help you build powerful and efficient applications. Keep experimenting and building, and soon you'll be mastering Go and creating complex web applications in no time. Happy coding!

Be on the look out for more tutorials. Ciao!

Resources

Deploy a PHP site to Railway

Mark Munyaka — Wed, 23 Oct 2024 00:09:30 +0000

PHP is a framework for building websites. Railway is a platform for hosting web apps. Learn how to host a PHP site on Railway.

Prerequisites

Railway Account
PHP

Create Home Page

On your local machine, create a index.php file.

<h1>Hello, World</h1>

Test your site.

php -S localhost:8000

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

railway login --browserless

Create a new Railway project:

railway init

Link your folder to your Railway project.

railway link

Deploy your app.

railway up --detach

When the site is ready, generate a domain.

railway domain

Update Site and Redeploy

Update home page, index.php:

<h1>Hello World!</h1>
<p>Happy to be here</p>

Test update locally:

php -S localhost:8000

Redeploy to Railway.

railway up --detach

Deploy a Static Sveltekit site to Railway

Mark Munyaka — Tue, 22 Oct 2024 09:11:27 +0000

Sveltekit is a framework for building websites. Railway is a platform for hosting web apps. This guide shows you how to host a static Sveltekit site on Railway.

Prerequisites

Railway Account
Node.js

Create Sveltekit app

On your local machine, create a package.json file in your app folder.

{
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@sveltejs/adapter-static": "latest",
        "@sveltejs/kit": "latest",
        "@sveltejs/vite-plugin-svelte": "latest",
        "svelte": "latest",
        "vite": "latest"
    },
    "type": "module"
}

Install the dependencies.

npm install

Create a src/app.html file.

<head>%sveltekit.head%</head>
<body>%sveltekit.body%</body>

Create a src/routes/+page.svelte file.

<h1>Hello, World!</h1>

Create a src/routes/+layout.js file.

export const prerender = true;

Create a svelte.config.js file:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

Create a vite.config.js file:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});

Run the development server.

npm run dev

Visit http://localhost:5173 to view your site.

Build site

npm run build

Sveltekit will produce a build folder containing your static site.

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

railway login --browserless

Create a new Railway project:

railway init

Link the build folder to your Railway project.

cd build && railway link

Deploy your app.

railway up --detach

When the site is ready, generate a domain.

railway domain

Update Site and Redeploy

Update home page, src/routes/+page.svelte:

<h1>Hello World!</h1>
<p>Happy to be here</p>

Test update locally:

npm run dev

Rebuild site:

npm run build

Redeploy to Railway.

railway up --detach

Deploy a Static Nuxt site to Railway

Mark Munyaka — Mon, 21 Oct 2024 07:58:23 +0000

Nuxt is a framework for building websites. It is based on Vue.js, a frontend JavaScript library. Railway is a platform for hosting web apps. This guide shows you how to host a static Nuxt site on Railway.

Prerequisites

GitHub Account
Railway Account
Node.js

Create Nuxt app

On your local machine, create a new folder named my-app.

mkdir my-app

Open my-app.

cd my-app

Create a package.json file and add this:

{
  "scripts": {
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "nuxt": "^3.13.2",
    "vue": "latest"
  }
}

Install the dependencies.

npm install

Create a app.vue file and add this:

<template>
<h1>Hello, World!</h1>
</template>

Run the development server.

npm run dev

Visit http://localhost:3000 to view your site.

lynx localhost:3000

Build site

Stop your server and build your Nuxt site.

npm run generate

Nuxt will produce a dist folder containing the static site that you'll deploy.

Preview your site.

npm run preview

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

railway login --browserless

Create a new Railway project:

railway init

Link the dist folder to your Railway project.

Change working directory to dist.

cd dist

Link current directory, i.e. dist to your Railway project.

railway link

Deploy your app.

railway up --detach

When site is ready, generate a domain and test your deployment.

railway domain

Update Site and Redeploy

Update home page, app.vue:

<template>
<h1>Hello World!</h1>
<p>Happy to be here</p>
</template>

Test update locally:

npm run dev

Rebuild site:

npm run generate

Redeploy to Railway.

cd dist && railway up --detach

Deploy a Static Astro Site on Railway

Mark Munyaka — Sun, 20 Oct 2024 03:19:58 +0000

Deploying a Static Astro Site on Railway

Astro is a framework for building websites. Railway is a platform for hosting web apps. This guide shows you how you can host an Astro website on Railway.

Prerequisites

GitHub Account
Railway Account
Node.js

Create Astro app

On your local machine, create a new folder named 'my-app'.

mkdir my-app

Open my-app.

cd my-app

Create a package.json file and add the following:

{
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "dependencies": {
    "astro": "^4.16.5"
  }
}

Install the dependencies.

npm install

Create a src/pages folder and add a src/pages/index.astro file.

mkdir -p src/pages && touch src/pages/index.astro

Add this to src/pages/index.astro

<h1>Hello, World!</h1>

Run the development server.

npm run dev

Visit http://localhost:4321 to view your site.

lynx localhost:4321

Build Site

Stop your server and build your Astro site:

npm run build

Astro will produce a dist folder containing the static site you will deploy.

Preview your build:

npm run preview

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

railway login --browserless

Create a new Railway project:

railway init

Link the dist folder to your Railway project.

Change working directory to dist.

cd dist

Link current directory, i.e. dist to your Railway project.

railway link

Deploy your app.

railway up --detach

When site is ready, generate a domain.

railway domain

Test Deployment

lynx <YOUR-APP-DOMAIN>

Update Site and Redeploy

Update home page, src/pages/index.astro:

<h1>Hello World!</h1>
<p>Happy to be here</p>

Test update locally:

npm run dev

Rebuild site:

npm run build

Redeploy to Railway.

cd dist && railway up --detach

Deploying a Static Next.js Site to Railway

Mark Munyaka — Sat, 19 Oct 2024 01:44:09 +0000

Introduction

Next.js is a React framework for building web apps. Railway is a platform for hosting web apps. This guide shows you how to host a static Next site on Railway.

Prerequisites

GitHub Account
Railway Account
Node.js

Create Next app

In your local machine, create a new folder named my-app.

mkdir my-app

Install react, react-dom, and next as npm dependencies.

npm install next@latest react@latest react-dom@latest

Open your package.json file and add the following npm scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.2.15",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Create an app folder, then add a layout.tsx and page.tsx file.

mkdir app && touch app/layout.tsx app/page.tsx

Create root layout inside app/layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Create home page, app/page.tsx:

export default function Page() {
  return <h1>Hello World!</h1>
}

Run the development server.

npm run dev

Visit http://localhost:3000 to view your site.

lynx localhost:3000

Build Next App

Stop your server by pressing CTRL plus C on your keyboard.

Add a static export configuration to your Next.js app. Create a next.config.js file:

touch next.config.js

Add this to next.config.js:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

Build your application:

npm run build

Next.js will produce an out folder which contains the HTML/CSS/JS assets for your application.

Deploy to Railway

Install the Railway CLI tool:

npm i -g @railway/cli

railway login --browserless

Create a new Railway project:

railway init

Link the out folder to your Railway project.

Change working directory to out.

cd out

Link current directory, i.e. out to your Railway project.

railway link

Deploy your app.

railway up --detach

When the site is ready, generate a domain.

railway domain

Test Deployment

lynx <YOUR-APP-DOMAIN>

Update Site and Redeploy

Update home page, app/page.tsx:

export default function Page() {
  return (
    <main>
      <h1>Hello World!</h1>
      <p>Happy to be here</p>
    </main>
  )
}

Test update locally:

cd .. && npm run dev

Rebuild site:

npm run build

Redeploy to Railway.

cd out && railway up --detach

Getting Started with Medusa and Neon Postgres

Mark Munyaka — Fri, 09 Aug 2024 08:48:30 +0000

TLDR

Create a Neon Postgres db and copy connection string.
Scaffold a Medusa project in your terminal:

npx create-medusa-app@latest --with-nextjs-starter --db-url "postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require"

Visit localhost:8000 to view your storefront and localhost:7001 to view your Store Admin Dashboard
GitHub Repo

Introduction

In this guide, you will learn how to set up and build an ecommerce store using Medusa ecommerce toolkit and Neon Postgres. Medusa comes with a backend server, a store admin dashboard and a storefront made using Next.js. You will configure Medusa to use a Postgres database powered by Neon.

Prerequisites

To follow along you will need:

Node.js 16.14.0 or later
A Neon Postgres account

Create PostgreSQL Database for Medusa store on Neon

Using a serverless Postgres database powered by Neon lets you scale down to zero, which helps you save on compute costs.

To get started, go to the Neon console and create a project. This creates a Postgres database.

Copy the Connection String of your database in the Connection Details panel.

The Neon connection string will have the following format:

postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require

<user> is the database user.
<password> is the database user’s password.
<endpoint_hostname>.neon.tech is the host with neon.tech as the top-level domain (TLD).
<port> is the Neon port number. The default port number is 5432.
<dbname> is the name of the database. neondb is the default database created with each Neon project if you do not define your own.
?sslmode=require is an optional query parameter that enforces SSL mode for better security when connecting to the Postgres instance.

Save the connection string somewhere safe.

Create a new Medusa commerce application

Medusa is a toolkit for developers to create digital commerce applications. In its simplest form, Medusa is a Node.js backend with the core API, plugins, and modules installed through npm.

create-medusa-app is a command that facilitates creating a Medusa ecosystem. It installs the Medusa backend and admin dashboard, along with the necessary configurations to run the backend.

If you want to connect to a Neon database, you must use the --db-url option with its value being the connection string to your Neon database. The connection string you saved in the previous step

In your terminal, run the following command:

npx create-medusa-app@latest --with-nextjs-starter --db-url "postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require"

Specify project name

After running the command, you will be asked first to enter the name of your project, which is used to create the directory holding your Medusa backend. You can use the default my-medusa-store or enter another project name.

Specify admin email

You'll then be prompted to enter an admin email for your admin user. You'll be using this admin email later to login to your admin dashboard. You can use the default admin@medusa-test.com or enter any other email.

After specifying the project name as well as admin email, the Next.js Medusa starter storefront will be installed along with the Medusa backend. This will install the storefront under the <PROJECT_NAME>-storefront directory, where <PROJECT_NAME> is the name of the project you specified earlier.

Log into Medusa Admin Dashboard

Once the project is prepared, the Medusa backend will start. Visit localhost:7001 to view the admin dashboard in your browser. You'll then be asked to enter a password for the admin email you entered earlier, as well as other account information.

Once you're logged in, you can start using Medusa!

View Storefront

Visit localhost:8000 to view your Next.js storefront:

Build Project

Stop the Medusa project in your terminal CTRL + C. Open the Medusa backend directory:

cd my-medusa-store

Build your Medusa server and admin:

npm run build

Wait for the build to execute, after completion start your Medusa server and admin:

npm run start

Visit localhost:7001 once again in your browser to confirm if the build was successful.

Build Next.js Storefront

In a new terminal session, open the folder containing your storefront:

cd my-medusa-store-storefront

Build your storefront:

npm run build

Wait for the build to execute, after completion start your Medusa storefront:

npm run start

Visit localhost:8000 once again in your browser to confirm if build was successful.

Conclusion

In this guide, you've successfully set up a complete ecommerce solution using Medusa, Next.js, and Neon Postgres. You now have a powerful backend, an intuitive admin dashboard, and a sleek Next.js storefront - all powered by a serverless Postgres database. This setup provides a solid foundation for building and scaling your online store.

Next Steps

In an upcoming tutorial we will look at deploying the Medusa store.

Author

Mark Munyaka

GitHub: @Marktawa

Twitter: @McMunyaka

Hire Me

If you found this guide helpful and would like assistance in setting up your own Medusa-powered ecommerce store, I would be happy to help!
As an experienced Medusa and Next.js developer, I can provide the following services:

Initial setup and configuration of your Medusa backend and Next.js storefront
Deployment of your Medusa store on AWS, Railway, Digital Ocean and any other platform
Integration with Neon Postgres, Stripe, Meilisearch, SendGrid, and other plugins
Customization and branding of your store's design and functionality
Ongoing maintenance, updates, and feature enhancements
Performance optimization and scaling guidance

To discuss your project and get a quote, please feel free to contact me on markmunyakapro@gmail.com or connect with me on LinkedIn or Discord. I look forward to hearing from you!

Sponsor

Support my passion for sharing development knowledge by making a donation to my Buy Me a Coffee account. Your contribution helps me create valuable content and resources. Thank you for your support!

Buy Me A Coffee

Building an ecommerce store using Medusa and Sveltekit

Mark Munyaka — Mon, 08 Jul 2024 12:13:09 +0000

Medusa is an open source tool that can help you set up a headless ecommerce server backend with relative ease. Couple that with Sveltekit, a frontend framework for building web apps. What do you get? A full stack, modular ecommerce app that can support a wide range of use cases.

Introduction

What is this tutorial for?

This tutorial will teach you how to set up a simple ecommerce web app using Medusa as your store backend and Sveltekit for the visual storefront. It will showcase the fundamental building blocks required to run the app in development and production stages as well as showcase how you can deploy the app. At the end of this tutorial you should have acquired the overarching knowledge necessary in building ecommerce apps of a composable nature.

Why Medusa?

Medusa is one of the few open source ecommerce backend that is feature rich allowing developers to make all sorts of ecommerce apps to fit any use case. Medusa is also gaining popularity within the developer community such that it worth taking a look at how you can make an ecommerce app using Medusa. Furthermore, Medusa supports all sorts of ecommerce app architectures. Be it headless, composable, semi-modular you name it, all scenarios work well with Medusa.

Why Sveltekit?

Sveltekit is a framework based on the popular JavaScript library called Svelte. It has also gained a lot of popularity in the frontend community in the past few years. It is simple to understand, it is fast and performant and a useful alternative to the React ecosystem.

Prerequisites

To follow along with the tutorial you need to have some knowledge of the following:

Basic understanding of HTML, CSS, and JavaScript
Basic understanding of Node.js and npm
Basic understanding of the command line (Bash)
Knowledge of Svelte and Sveltekit is a bonus but not a requirement.
Knowledge of Medusa is a bonus but not a requirement.

In addition to knowing these tools, your computer system should have the following packages installed:

Before proceeding with the tutorial you can check out the following links for useful resources:

Installation and setup of the Medusa server API

In this step you will install and set up the Medusa Server backend.

Open up your terminal and create a project folder to contain all the source code for the entire project. Name it medusa-sveltekit.

mkdir medusa-sveltekit

Set up PostgreSQL on Neon

If you have PostgreSQL installed locally, you can skip this step.

Visit the Neon - Sign Up page and create a new account.

Create a new project in the Neon console. Give your project a name like mystore and your database a name like storedb then click Create project.

Take note of your connection string which will look something like: postgresql://dominggobana:JyyuEdr809p@df-hidden-bonus-ertd7sio.us-east-3.aws.neon.tech/storedb?sslmode=require. It is in the form postgres://[user]:[password]@[host]/[dbname].You will provide connection string as a database URL to your Medusa server.

Install Medusa CLI

In your terminal, inside the my-store folder run the following command to install the Medusa CLI. We will use it to install the Medusa server.

npm install @medusajs/medusa-cli -g

Create a new Medusa project

medusa new my-medusa-store

You will be asked to specify your PostgreSQL database credentials. Choose "Skip database setup".

A new directory named my-medusa-store will be created to store the server files.

Configure Database - Neon Users

If you have PostgreSQL installed locally, you can skip this step.

Add the connection string as the DATABASE_URL to your environment variables. Inside my-medusa-store create a .env file and add the following:

DATABASE_URL=postgresql://dominggobana:JyyuEdr809p@df-hidden-bonus-ertd7sio.us-east-3.aws.neon.tech/mystoredb?sslmode=require

Configure Database - Local PostgreSQL DB

If you have PostgreSQL configured on Neon, you can skip this step.

Access the PostgreSQL console to create a new user and database for the Medusa server.

sudo -u postgres psql

To create a new user named medusa_admin run this command:

CREATE USER medusa_admin WITH PASSWORD 'medusa_admin_password';

Now, create a new database named medusa_db and make medusa_admin the owner.

CREATE DATABASE medusa_db OWNER medusa_admin;

Last, grant all privileges to medusa_admin and exit the PostgreSQL console.

GRANT ALL PRIVILEGES ON DATABASE medusa_db TO medusa_admin;

exit

Add the connection string as the DATABASE_URL to your environment variables. Inside my-medusa-store create a .env file and add the following:

DATABASE_URL=postgres://medusa_admin:medusa_admin_password@localhost:5432/medusa_db

Seed Database

Run migrations and seed data to the database by running the following command:

cd my-medusa-store
medusa seed --seed-file="./data/seed.json"

Start your Medusa backend

medusa develop

The Medusa server will start running on port 9000.

Test your server:

curl localhost:9000/store/products

If it is working, you should see a list of products.

Install and Serve Medusa Admin with the Backend

This section explains how to install the admin to be served with the Medusa Backend.

Install the package

Inside my-medusa-store stop your Medusa server, CTRL + C and run the following command to install the Medusa Admin Dashboard.

npm install @medusajs/admin

Test your install by re-running your server.

medusa develop

Open up your browser and visit localhost:7001 to see the Medusa Admin Dashboard. Use the Email admin@medusa-test.com and password supersecret to log in.

Set Up Sveltekit

Create a Sveltekit project

Open up a new terminal session inside the medusa-sveltekit directory. Run the following commands:

npm create svelte@latest storefront
cd storefront
npm install

Answer the prompts as follows:

Which Svelte app template?, Answer: Skeleton project (Barebones scaffolding for your new SvelteKit app)
Add type checking with TypeScript?, Answer: No
Select additional options (use arrow keys/space bar) Leave it blank.

This will scaffold a new project in the storefront directory.

Link Storefront To Server

Configure SvelteKit Storefront URL

To link the Medusa server with the Sveltekit storefront, first, open up your Medusa project, my-medusa-store in your code editor, then open the .env file where all your environment variables are set up.

Add the variable STORE_CORS with the value of the URL where your storefront will be running. SvelteKit by default runs on port 5173.

STORE_CORS=http://localhost:5173

After this, your Medusa server will be ready to receive a request from your storefront and send back responses if everything works as expected.

List Products on Sveltekit Storefront

Open up the storefront directory in your code editor, and create a new file named src/routes/+page.js. This file will export a load function and the return value which is available to the page via the data prop:

/** @type {import(./$types').PageLoad} */
export async function load({ fetch }) {
    const res = await fetch(`http://localhost:9000/store/products`);
    const payload = await res.json();
    return { payload };
}

Replace the existing code in src/routes/+page.svelte with the following:

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Products</h2>
<ul>
    {#each data.payload.products as product}
        <li>{product.title} - ${product.variants[0].prices[0].amount}</li>
    {/each}
</ul>

Open up the storefront directory in your terminal and start the SvelteKit development server.

npm run dev

Visit localhost:5173 in your browser to see the list of products from your Medusa backend.

Add Cart

Update src/routes/+page.svelte with the following code, to create a cart on page load:

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  import { onMount } from 'svelte';

    onMount(async () => {
        fetch(`http://localhost:9000/store/carts`, {
        method: "POST",
        credentials: "include",
    })
    .then((response) => response.json())
    .then(({ cart }) => {
        localStorage.setItem("cart_id", cart.id)
        console.log("The cart ID is " + localStorage.getItem("cart_id"));
    });

    });
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Products</h2>
<ul>
    {#each data.payload.products as product}
        <li>{product.title} - ${product.variants[0].prices[0].amount}</li>
    {/each}
</ul>

Revisit localhost:5173 in your browser and open the Console section of your Dev Tools. You should see a message with a cart ID to confirm creation of the cart.

Update each product in src/routes/+page.svelte with a button to add a product to the cart.

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  import { onMount } from 'svelte';

    onMount(async () => {
        fetch(`http://localhost:9000/store/carts`, {
        method: "POST",
        credentials: "include",
    })
    .then((response) => response.json())
    .then(({ cart }) => {
        localStorage.setItem("cart_id", cart.id)
        console.log("The cart ID is " + localStorage.getItem("cart_id"));
    });

    });

  function addProductToCart(variant_id) {
    const id = localStorage.getItem("cart_id");
    fetch(`http://localhost:9000/store/carts/${id}/line-items`, {
        method: "POST",
        dentials: "include",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            variant_id,
            quantity: 1,
        }),
    })
        .then((response) => response.json());
        //.then(({ cart }) => setCart(cart));
  }
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Products</h2>
<ul>
    {#each data.payload.products as product}
        <li>
            {product.title} - ${product.variants[0].prices[0].amount}
            <button on:click={() => { 
                  addProductToCart(product.variants[0].id); 
                  alert('Added to Cart');
                  }}
            >
                Add To Cart
            </button>
        </li>
    {/each}
</ul>

Confirm whether the products are being added to the cart by performing a curl request as follows:

curl localhost:9000/store/carts/cart_01HRBTB0X79NAGJYY8T6D5BGK6

Replace with the specific cart id as listed in your browser console. If all is working your cart should be populated with some products.

The next step is to display the cart by creating a cart page.

Create a new folder inside src/routes named cart. Add a +page.svelte file to the cart folder.

Add the following code to src/routes/cart/+page.svelte:

<script>
    import { onMount } from "svelte";

    let data;
    let total;
    let items = [];

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        const res = await fetch(`http://localhost:9000/store/carts/${id}`, {
            credentials: "include",
        });
        data = await res.json();
        items = data.cart.items;
        total = data.cart.total;
    });
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Cart</h2>

<ul>
    {#each items as item}
        <li>
            TITLE: {item.title} PRICE: {item.unit_price} QUANTITY: {item.quantity}
        </li>
    {/each}
</ul>
<p>The total price for your cart is {total}</p>

Test your cart page by adding some products to your cart then visiting localhost:5173/cart in your browser. You should see a list of products with the quantity and price info as well as the cart total.

Next, associate your cart with an email address for the user. This is necessary to complete the cart.

<script>
    import { onMount } from "svelte";

    let data;
    let email;
    let total;
    let items = [];

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        const res = await fetch(`http://localhost:9000/store/carts/${id}`, {
            credentials: "include",
        });
        data = await res.json();
        items = data.cart.items;
        total = data.cart.total;
    });

    function addCustomer() {
        const id = localStorage.getItem("cart_id");
        fetch(`http://localhost:9000/store/carts/${id}`, {
            method: "POST",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: email,
            }),
        })
        .then((response) => response.json())
        .then(({ cart }) => {
            console.log("Customer ID is " + cart.customer_id)
            console.log("Customer email is " + cart.email)
        });
    }
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Cart</h2>

<ul>
    {#each items as item}
        <li>
            TITLE: {item.title} PRICE: {item.unit_price} QUANTITY: {item.quantity}
        </li>
    {/each}
</ul>
<p>The total price for your cart is {total}</p>
<p>Enter your email to Proceed to Checkout</p>
<input id="email" type="email" bind:value={email}>
<button type="submit" on:click={() => {
    addCustomer();
    alert('Added your Email');
    }}
>
    Submit
</button>

Add Checkout Functionality

Create a page called, src/routes/checkout/+page.svelte to load the checkout page.

Add the following code to initialize the payment session:

<script>
    import { onMount } from "svelte";

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        fetch(`http://localhost:9000/store/carts/${id}/payment-sessions`, {
            method: "POST",
            credentials: "include",
        })
        .then((response) => response.json())
        .then(({ cart }) => {
            console.log(cart.payment_sessions)
        })
    });
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Checkout</h2>

Visit localhost:5173/checkout in your browser and open up the Console in your Devtools.

Add Cart Completion

Next add Cart completion to the checkout process, by adding the following code:

medusa.carts.createPaymentSessions(cartId)
.then(({ cart }) => {
  console.log(cart.payment_sessions)
})

<script>
import { onMount } from "svelte";

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        fetch(`http://localhost:9000/store/carts/${id}/payment-sessions`, {
            method: "POST",
            credentials: "include",
        })
        .then((response) => response.json())
        .then(({ cart }) => {
            console.log(cart.payment_sessions)
        })
    });

function completeCart() {
    const id = localStorage.getItem("cart_id");
    fetch(`http://localhost:9000/store/carts/${id}/complete`, {
        method: "POST",
        dentials: "include",
        headers: {
            "Content-Type": "application/json",
        },
    })
    .then((response) => response.json())
    .then(({ type, data }) => {
        console.log(type, data)
    })
  }
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Checkout</h2>

<button on:click={() => { 
        completeCart(); 
        alert('Cart Complete');
        }}
>
    Complete Cart
</button>

Click on the Complete Cart button to test if the order was completed using the manual Medusa payment provider. You should see the following:

Add Payment Provider

Stripe is a battle-tested and unified platform for transaction handling. Stripe supplies you with the technical components needed to handle transactions safely and all the analytical features necessary to gain insight into your sales. These features are also available in a safe test environment which allows for a concern-free development process.

Using the medusa-payment-stripe plugin, you will set up your Medusa project with Stripe as a payment processor.

Create a Stripe account and retrieve the Stripe Secret API Key from your account to connect Medusa to your Stripe account.

Add the key to your environment variables in .env in my-medusa-store.

STRIPE_API_KEY=sk_...

Install Stripe Plugin

Open up your terminal, in the root of your Medusa backend. Stop your Medusa server and run the following command to install the Stripe plugin:

npm install medusa-payment-stripe

Configure the Stripe Plugin

Next, you need to add configurations for your Stripe plugin.

In medusa-config.js, add the following at the end of the plugins array:

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

Add Stripe to Region in Medusa Admin

Make sure your Medusa backend server is running, then log in to your Medusa Admin Dashboard.

Go to Settings then select Regions.

Select a region to edit.

Click on the three dots icon at the top right of the first section on the right. Click on Edit Region Details from the dropdown.

Under the providers section, add all Stripe options to the region. Unselect the payment providers you want to remove from the region. Click the "Save and close" button.

Add Stripe Key to Sveltekit Storefront

Add your Stripe Publishable API Key to your Sveltekit storefront environment variables. Open up .env in your Sveltekit Storefront and add the following:

PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

Install Dependencies

Install the necessary dependencies to show the UI and handle the payment confirmation:

npm install --save stripe @stripe/stripe-js svelte-stripe

You’ll also use Medusa’s JS Client to easily call Medusa’s REST APIs:

npm install @medusajs/medusa-js

Add Stripe

Update the checkout page for the Stripe payment option. Open up src/routes/checkout/+page.svelte in your code editor.

<script>
  import { onMount } from 'svelte';
  import { loadStripe } from '@stripe/stripe-js';
  import { PUBLIC_STRIPE_KEY } from '$env/static/public';
  import { Elements, PaymentElement, LinkAuthenticationElement, Address } from 'svelte-stripe';
  import Medusa from '@medusajs/medusa-js';

  let stripe = null;
  let clientSecret = null;
  let error = null;
  let elements;
  let processing = false;

  let cartId = null;

  onMount(async () => {
    stripe = await loadStripe(PUBLIC_STRIPE_KEY);
    const client = new Medusa();
    cartId = localStorage.getItem("cart_id");

    try {
      const { cart } = await client.carts.createPaymentSessions(cartId);
      const isStripeAvailable = cart.payment_sessions?.some(
        (session) => session.provider_id === 'stripe'
      );

      if (!isStripeAvailable) return;

      const { cart: updatedCart } = await client.carts.setPaymentSession(cartId, {
        provider_id: 'stripe',
      });

      setClientSecret(updatedCart.payment_session.data.client_secret);
    } catch (error) {
      console.error('Error creating payment session:', error);
    }
  });

  function setClientSecret(secret) {
    clientSecret = secret;
  }

  async function submit() {
    // avoid processing duplicates
    if (processing) return

    processing = true

    // confirm payment with stripe
    const result = await stripe.confirmPayment({
      elements,
      redirect: 'if_required'
    })

    // log results, for debugging
    console.log({ result })

    if (result.error) {
      // payment failed, notify user
      error = result.error
      processing = false
    } else {
      // payment succeeded, redirect to "thank you" page
      const client = new Medusa();
      const response = await client.carts.complete(cartId);
      console.log(response);
    }
  }
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Checkout</h2>

{#if error}
  <p class="error">{error.message} Please try again.</p>
{/if}

{#if clientSecret}
  <Elements
    {stripe}
    {clientSecret}
    theme="flat"
    labels="floating"
    variables={{ colorPrimary: '#7c4dff' }}
    rules={{ '.Input': { border: 'solid 1px #0002' } }}
    bind:elements
  >
    <form on:submit|preventDefault={submit}>
      <LinkAuthenticationElement />
      <PaymentElement />
      <Address mode="billing" />

      <button disabled={processing}>
        {#if processing}
          Processing...
        {:else}
          Pay
        {/if}
      </button>
    </form>
  </Elements>
{:else}
  Loading...
{/if}

<style>
  .error {
    color: tomato;
    margin: 2rem 0 0;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2rem 0;
  }

  button {
    padding: 1rem;
    border-radius: 5px;
    border: solid 1px #ccc;
    color: white;
    background: #7c4dff;
    font-size: 1.2rem;
    margin: 1rem 0;
  }
</style>

Add Success Page

Create a new directory named thanks in the src/routes path. In it add a +page.svelte file with the following code:

<h1>Success!</h1>
<p>Payment was successfully processed.</p>

Update src/routes/checkout/+page.svelte so that once the payment is done the store will redirect to the Success page:

<script>
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
  import { loadStripe } from '@stripe/stripe-js';
  import { PUBLIC_STRIPE_KEY } from '$env/static/public';
  import { Elements, PaymentElement } from 'svelte-stripe';
  import Medusa from '@medusajs/medusa-js';

  let stripe = null;
  let clientSecret = null;
  let error = null;
  let elements;
  let processing = false;

  let cartId = null;

  onMount(async () => {
    stripe = await loadStripe(PUBLIC_STRIPE_KEY);
    const client = new Medusa();
    cartId = localStorage.getItem("cart_id");

    try {
      const { cart } = await client.carts.createPaymentSessions(cartId);
      const isStripeAvailable = cart.payment_sessions?.some(
        (session) => session.provider_id === 'stripe'
      );

      if (!isStripeAvailable) return;

      const { cart: updatedCart } = await client.carts.setPaymentSession(cartId, {
        provider_id: 'stripe',
      });

      setClientSecret(updatedCart.payment_session.data.client_secret);
    } catch (error) {
      console.error('Error creating payment session:', error);
    }
  });

  function setClientSecret(secret) {
    clientSecret = secret;
  }

  async function submit() {
    // avoid processing duplicates
    if (processing) return

    processing = true

    // confirm payment with stripe
    const result = await stripe.confirmPayment({
      elements,
      redirect: 'if_required'
    })

    // log results, for debugging
    console.log({ result })

    if (result.error) {
      // payment failed, notify user
      error = result.error
      processing = false
    } else {
      // payment succeeded, redirect to "thank you" page
      const client = new Medusa();
      const response = await client.carts.complete(cartId);
      console.log(response);
      goto('../thanks')
    }
  }
</script>

<h1>Welcome to the Medusa SvelteKit Store</h1>
<h2>Checkout</h2>

{#if error}
  <p class="error">{error.message} Please try again.</p>
{/if}

{#if clientSecret}
  <Elements
    {stripe}
    {clientSecret}
    theme="flat"
    labels="floating"
    variables={{ colorPrimary: '#000' }}
    rules={{ '.Input': { border: 'solid 1px #000' } }}
    bind:elements
  >
    <form on:submit|preventDefault={submit}>
      <PaymentElement />

      <button disabled={processing}>
        {#if processing}
          Processing...
        {:else}
          Pay
        {/if}
      </button>
    </form>
  </Elements>
{:else}
  Loading...
{/if}

<style>
  .error {
    color: tomato;
    margin: 2rem 0 0;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 2rem 0;
  }

  button {
    padding: 1rem;
    border-radius: 5px;
    border: solid 1px #000;
    color: white;
    background: #000;
    font-size: 1.2rem;
    margin: 1rem 0;
  }
</style>

Test Payment

Test if the Stripe integration has worked well by making test a payment. If everything is working your checkout page should appear like this.

A successful payment should lead users to the following page:

Capture Payment

Visit the Orders section in your Medusa Admin and click on the order you placed earlier in your storefront to capture it.

You can check to see if the payment was successful in your Stripe Dashboard Payment Section, after capturing it in your Medusa Dashboard.

UI Design

In the next section, we will design the UI for our storefront.

Add Layout

Add a layout file for the common UI elements like the header and footer. Open up your storefront folder and add a src/routes/+layout.svelte file inside.

Add the following code to src/routes/+layout.svelte:

<div class="pagewrapper">
    <header id="header">
        <a href="/">HOME</a>
        <h1><a href="/">MY STORE</a></h1>
        <a href="/cart">CART</a>
    </header>
    <main id="main">
      <slot />
    </main>
    <footer id="footer">
        <p>Copyright 2024.</p>
        <p>Made Using Sveltekit and Medusa</p>
    </footer>
</div>

<style>
  * {
      margin: 0;
      padding: 0;
  }

  .pagewrapper {
      max-width: 1440px;
      font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
      margin: 0 auto;
  }

  header {
      padding: 0.6rem 1.2rem;
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      border-bottom: 1px solid #000;
  }

  a {
      list-style: none;
      text-decoration: none;
      color: inherit;
  }

  footer {
      font-size: 0.6rem;
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
      padding: 0.75rem 1.5rem;
      border-top: 1px solid #000;
  }
  </style>

Home Page

We will start off with the home page design. The home page will be based on the following design.

Update the code for the home page, src/routes/+page.svelte as follows:

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  import { onMount } from "svelte";

  onMount(async () => {
    fetch(`http://localhost:9000/store/carts`, {
      method: "POST",
      credentials: "include",
    })
      .then((response) => response.json())
      .then(({ cart }) => {
        localStorage.setItem("cart_id", cart.id);
        console.log("The cart ID is " + localStorage.getItem("cart_id"));
      });
  });

  function addProductToCart(variant_id) {
    const id = localStorage.getItem("cart_id");
    fetch(`http://localhost:9000/store/carts/${id}/line-items`, {
      method: "POST",
      dentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        variant_id,
        quantity: 1,
      }),
    }).then((response) => response.json());
    //.then(({ cart }) => setCart(cart));
  }
</script>

<section id="hero">
  <h2>Welcome to the Medusa SvelteKit Store</h2>
  <a href="#products">View Products</a>
</section>

<section id="products">
  <h3>Products</h3>
  <ul>
    {#each data.payload.products as product}
      <li>
        <img src="{product.thumbnail}" alt="">
        <h4>{product.title}</h4>
        <p>${ (product.variants[0].prices[1].amount / 100).toFixed(2) }</p>
        <button
          on:click={() => {
            addProductToCart(product.variants[0].id);
            alert("Added to Cart");
          }}
        >
          Add To Cart
        </button>
      </li>
    {/each}
  </ul>
</section>

<style>
  #hero {
    border-bottom: 1px #000000 solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100vh;
  }

  #products {
    padding: 2rem 0;
  }

  ul, li, a {
    list-style: none;
    text-decoration: none;
    color: inherit;
  }

  ul {
    display: grid;
    text-align: center;
    justify-items: center;
    grid-template-columns: repeat(3, 1fr);
    padding: 1.2rem;
    gap: 2rem;
  }

  @media (max-width: 768px) {
    ul {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 1.6rem;
    }
 } 

 @media (max-width: 480px) {
    ul {
        grid-template-columns: repeat(1, 1fr);
        padding: 0.8rem;
        gap: 3rem;      
    }
 }

  li {
    max-width: 18rem;
    padding: 1.2rem 0;
  }

  img {
    width: 100%;
  }

  h3 {
    text-align: center;
    padding: 2rem 0;
  }

  button {
    text-decoration: none;
    background: #000;
    color: #FFF;
    width: 100%;
    font-family: inherit;
    padding: 0.5rem 0;
    cursor: pointer;
    border: none;
  }

  button:hover {
    font-weight: 600;
  }
</style>

Make sure your Medusa development server and Sveltekit development server are running and then visit the home page, localhost:5173 to view the changes.

Cart Page

Update the code for the cart page, src/routes/cart/+page.svelte as follows:

<script>
    import { onMount } from "svelte";

    let data;
    let email;
    let total;
    let items = [];

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        const res = await fetch(`http://localhost:9000/store/carts/${id}`, {
            credentials: "include",
        });
        data = await res.json();
        items = data.cart.items;
        total = data.cart.total;
    });

    function addCustomer() {
        const id = localStorage.getItem("cart_id");
        fetch(`http://localhost:9000/store/carts/${id}`, {
            method: "POST",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: email,
            }),
        })
            .then((response) => response.json())
            .then(({ cart }) => {
                console.log("Customer ID is " + cart.customer_id);
                console.log("Customer email is " + cart.email);
            });
    }
</script>

<h2>Cart</h2>
<section id="cart">
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            {#each items as item}
                <tr>
                    <td>{item.title}</td>
                    <td>{item.quantity}</td>
                    <td>${(item.unit_price / 100).toFixed(2)}</td>
                    <td>${(item.total / 100).toFixed(2)} </td>
                </tr>
            {/each}
        </tbody>
    </table>
</section>
<section id="summary">
    <h4>SUMMARY</h4>
    <ul>
        <li>
            <p>Subtotal</p>
            <p>${(total / 100).toFixed(2)}</p>
        </li>
        <li>
            <p>Shipping</p>
            <p>$0.00</p>
        </li>
        <li>
            <p>Taxes</p>
            <p>$0.00</p>
        </li>
        <li id="total">
            <p>Total</p>
            <p>${(total / 100).toFixed(2)}</p>
        </li>
    </ul>
    <p>Enter your email to proceed to Checkout</p>
    <input id="email" type="email" bind:value={email} />
    <button
        type="submit"
        on:click={() => {
            addCustomer();
            alert("Added your Email");
        }}
    >
        Submit
    </button>

    <a href="/checkout">Go To Checkout</a>
</section>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    h2 {
        text-align: center;
        padding: 4rem 0 2rem 0;
        font-size: 4rem;
    }

    table {
        margin: 0 auto;
        table-layout: fixed;
        border-collapse: collapse;
        max-width: 16rem;
    }

    thead {
        border-bottom: 1px #000 solid;
    }

    tbody td {
        font-weight: 400;
        text-align: left;
    }

    thead th {
        text-align: left;
    }

    th,
    td {
        padding: 1.2rem;
    }

    @media (max-width: 420px) {
        th,
        td {
            padding: 1.2rem 0.8rem;
        }
    }

    #cart {
        padding: 2rem 0;
    }

    #summary {
        max-width: 16rem;
        margin: 0 auto;
        padding: 2rem 0;
    }

    #summary h4 {
        text-align: center;
        border-bottom: 1px #000 solid;
        font-size: 2rem;
        padding: 1rem;
    }

    #summary li {
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        padding: 1rem 0;
    }

    #summary #total {
        border-top: 1px #000 solid;
        font-weight: 600;
        font-size: 1.2rem;
    }

    #summary a {
        display: block;
        text-decoration: none;
        width: 100%;
        background: #000;
        padding: 0.3rem 0;
        color: #fff;
        text-align: center;
        margin-top: 4rem;
    }

    #summary a:hover {
        font-weight: 600;
    }

    ul ~ p {
        padding-top: 1rem;
        font-weight: 400;
        text-align: justify;
    }

    input {
        width: 98%;
        margin: 0.5rem 0;
        padding: 0.4rem 0;
        padding-left: 0.2rem;
        border: 1px #000 solid;
    }

    button {
        text-decoration: none;
        background: #000;
        color: #fff;
        width: 100%;
        font-family: inherit;
        padding: 0.3rem 0;
        font-size: 1rem;
        cursor: pointer;
        border: none;
    }

    button:hover {
        font-weight: 600;
    }
</style>

Make sure your Medusa development server and Sveltekit development server are running and then add some products to your cart. Visit the cart page, localhost:5173/cart to view the changes.

Checkout Page

Update the code for the checkout page, src/routes/checkout/+page.svelte as follows:

<script>
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
  import { loadStripe } from '@stripe/stripe-js';
  import { PUBLIC_STRIPE_KEY } from '$env/static/public';
  import { Elements, PaymentElement } from 'svelte-stripe';
  import Medusa from '@medusajs/medusa-js';

  let stripe = null;
  let clientSecret = null;
  let error = null;
  let elements;
  let processing = false;

  let cartId = null;

  onMount(async () => {
    stripe = await loadStripe(PUBLIC_STRIPE_KEY);
    const client = new Medusa();
    cartId = localStorage.getItem("cart_id");

    try {
      const { cart } = await client.carts.createPaymentSessions(cartId);
      const isStripeAvailable = cart.payment_sessions?.some(
        (session) => session.provider_id === 'stripe'
      );

      if (!isStripeAvailable) return;

      const { cart: updatedCart } = await client.carts.setPaymentSession(cartId, {
        provider_id: 'stripe',
      });

      setClientSecret(updatedCart.payment_session.data.client_secret);
    } catch (error) {
      console.error('Error creating payment session:', error);
    }
  });

  function setClientSecret(secret) {
    clientSecret = secret;
  }

  async function submit() {
    // avoid processing duplicates
    if (processing) return

    processing = true

    // confirm payment with stripe
    const result = await stripe.confirmPayment({
      elements,
      redirect: 'if_required'
    })

    // log results, for debugging
    console.log({ result })

    if (result.error) {
      // payment failed, notify user
      error = result.error
      processing = false
    } else {
      // payment succeeded, redirect to "thank you" page
      const client = new Medusa();
      const response = await client.carts.complete(cartId);
      console.log(response);
      goto('../thanks')
    }
  }
</script>

<h2>Checkout</h2>

{#if error}
  <p class="error">{error.message} Please try again.</p>
{/if}

{#if clientSecret}
  <Elements
    {stripe}
    {clientSecret}
    variables={{ colorPrimary: '#000' }}
    rules={{ '.Input': { border: 'solid 1px #000' } }}
    bind:elements
  >
    <form on:submit|preventDefault={submit}>
      <PaymentElement />

      <button disabled={processing}>
        {#if processing}
          Processing...
        {:else}
          Pay
        {/if}
      </button>
    </form>
  </Elements>
{:else}
  Loading...
{/if}

<style>
  h2 {
    padding: 4rem 0 2rem 0;
    text-align: center;
    font-size: 3rem;
  }

  .error {
    color: tomato;
    margin: 2rem 0 0;
  }

  form {
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto;
  }

  button {
    padding: 0.5rem 0;
    border: solid 1px #000;
    color: #FFF;
    background: #000;
    font-size: 1rem;
    margin: 1rem 0;
    font-family: inherit;
  }

  button:hover {
    font-weight: 600;
    cursor: pointer;
  }
</style>

Complete your cart by clicking on Proceed to Checkout button and visit the checkout page, localhost:5173/checkout to view the changes.

Success Page

Make a payment using the Stripe Test card 4242 4242 4242 4242 and this will lead to the success page.

<h2>Success!</h2>
<section id="success">
    <p>Payment was successfully processed.</p>
</section>


<style>
    h2 {
        text-align: center;
        font-size: 3rem;
        padding: 4rem 0 2rem 0;
    }

    #success {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8rem;
        max-width: 24rem;
        padding: 0 0.5rem;
    }

    p {
        text-align: center;
    }
</style>

Update Storefront Environment Variables

In this step you will replace the hardcoded URL to the Medusa backend with an environment variable, MEDUSA_BACKEND_URL in all your storefront files. This will be useful when deploying the storefront in the next steps.

Open up .env in your Sveltekit Storefront and and add the following:

PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000

Open up all the files in your storefront project folder where the URL to the Medusa backend is hardcoded. Add the following import statement at the top of each file:

<script>
import { PUBLIC_MEDUSA_BACKEND_URL } from '$env/static/public';
//...

Replace every occurence of http://localhost:9000 with PUBLIC_MEDUSA_BACKEND_URL. The files are src/routes/+page.js, src/routes/+page.svelte, src/routes/cart/+page.svelte, and src/routes/checkout/+page.svelte.

The following is the updated src/routes/+page.js:

import { MEDUSA_BACKEND_URL } from '$env/static/public'

/** @type {import(./$types').PageLoad} */
export async function load({ fetch }) {
    const res = await fetch(`${PUBLIC_MEDUSA_BACKEND_URL}/store/products`);
    const payload = await res.json();
    return { payload };
}

The updated src/routes/+page.svelte will be as follows:

<script>
  /** @type {import('./$types').PageData} */
  export let data;

  import { onMount } from "svelte";
  import { PUBLIC_MEDUSA_BACKEND_URL } from '$env/static/public';

  onMount(async () => {
    fetch(`${PUBLIC_MEDUSA_BACKEND_URL}/store/carts`, {
      method: "POST",
      credentials: "include",
    })
      .then((response) => response.json())
      .then(({ cart }) => {
        localStorage.setItem("cart_id", cart.id);
        console.log("The cart ID is " + localStorage.getItem("cart_id"));
      });
  });

  function addProductToCart(variant_id) {
    const id = localStorage.getItem("cart_id");
    fetch(`${PUBLIC_MEDUSA_BACKEND_URL}/store/carts/${id}/line-items`, {
      method: "POST",
      dentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        variant_id,
        quantity: 1,
      }),
    }).then((response) => response.json());
    //.then(({ cart }) => setCart(cart));
  }
</script>
<!--...-->

The updated src/routes/cart/+page.svelte will be as follows:

<script>
    import { onMount } from "svelte";
    import { PUBLIC_MEDUSA_BACKEND_URL } from '$env/static/public';

    let data;
    let email;
    let total;
    let items = [];

    onMount(async () => {
        const id = localStorage.getItem("cart_id");
        const res = await fetch(`${PUBLIC_MEDUSA_BACKEND_URL}/store/carts/${id}`, {
            credentials: "include",
        });
        data = await res.json();
        items = data.cart.items;
        total = data.cart.total;
    });

    function addCustomer() {
        const id = localStorage.getItem("cart_id");
        fetch(`${PUBLIC_MEDUSA_BACKEND_URL}/store/carts/${id}`, {
            method: "POST",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                email: email,
            }),
        })
            .then((response) => response.json())
            .then(({ cart }) => {
                console.log("Customer ID is " + cart.customer_id);
                console.log("Customer email is " + cart.email);
            });
    }
</script>
<!--...-->

The following is the updated src/routes/checkout/+page.svelte:

<script>
  import { goto } from '$app/navigation';
  import { onMount } from 'svelte';
  import { loadStripe } from '@stripe/stripe-js';
  import { PUBLIC_STRIPE_KEY } from '$env/static/public';
  import { PUBLIC_MEDUSA_BACKEND_URL } from '$env/static/public';
  import { Elements, PaymentElement } from 'svelte-stripe';
  import Medusa from '@medusajs/medusa-js';

  let stripe = null;
  let clientSecret = null;
  let error = null;
  let elements;
  let processing = false;

  let cartId = null;

  onMount(async () => {
    stripe = await loadStripe(PUBLIC_STRIPE_KEY);
    const client = new Medusa({ baseUrl: PUBLIC_MEDUSA_BACKEND_URL, maxRetries: 3 });
    cartId = localStorage.getItem("cart_id");

    try {
      const { cart } = await client.carts.createPaymentSessions(cartId);
      const isStripeAvailable = cart.payment_sessions?.some(
        (session) => session.provider_id === 'stripe'
      );

      if (!isStripeAvailable) return;

      const { cart: updatedCart } = await client.carts.setPaymentSession(cartId, {
        provider_id: 'stripe',
      });

      setClientSecret(updatedCart.payment_session.data.client_secret);
    } catch (error) {
      console.error('Error creating payment session:', error);
    }
  });

  function setClientSecret(secret) {
    clientSecret = secret;
  }

  async function submit() {
    // avoid processing duplicates
    if (processing) return

    processing = true

    // confirm payment with stripe
    const result = await stripe.confirmPayment({
      elements,
      redirect: 'if_required'
    })

    // log results, for debugging
    console.log({ result })

    if (result.error) {
      // payment failed, notify user
      error = result.error
      processing = false
    } else {
      // payment succeeded, redirect to "thank you" page
      const client = new Medusa({ baseUrl: PUBLIC_MEDUSA_BACKEND_URL, maxRetries: 3 });
      const response = await client.carts.complete(cartId);
      console.log(response);
      goto('../thanks')
    }
  }
</script>

<!--...-->

Deployment

In this section, we will look into the deployment of the ecommerce app. We will start off with the deployment of the Medusa Server and Admin then look into the deployment of the Sveltekit storefront.

Deploy Medusa Server

We will deploy the Medusa Backend Server on Railway. Railway provides a free trial (no credit card required) that allows you to deploy your Medusa backend along with PostgreSQL and Redis databases. This is useful mainly for development and demo purposes. Sign up for a Railway account and proceed with the following steps.

Create GitHub Repo

Navigate to the Medusa server directory my-medusa-store in your local machine. Duplicate the folder and create a new GitHub repo based on this directory to handle all the config related to the server only.

Add Railway Configuration File

To avoid errors during the installation process, it's recommended to use yarn for installing the dependencies. Alternatively, pass the --legacy-peer-deps option to the npm command.

Add in the root of your Medusa server project the file, railway.toml, with the content based on the package manager of your choice:

Using yarn:

[build]
builder = "NIXPACKS"

[build.nixpacksPlan.phases.setup]
nixPkgs = ["nodejs", "yarn"]

[build.nixpacksPlan.phases.install]
cmds=["yarn install"]

Using npm:

[build]
builder = "NIXPACKS"

[build.nixpacksPlan.phases.setup]
nixPkgs = ["nodejs", "npm"]

[build.nixpacksPlan.phases.install]
cmds=["npm install --legacy-peer-deps"]

Configure Server for Production

Open the medusa-config.js file in your new server repo.

Update the following parts to enable caching using Redis.

Uncomment the inner part of the following section:

const modules = {
  /*eventBus:
    resolve: "@medusajs/event-bus-redis",

Uncomment the following section as well:

  // Uncomment the following lines to enable REDIS
  // redis_url: REDIS_URL

It then becomes:

//...
const modules = {
  eventBus: {
    resolve: "@medusajs/event-bus-redis",
    options: {
      redisUrl: REDIS_URL
    }
  },
  cacheService: {
    resolve: "@medusajs/cache-redis",
    options: {
      redisUrl: REDIS_URL
    }
  },
};

/** @type {import('@medusajs/medusa').ConfigModule["projectConfig"]} */
const projectConfig = {
  jwtSecret: process.env.JWT_SECRET,
  cookieSecret: process.env.COOKIE_SECRET,
  store_cors: STORE_CORS,
  database_url: DATABASE_URL,
  admin_cors: ADMIN_CORS,
  redis_url: REDIS_URL
};
//...

Since we are deploying the admin separately, disable the admin plugin's serve option.

const plugins = [
  // ...
  {
    resolve: "@medusajs/admin",
    /** @type {import('@medusajs/admin').PluginOptions} */
    options: {
      // only enable `serve` in development
      // you may need to add the NODE_ENV variable
      // manually
      serve: process.env.NODE_ENV === "development",
      // other options...
      autoRebuild: true,
      develop: {
        open: process.env.OPEN_BROWSER !== "false",
      },
    },
  },
]

This ensures that the admin isn't built or served in production. You can also change @medusajs/admin dependency to be a devdependency in package.json.

Also, change the build command to remove the command that builds the admin inside the package.json file:

"scripts": {
  // ...
  "build": "cross-env npm run clean && npm run build:server",
}
//...
"devDependencies": {
  //...
  "@medusajs/admin": "^7.1.11",
}

Commit your changes, and push them to your remote GitHub repository. Once your repository is ready on GitHub, log in to your Railway dashboard.

Create Project + PostgreSQL Database

If you are using Neon for your PostgreSQL database please skip this step.

On the Railway Dashboard, click on the New Project button and choose from the list the Deploy PostgreSQL option.

A new database will be created and, after a few seconds, you'll be redirected to the project page where you'll see the newly-created database.

Migrate local PostgreSQL database to Railway

If you are using Neon for your PostgreSQL database please skip this step.

Open your terminal and run the following command to dump the local database to file:

pg_dump medusa_db > medusa_db.sql

Copy the DATABASE_URL from your Railway Dashboard. Then export the database dump, medusa_db.sql into the new database on the remote Railway server:

psql DATABASE_URL < medusa_db.sql

Replace DATABASE_URL with the value from your Railway Dashboard.

Create the Redis Database

In the same project view, click on the Create button, choose the Database option and select Add Redis.

A new Redis database will be added to the project view in a few seconds. Click on it to open the database sidebar.

Deploy Medusa in Server Mode

In this section, you'll create a Medusa backend instance running in server runtime mode.

In the same project view, click on the Create button and choose the GitHub Repo option. If you still haven't given GitHub permissions to Railway, choose the Configure GitHub App option.

Choose the repository from the GitHub Repo dropdown.

Configure Backend Environment Variables

To configure the environment variables of your Medusa backend, click on the GitHub repo card and choose the Variables tab and add the following environment variables:

PORT=9000
JWT_SECRET=something
COOKIE_SECRET=something
DATABASE_URL=${{Postgres.DATABASE_URL}}
REDIS_URL=${{Redis.REDIS_URL}}
STORE_CORS=http://localhost:5173
ADMIN_CORS=http://localhost:7001
STRIPE_API_KEY=sk_test_XXXXXXXXXXXX

Notice that the values of DATABASE_URL and REDIS_URL reference the values from the PostgreSQL and Redis databases you created earlier.

For Neon users, insert the URL to your Postgres database hosted on Neon as the value to DATABASE_URL.

NOTE

The values for STORE_CORS and ADMIN_CORS will be updated after deploying the admin and storefront.
Use strong, randomly generated secrets for JWT_SECRET and COOKIE_SECRET.

Change Backend's Start Command

The start command is the command used to run the backend. You’ll change it to run any available migrations, then run the Medusa backend. This way if you create your own migrations or update the Medusa backend, it's guaranteed that these migrations run first before the backend starts.

Click on the GitHub repository's card, select the Settings tab and scroll down to the Deploy section. Click on the Start command button and paste the following command:

medusa migrations run && medusa start

Add Domain Name

Click on the Medusa server runtime card and select the Settings tab and scroll down to the Networking section. Either select Custom Domain or select Generate Domain to generate a random button.

Deploy Changes

At the top left of your project's dashboard page, there's a Deploy button that deploys all the changes you've made so far.

Click on the button to trigger the deployment. The deployment will take a few minutes before it's ready.

Test the Backend

Once the deployment is finished, you can access the Medusa backend on the custom domain/domain you've generated.

For example, you can open the URL <YOUR_APP_URL>/store/products which returns the products available on your backend.

Health Route

Access <YOUR_APP_URL>/health to get health status of your deployed backend.

Create Admin User

Railway’s CLI tool allows you to run commands locally, but using environment variables from your projects.

To create an admin user in your deployed backend, run the following commands in the root of your Medusa project.

Install the CLI tool as follows:

npm i -g @railway/cli

railway login --browserless

This will print a URL and a Pairing Code to the Terminal, which you can use to authenticate your CLI session. Follow the instructions to complete the authentication process.

Associate your Medusa server project, environment and service with your current directory:

railway link

Run this to create an admin

railway run npx medusa user --email prodadmin@medusa-test.com --password supersecret

Deploy Medusa Admin

We will deploy the Medusa Admin application on Cloudflare Pages.

Create GitHub Repo

Hosting providers like Cloudflare allow you to deploy your project directly from GitHub. This makes it easier for you to push changes and updates without having to manually trigger the update in the hosting provider.

NOTE:

Even though you are just deploying the admin, you must include the entire Medusa backend project in the deployed repository. The build process of the admin uses many of the backend's repos.

Navigate to the Medusa server directory my-medusa-store of your project folder in your local machine. Duplicate the directory and create a new GitHub repo based on this directory to handle all the config related to the admin only.

Configure Build Command

In the package.json file of your new Medusa Admin repo, add or change the build script for the admin:

"scripts": {
  //other scripts
  "build:admin": "medusa-admin build --deployment",
}

NOTE:

When using --deployment option, the backend's URL is loaded from the MEDUSA_ADMIN_BACKEND_URL environment variable. You will configure this environment variable in a later step.

Preparing Deployment

Select Create application then Pages then Connect to Git.

You will be prompted to sign in with your preferred Git provider.

Next, select the GitHub project for your Medusa Admin repo.

Once you have selected a repository, select Install & Authorize and Begin setup.

You can then customize your deployment in Set up builds and deployments.

Your project name will be used to generate your project's hostname.

Configure Build settings

Set the build command of your deployed project to use the build:admin command:

npm run build:admin

Set the output directory of your deployed project to build.

Add the environment variable MEDUSA_ADMIN_BACKEND_URL and set its value to the URL of your deployed Medusa backend, that is the URL you got in the previous step on Railway.

Save Configuration and Deploy Admin

After you have finished setting your build configuration, select Save and Deploy. Your project build logs will output as Cloudflare Pages installs your project dependencies, builds the project, and deploys it to Cloudflare’s global network.

When your project has finished deploying, you will receive a unique URL to view your deployed site.

Configure CORS on the Deployed Backend

To send requests from the admin dashboard to the Medusa backend, you must set the ADMIN_CORS environment variable on your backend to the admin's URL:

ADMIN_CORS=<ADMIN_URL>

Visit your Railway dashboard click on the GitHub repo card and choose the Variables tab to your deployed Medusa backend web service. Update the ADMIN_CORS environment variable.

Where <ADMIN_URL> is the URL of your admin dashboard that you just deployed on Cloudflare.

Then, redeploy your Medusa backend. Once the backend is running again, you can use your admin dashboard.

Log into Medusa Admin Dashboard

Visit the URL to your Medusa Admin and log in using the user you created in the previous steps.

If all is working you should be able to log in to your dashboard and see all the orders you made previously when testing the development version of your store.

Deploy Storefront

We will deploy the Sveltekit storefront on Cloudflare Pages.

Create GitHub repo

In your local machine, navigate to the folder, storefront containing your Sveltekit storefront source code. Duplicate the directory and create a new GitHub repo based on this directory.

SvelteKit Cloudflare Configuration

To use SvelteKit with Cloudflare Pages, you need to add the Cloudflare adapter to your application.

Install the Cloudflare Adapter in the root of your SvelteKit storefront folder by running:

npm i --save-dev @sveltejs/adapter-cloudflare

Include the adapter in svelte.config.js:

import adapter from '@sveltejs/adapter-cloudflare';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
  }
};

export default config;

Push the changes you made in your repo to GitHub.

Prepare Deployment via Cloudflare Dashboard

Select Create application then Pages then Connect to Git.

You will be prompted to sign in with your preferred Git provider.

Next, select the GitHub project for your Sveltekit storefront repo.

Once you have selected a repository, select Begin setup.

Configure Build Settings

You can then customize your deployment in Set up builds and deployments.

Your project name will be used to generate your project's hostname.

Select the new GitHub repository that you created and, in Set up builds and deployments, provide the following information:

Configuration Option	Value
Production branch	`main`
Framework preset	`SvelteKit`
Build command	`npm run build`
Build directory	`.svelte-kit/cloudflare`

Add the environment variables, PUBLIC_STRIPE_KEY for your Stripe Key and MEDUSA_BACKEND_URL for your Railway Medusa backend server URL.

Optionally, you can customize the Project name field. It defaults to the GitHub repository's name, but it does not need to match. The Project name value is assigned as your *.pages.dev subdomain.

Save Configuration and Deploy Storefront

After completing the configuration, click the Save and Deploy button.

You will see your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified.

Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit.

Additionally, you will have access to preview deployments, which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying them to production.

When your project has finished deploying, you will receive a unique URL to view your deployed site.

Configure CORS on the Deployed Backend

To send requests from the admin dashboard to the Medusa backend, you must set the STORE_CORS environment variable on your backend to the admin's URL:

STORE_CORS=<STORE_URL>

Visit your Railway dashboard click on the GitHub repo card and choose the Variables tab to your deployed Medusa backend web service. Update the STORE_CORS environment variable.

Where <STORE_URL> is the URL of your Sveltekit storefront that you just deployed on Cloudflare.

Then, redeploy your Medusa backend. Once the backend is running again, you can use your storefront.

Test Storefront

Visit the URL to your storefront in your browser. If all is working your storefront home page should appear with all the products from the Medusa backend.

Conclusion

To conclude, this tutorial has guided you through the process of building a full-stack ecommerce application using Medusa as the backend and Sveltekit for the frontend. You've learned how to:

Set up and configure a Medusa server
Create a Sveltekit storefront and integrate it with the Medusa backend
Implement core ecommerce functionalities like product listing, cart management, and checkout
Add Stripe as a payment provider
Style your storefront for a better user experience
Deploy your Medusa backend on Railway
Deploy your Medusa Admin on Cloudflare Pages
Deploy your Sveltekit storefront on Cloudflare Pages

By following this tutorial, you've gained valuable experience in creating a modern, composable ecommerce solution. The combination of Medusa's powerful backend capabilities and Sveltekit's efficient frontend framework provides a solid foundation for building scalable and customizable online stores.

This project serves as an excellent starting point for further customization and expansion. You can now add more features, optimize performance, and tailor the user interface to meet specific business requirements.

Remember that ecommerce development is an ongoing process, and you should continually update and improve your application based on user feedback and changing market needs. With the knowledge gained from this tutorial, you're well-equipped to tackle more complex ecommerce challenges and create innovative online shopping experiences.

Author

Mark Munyaka

GitHub: @Marktawa

Twitter: @McMunyaka

Hire Me

If you found this guide helpful and would like assistance in setting up your own Medusa-powered ecommerce store, I would be happy to help!
As an experienced Medusa, Sveltekit and, Next.js developer, I can provide the following services:

Initial setup and configuration of your Medusa backend
Design, setup and configuration of your Sveltekit storefront.
If you prefer the Medusa Next.js Starter, I can help set it up as well.
Deployment of your Medusa store on AWS, Railway, Digital Ocean and any other platform
Integration with Neon Postgres, Stripe, Meilisearch, SendGrid, and other plugins
Customization and branding of your store's design and functionality
Ongoing maintenance, updates, and feature enhancements
Performance optimization and scaling guidance

To discuss your project and get a quote, please feel free to contact me on markmunyaka@gmail.com or connect with me on LinkedIn or Discord. I look forward to hearing from you!

Build An Ecommerce Store from Scratch using Medusa and Nuxt: Part 02

Mark Munyaka — Sat, 24 Feb 2024 11:22:56 +0000

Introduction

Nuxt is a meta-framework built on top of Vue.js, a JavaScript library. It features SSR, SSG, SEO, File-System routing, Caching etc. It can be used to build ecommerce storefronts.

Medusa is a toolkit for developers to create digital commerce applications. It uses a Node.js backend with the core API, plugins, and modules installed through npm.

In this project, you will learn how an ecommerce store can be built using Nuxt for the frontend and Medusa for the backend. To do that, first, you will create a Nuxt project and set a few components, pages and layouts. Then, you will link the Nuxt project with a Medusa server to get the store products and display them on the home page including a product's page, and a product detail page.

This tutorial is Part 02 of the series. It focuses on the design of the Nuxt storefront.

Prerequisites

To follow along with the tutorial you need to have some knowledge of the following:

Basic understanding of HTML, CSS, and JavaScript
Basic understanding of Node.js and npm
Basic understanding of the command line
Knowledge of Vue and Nuxt is a bonus but not a requirement.
Knowledge of Medusa is a bonus but not a requirement.

In addition to knowing these tools, your computer system should have the following packages installed:

Node.js (v16 and above)
PostgreSQL. Alternatively, you can create a free PostgreSQL database with a Neon account. This tutorial will use a database created using Neon.
yarn (optional)
git (optional)

Make the storefront layout

Before connecting the Medusa server with the storefront, you need to add some components and pages to the storefront. Open the storefront’s project my-nuxt-storefront in your preferred code editor.

You should see the following directories:

my-nuxt-storefront
├── components
├── .editorconfig
├── .eslintrc.js
├── .git
├── .gitignore
├── node_modules
├── .nuxt
├── nuxt.config.js
├── package.json
├── pages
├── README.md
├── static
├── store
├── windi.config.ts
└── yarn.lock

You will be focusing mainly on the components and pages directories to design the layout for the storefront.

Components

Components are what make up the different parts of your page. They can be reused and imported into your pages, layouts, and even other components.

The storefront you are creating will have the following components:

Logo
Navbar
Footer
Product card

Go to the components directory and delete the default components that come with the Nuxt.js installation. Then add the following files.

Logo

Add components/App/Logo.vue.

<template>
  <div class="h-16 flex items-center">
    <div class="ml-4 flex lg:ml-0 lg:mr-8">
      <nuxt-link to="/">
        <img class="h-8 w-auto" src="https://i.imgur.com/y3yU55v.png" alt=""/>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppLogo'
}
</script>

Navbar

Add components/App/Navbar.vue.

<template>
  <div class="sticky top-0 z-20">
    <header class="relative bg-white">
      <nav class="px-4 sm:px-6 lg:px-8 border-b border-ui-medium flex items-center justify-between">
        <div class="flex items-center">
          <app-logo />
          <div class="hidden lg:flex lg:items-center">
            <div class="hidden flex-grow items-center justify-center lg:flex text-sm font-medium">
              <nuxt-link
                to="/"
                class="block mt-4 mr-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-gray-600 last:mr-0"
              >
                Home
              </nuxt-link>
              <nuxt-link
                to="/products"
                class="block mt-4 mr-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-gray-600 last:mr-0"
              >
                Products
              </nuxt-link>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-end">
          <div class="hidden lg:flex">
            <div class="inline-block relative text-left">
              <div>
                <button
                  class="inline-flex justify-center w-full px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:text-gray-600"
                  type="button"
                >
                  USA / USD
                </button>
              </div>
            </div><div class="relative inline-block text-left">
              <div>
                <button
                  class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-600"
                  type="button"
                >
                  Account
                </button>
              </div>
            </div>
          </div><div class="relative inline-block text-left">
            <div>
              <button
                class="inline-flex items-center justify-center w-full py-2 bg-white text-sm font-medium hover:opacity-1/2"
                type="button"
              >
                <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M14.9968 16.2273C14.9921 16.1189 14.9888 16.0004 14.9877 15.8734C14.9826 15.2497 15.0333 14.4053 15.2648 13.551C15.4962 12.6975 15.9164 11.8043 16.6719 11.123C17.4366 10.4333 18.5016 10 19.9419 10C21.3822 10 22.4472 10.4333 23.212 11.123C23.9674 11.8043 24.3877 12.6975 24.619 13.551C24.8506 14.4053 24.9012 15.2497 24.8961 15.8734C24.8951 16.0004 24.8917 16.1189 24.887 16.2273H27.8836C29.0776 16.2273 30.0056 17.2667 29.8708 18.4531L28.7344 28.4531C28.6196 29.4638 27.7644 30.2273 26.7472 30.2273H13.1366C12.1194 30.2273 11.2643 29.4638 11.1494 28.4531L10.013 18.4531C9.87822 17.2667 10.8062 16.2273 12.0002 16.2273H14.9968ZM23.8859 16.2273C23.8912 16.1186 23.8951 15.9971 23.8962 15.8652C23.9008 15.2957 23.8535 14.5493 23.6538 13.8126C23.454 13.0752 23.1098 12.3775 22.5422 11.8656C21.984 11.3622 21.1673 11 19.9419 11C18.7165 11 17.8999 11.3622 17.3416 11.8656C16.774 12.3775 16.4299 13.0752 16.23 13.8126C16.0303 14.5493 15.983 15.2957 15.9877 15.8652C15.9888 15.9971 15.9926 16.1186 15.9979 16.2273H23.8859ZM12.0002 17.2273H27.8836C28.4806 17.2273 28.9446 17.747 28.8772 18.3402L27.7408 28.3402C27.6834 28.8455 27.2558 29.2273 26.7472 29.2273H13.1366C12.628 29.2273 12.2004 28.8455 12.143 28.3402L11.0066 18.3402C10.9392 17.747 11.4032 17.2273 12.0002 17.2273ZM15.4874 20.0455C15.8388 20.0455 16.1237 19.7605 16.1237 19.4091C16.1237 19.0576 15.8388 18.7727 15.4874 18.7727C15.1359 18.7727 14.851 19.0576 14.851 19.4091C14.851 19.7605 15.1359 20.0455 15.4874 20.0455ZM25.0328 19.4091C25.0328 19.7605 24.7479 20.0455 24.3965 20.0455C24.045 20.0455 23.7601 19.7605 23.7601 19.4091C23.7601 19.0576 24.045 18.7727 24.3965 18.7727C24.7479 18.7727 25.0328 19.0576 25.0328 19.4091Z"
                    fill="black"
                  /></svg>
                <span>0</span>
              </button>
            </div>
          </div>
        </div>
      </nav>
    </header>
  </div>
</template>

<script>
export default {
  name: 'NavBar'
}
</script>

Footer

Add components/App/Footer.vue.

<template>
  <footer>
    <div class="bg-white px-4 pt-24 pb-4 sm:px-6 lg:px-8 border-t border-ui-medium flex items-center justify-between text-sm">
      <div class="flex items-center">
        <a class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700" href="/">Create return</a>
        <a class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700" href="/">FAQ</a>
        <a class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700" href="/">Terms &amp; Conditions</a>
      </div>
      <div class="flex items-center">
        <a href="https://www.github.com/medusajs" class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700">GitHub</a>
        <a href="https://www.twitter.com/medusajs" class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700">Twitter</a>
        <a href="https://discord.gg/ruGn9fmv9q" class="mr-3 last:mr-0 text-ui-dark hover:text-gray-700">Discord</a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'AppFooter'
}
</script>

ProductCard

Add components/ProductCard.vue.

<template>
  <div>
    <nuxt-link :to="`/products/${item.id}`">
      <div
        class="group relative"
      >
        <div class="w-full min-h-auto bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
          <div class="w-auto h-full object-center object-cover bg-gray-100">
            <img
              alt=""
              :src="item.thumbnail"
            >
          </div>
        </div>
        <div class="mt-4 flex justify-between">
          <h3 class="text-sm text-gray-700 font-normal">
            {{ item.title }}
          </h3>
          <p class="text-sm font-semibold text-gray-900">
            from {{ lowestPrice.amount/100 }} {{ lowestPrice.currency_code.toUpperCase() }}
          </p>
        </div>
      </div>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    item: {
      type: Object,
      default () {
        return {
          id: 1,
          title: 'Kitchen Table',
          thumbnail: 'https://picsum.photos/600/600',
          variants: [{ prices: [{ amount: 0 }] }]
        }
      }
    }
  },
  computed: {
    lowestPrice () {
      const lowestPrice = this.item.variants.reduce((acc, curr) => {
        return curr.prices.reduce((lowest, current) => {
          if (lowest.amount > current.amount) {
            return current
          }
          return lowest
        })
      }, { amount: 0 })

      return lowestPrice || { amount: 10, currency_code: 'usd' }
    }
  }
}
</script>

Pages

The pages directory contains your storefront views and routes. For this tutorial you will need only 3 pages:

Home page
Products page
Product detail page

In the pages directory, open the index.vue file and replace the code as follows:

<template>
      <div>
        <div class="bg-ui-light pb-12 lg:pb-0 w-full px-4 sm:px-6 lg:px-12">
          <div class="flex flex-col lg:flex-row items-center max-w-screen-2xl mx-auto">
            <div class="w-auto h-full object-center object-cover p-12">
              <img
                width="600"
                alt=""
                src="https://start.medusajs.com/static/9803c162c71fd1960d9d11253859c701/246b5/hero-merch.webp"
              >
            </div>
            <div>
              <h1 class="text-4xl">
                CLAIM YOUR MERCH
              </h1>
              <p class="mt-2 text-lg font-normal">
                Contribute to Medusa and receive free merch<br>as a token of our appreciation
              </p>
              <button class="btn-ui mt-4 min-w-full lg:min-w-0">
                Learn more
              </button>
            </div>
          </div>
        </div>

        <div
          v-if="products.length"
          class="container mx-auto px-8 py-16"
        >
          <div class="flex items-center justify-between mb-6">
            <p class="text-2xl font-semibold text-gray-700">
              Featured
            </p>
            <nuxt-link
              class="text-ui-dark flex items-center"
              to="/products"
            >
              <span class="mr-2 text-ui-dark">Browse all products</span>
              <svg
                width="16"
                height="8"
                viewBox="0 0 16 8"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M15.3536 4.35355C15.5488 4.15829 15.5488 3.84171 15.3536 3.64645L12.1716 0.464466C11.9763 0.269204 11.6597 0.269204 11.4645 0.464466C11.2692 0.659728 11.2692 0.976311 11.4645 1.17157L14.2929 4L11.4645 6.82843C11.2692 7.02369 11.2692 7.34027 11.4645 7.53553C11.6597 7.7308 11.9763 7.7308 12.1716 7.53553L15.3536 4.35355ZM0 4.5H15V3.5H0V4.5Z" fill="#89959C" />
              </svg>
            </nuxt-link>
          </div>
          <div class="grid grid-cols-4 gap-8">
            <ProductCard
              v-for="product in products"
              :key="product.id"
              :item="product"
            />
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
      name: 'IndexPage',
        data () {
        return {
          products: [{
            id: 1,
            title: 'Kitchen Table',
            thumbnail: 'https://picsum.photos/600/600',
            variants: [{ prices: [{ amount: 0, currency_code: 'usd' }] }]
          }]
        }
      },
    }
    </script>

    <style>
      .btn-ui {
        @apply py-2 px-4 bg-ui-dark text-white text-sm font-medium rounded-md shadow;
        @apply focus:outline-none focus:ring-2 focus:ring-ui-dark focus:ring-opacity-75 disabled:bg-ui-medium;
      }
    </style>

This page will be the home for your storefront. It is composed of a hero, header, and a grid configured to show only four products. The only thing to do here once you connect the storefront to the Medusa server will be to put the ProductCard component in a v-for loop to display the products.

Now, you need to create a new directory called products which will hold the products page, /pages/products/index.vue and the product detail page /pages/products/_id.vue. Add the following code to these pages.

Products page

Add /pages/products/index.vue

<template>
  <div class="container mx-auto p-8">
    <div class="w-full border-b border-ui-medium pb-6 mb-2 lg:mb-6 flex items-center justify-between">
      <h1 class="font-semibold text-3xl">
        All Products
      </h1>
    </div>

    <div
      v-if="products.length"
      class="grid grid-cols-4 gap-8 "
    >
      <ProductCard
        v-for="product in products"
        :key="product.id"
        :item="product"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductsIndex',
    data () {
    return {
      products: [{
        id: 1,
        title: 'Kitchen Table',
        thumbnail: 'https://picsum.photos/600/600',
        variants: [{ prices: [{ amount: 0, currency_code: 'usd' }] }]
      }]
    }
  },
}
</script>

This page is similar to the home page but without the hero header. Here you will show a grid with all the products sent by the Medusa server.

Product Detail page

Add /pages/products/_id.vue.

<template>
  <div class="container mx-auto p-8">
    <div class="flex flex-col lg:flex-row">
      <div class="lg:w-3/5 lg:pr-14">
        <div class="flex">
          <div class="hidden lg:flex flex-col items-center mr-4">
            <div class="w-auto h-full object-center object-cover px-4 space-y-4">
              <img
                v-for="image in product.images"
                :key="image.id"
                width="150"
                alt=""
                :src="image.url"
                class="cursor-pointer"
                @click="imageToShow = image.id"
              >
            </div>
          </div>

          <div class="h-auto w-full flex-1 flex flex-col rounded-lg overflow-hidden">
            <div class="w-auto h-full">
              <div
                v-for="image in product.images"
                :key="image.id"
              >
                <div v-if="image.id === imageToShow">
                  <img
                    alt=""
                    :src="image.url"
                    class=" w-full"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 lg:mt-0 lg:w-2/5 lg:max-w-xl">
        <h1 class="font-semibold text-3xl">
          {{ product.title }}
        </h1>
        <p v-if="product.variants" class="text-lg mt-2 mb-4">
          {{ product.variants[0].prices[0].amount/100 }} {{ product.variants[0].prices[0].currency_code }}
        </p>
        <p v-else>
          10 USD
        </p>
        <p class="font-light">
          {{ product.description }}
        </p>
        <div v-for="option in options" :key="option.id" class="mt-6">
          <div class="text-sm">
            <p class="font-medium mb-2">
              {{ option.title }}
            </p>
            <div>
              <button
                v-for="value in option.values"
                :key="value.id"
                class="bg-ui-dark text-white inline-flex items-center justify-center rounded-sm text-xs h-12 w-12 mr-2 last:mr-0 hover:bg-ui-dark hover:text-white"
              >
                {{ value.value }}
              </button>
            </div>
          </div>
        </div>
        <div class="inline-flex mt-12">
          <button class="btn-ui mr-2 px-12">
            Add to bag
          </button>
          <div class="flex items-center rounded-md px-4 py-2 shadow">
            <button>–</button>
            <span class="w-8 text-center">1</span>
            <button>+</button>
          </div>
        </div>
        <div class="mt-12">
          <div class="border-t last:border-b border-ui-medium py-6">
            <h3 class="-my-3 flow-root">
              <button
                class="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500"
                type="button"
                @click="showDetails = !showDetails"
              >
                <span class="font-medium text-gray-900">Details</span>
                <span class="ml-6 flex items-center">
                  <span>—</span>
                </span>
              </button>
            </h3>
            <div v-if="showDetails" class="pt-6">
              <div class="space-y-4 text-ui-dark text-sm">
                <ul class="list-inside list-disc space-y-2">
                  <li>Weight: {{ product.weight ? `${product.weight} g` : 'Unknown' }}</li>
                  <li>Width: {{ product.width ? `${product.width} cm` : 'Unknown' }}</li>
                  <li>Height: {{ product.height ? `${product.height} cm` : 'Unknown' }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  data () {
    return {
      showDetails: false,
      imageToShow: 'default_image',
      product: {
        id: 1,
        title: 'Medusa Coffee Mug',
        description: 'Every programmer\'s best friend.',
        thumbnail: '',
        variants: [{ prices: [{ amount: 0, currency_code: 'usd' }] }],
        images: [
          { id: 'default_image', url: 'https://picsum.photos/600/400' },
          { id: 'another_image', url: 'https://picsum.photos/600/400?id=100' }
        ]
      }
    }
  },
  computed: {
    lowestPrice () {
      const lowestPrice = this.product.variants.reduce((acc, curr) => {
        return curr.prices.reduce((lowest, current) => {
          if (lowest.amount > current.amount) {
            return current
          }
          return lowest
        })
      }, { amount: 0 })

      return lowestPrice || { amount: 10, currency_code: 'usd' }
    },
    options () {
      if (this.product.options) {
        return this.product.options.map((option) => {
          option.values = option.values.reduce((acc, curr) => {
            if (!acc.find(val => val.value === curr.value)) {
              return [...acc, { ...curr }]
            }
            return acc
          }, [])

          return option
        })
      }
    }
  }
}
</script>

On this page, you will display all the information related to a specific product. For example, sizes, images, price, description, variants, etc...

NOTE:

The three pages include a product object on the data function to showcase the design while there isn’t a server to send requests. Once you connect the storefront with the Medusa server, the data coming from the server will replace the data in the product object.

Layouts

Layouts are a great help when you want to have a basic structure for your Nuxt app. For example, a navbar and footer that will be shown on all the pages of the app. By default, a Nuxt project doesn't come with layouts, but it is easy to add them to your project.

To have a default layout on your storefront, create a layouts directory in the root of the project, and inside it, add a new file called default.vue with the following code:

<template>
  <div class="min-h-screen flex flex-col">
    <app-navbar />

    <main class="flex-1">
      <Nuxt />
    </main>

    <app-footer />
  </div>
</template>

<script>
export default {
  name: 'DefaultLayout'
}
</script>

Since the layout file was named default.vue, the layout will automatically be applied to all the pages on the storefront.

Styling

Replace the content of windi.config.ts in the root of your Nuxt.js project with the following:

import { defineConfig } from '@windicss/plugin-utils'

export default defineConfig({
  /**
   * Write windi classes in html attributes.
   * @see https://windicss.org/features/attributify.html
   */
  attributify: true,
  theme: {
    extend: {
      fontSize: {
        '2xs': '0.5rem'
      },
      maxWidth: {
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%'
      },
      maxHeight: {
        review: 'calc(100vh - 10rem)'
      },
      boxShadow: {
        DEFAULT:
          '0 2px 5px 0 rgba(60, 66, 87, 0.08), 0 0 0 1px rgba(60, 66, 87, 0.16), 0 1px 1px rgba(0, 0, 0, 0.12)',
        error:
          '0 2px 5px 0 rgba(255, 155, 155, 0.08), 0 0 0 1px rgba(255, 155, 155, 0.70), 0 1px 1px rgba(0, 0, 0, 0.12)'
      },
      colors: {
        green: {
          DEFAULT: '#56FBB1'
        },
        blue: {
          DEFAULT: '#0A3149'
        },
        ui: {
          light: '#F7F7FA',
          DEFAULT: '#EEF0F5',
          medium: '#D9DFE8',
          dark: '#89959C'
        }
      }
    }
  }
})

Change the Default Port

Change the port where the storefront app runs by default from 3000 to 3333. To do that, open the nuxt.config.js file and add the following right after the ssr property.

server: {
  port: 3333
},

Test your Nuxt storefront.

yarn dev

Visit localhost:3333 in your browser.

The storefront just shows static data for now. You will link the storefront with the Medusa server in the next part of the tutorial series.

Conclusion

In this part of the tutorial, we designed the layout and components for the Nuxt storefront. We created components like the navbar, footer, product card, and pages for the home, products listing, and product details. We also configured layouts to provide a consistent structure across pages. We styled the components using the Windi CSS utility library and updated some configuration settings like changing the default port.

By the end, we had a basic storefront design in place with static product data. In the next part, we will connect this Nuxt frontend to the Medusa backend to fetch and display real product information, transforming it into a fully functional ecommerce site.

Resources

Author

Mark Munyaka

GitHub: @Marktawa
Twitter: @McMunyaka

Sponsor

Buy Me A Coffee

Forem: Mark Munyaka

Build a Landing Page using Strapi and Vanilla HTML

Prerequisites

Create a Strapi project locally

Register an Admin User

Create a Contact collection type

Deploy to Strapi Cloud

Add API Permissions

Test the API

Create Contact Form

Deploy Contact Form to Cloudflare Pages

Create Full Landing Page

Deploy Full Landing Page

Conclusion

How to self-host Strapi on Railway

Pre-requisites

Hello, Strapi

Deploy to Railway using CLI

Test Strapi API hosted on Railway

Deploy to Railway using GitHub

Turn Strapi project into GitHub repo

Create a new Railway project

Add Variables

Generate a Domain for your project

Test Strapi API hosted on Railway

Conclusion

Resources

Getting Started with Go and the Web: Deploy to Railway

Getting Started with Go and the Web: Deploy to Railway

Before We Start

Hello, World! Go

Hello, World! Go on the Web

Deploy using Dockerfile and Railway CLI

Create and Upload GitHub Repo

Deploy to Railway

Create a new Railway project

Generate a Domain for your project

Serve Static files using Go

Update Deployment on Railway

Conclusion

References

Getting Started with Go and the Web: Hello, World!

Prerequisites

Hello World, Go

Hello World, Go on the Web

Dynamic Hello

Counter

Conclusion

Resources

Deploy a PHP site to Railway

Prerequisites

Create Home Page

Deploy to Railway

Update Site and Redeploy

Deploy a Static Sveltekit site to Railway

Prerequisites

Create Sveltekit app

Build site

Deploy to Railway

Update Site and Redeploy

Deploy a Static Nuxt site to Railway

Prerequisites

Create Nuxt app

Build site

Deploy to Railway

Update Site and Redeploy

Deploy a Static Astro Site on Railway

Deploying a Static Astro Site on Railway

Prerequisites

Create Astro app

Build Site

Deploy to Railway

Test Deployment

Update Site and Redeploy

Deploying a Static Next.js Site to Railway

Introduction

Prerequisites

Create Next app

Build Next App

Deploy to Railway

Create a `Contact` collection type