How to build a Medusa Webshop with one command?
Tags: medusa, opensource, beginners, ecommerce
Published: 2023-04-18 21:29:01

<!-- wp:heading -->
<h2>Introduction</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With the growth of the internet and the evolution of technologies, there is a need for businesses dealing in the ecommerce sector to remain competitive by keeping up with the latest trends in the area. Medusa is a popular open source headless ecommerce solution developed recently, scalable, and flexible making it one of the best choices for building an ecommerce website. It comes with two storefronts NextJs and Gatsby from which you can choose one or use a different stack for your storefront since Medusa has a composable architecture allowing you to use different technologies for your front and backend hence giving the possibility to fully customize your store and creating a store that will fit your needs.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this article, you will get started with Medusa by building your first headless store with a single command.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Why Medusa?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Medusa is an <a href="https://www.learn-dev-tools.blog/what-does-open-source-software-mean-a-beginners-guide/">open source</a> user and developer-friendly platform for building incredible webshops. With over <a href="https://github.com/medusajs/medusa" target="_blank" rel="noreferrer noopener">17.8k stars on GitHub</a>, its architecture allows you to build your online commerce shop with any framework of your choice that is developers have full control over their tech stack and the logic behind the commerce features. Besides that, it offers multi-regional support, advanced features for promotion and RMA flows, a user-friendly admin interface, and a community to support users.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to Build a Medusa Webshop?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You will learn how to build your first webshop with just a single Medusa command. However make sure you have the following elements installed and working properly:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><a href="https://nodejs.org/" target="_blank" rel="noreferrer noopener">Node.js</a> version 16 or latest. To check your Node.js version open your terminal or command line and run <strong>node -v. </strong>If you don’t have Node installed, then head to the <a href="https://nodejs.org/en/">official website</a>, and follow the instructions to get it running on your OS&nbsp;</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="https://git-scm.com/" target="_blank" rel="noreferrer noopener">Git</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>A package Manager(<a href="https://yarnpkg.com/" target="_blank" rel="noreferrer noopener">Yarn</a> or <a href="https://www.npmjs.com/" target="_blank" rel="noreferrer noopener">Npm</a>)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Medusa CLI</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Now let’s get started. The first step will be to install the <code>Medusa CLI</code>. You can’t use Medusa without installing its command line. Run the following command to get it set up:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>yarn global add @medusajs/medusa-cli</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Or</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm install @medusajs/medusa-cli -g</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Upon installing the CLI, check the version by running the following command in your terminal</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>medusa -v&nbsp;</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If you ever encounter errors installing the CLI then visit this Medusa <a href="https://docs.medusajs.com/troubleshooting/cli-installation-errors" target="_blank" rel="noreferrer noopener">troubleshooting guide</a> to get everything up.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Creating your Webshop with create-medusa-app</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Medusa is divided into three main parts:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Backend&nbsp; - It’s the commerce engine</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Storefront - The actual webshop</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Admin Dashboard - An application to manage your store(add/remove products, collections, payment methods, manage customers…)<br></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4>Step 1: Install your Webshop with create-medusa-app</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Open a terminal in your desired directory and run the following command:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npx create-medusa-app</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>NB: When you install your project with this command, it comes with <a href="https://tailwindcss.com" target="_blank" rel="noreferrer noopener">Tailwind CSS</a> </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Step 2: Specify the project name</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You need to specify the name of your webshop or leave the default value <code>my-medusa-store</code>. Here we will name the store <code>my-headless-store</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>? Where should you project be installed? . my-headless-store</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":4} -->
<h4>Step 3: Choose a Backend starter</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once you have named your store, the next step is to choose a <a href="https://docs.medusajs.com/development/backend/install" target="_blank" rel="noreferrer noopener">Medusa starter</a>. Here we will be using <code>medusa-starter-default</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>? Which Medusa starter would you like to install? …
❯ medusa-starter-default</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This Medusa starter contains admin plugins, which will allow you to later access the admin dashboard. All the resources for the backend will be installed in the backend directory</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Step 4: Choose a Storefront starter</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The next consists of choosing the Medusa starter for your storefront. Here we will be using the NextJS starter&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>? Which storefront starter would you like to install?
❯ Next.js Starter</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Your <a href="https://docs.medusajs.com/starters/nextjs-medusa-starter">storefront</a> will be installed in the storefront directory.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now you need to wait until your project sets up completely before testing your store.&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Step 5: Test your store</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Upon installing all components of your project, you will see find three folders in your project directory.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Admin</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Backend</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Storefront</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>To start each component of your project navigate to each component root and run the commands as follows:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Your project is ready. The available commands are:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// Medusa API
cd my-headless-store/backend
yarn start

// Medusa Admin
cd my-headless-store/admin
yarn start

// Storefront
cd my-headless/storefront
yarn dev</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To view your store and <a href="https://docs.medusajs.com/admin/quickstart" target="_blank" rel="noreferrer noopener">admin dashboard</a>, open your favourite browser and type <code>localhost:7000</code> and <code>localhoat:8000</code> in the address bar respectively</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Your store should look like the image below:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":443,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://www.learn-dev-tools.blog/wp-content/uploads/2023/04/storefrontmedusa-jpg.webp" alt="Medusa Storefront" class="wp-image-443"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And your dashboard:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":442,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.learn-dev-tools.blog/wp-content/uploads/2023/04/adminmedusa-1024x552.webp" alt="How to build a Medusa Webshop with one command? - Medusa dashbaord" class="wp-image-442"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>To access the dashboard, use</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><code>admin@medusa-test.com</code> as email</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><code>supersecret</code> as password</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Well, if you have reached this stage that means you have successfully set up a basic webshop with Medusa however if you run into any trouble reach out on this website or reach out to the <a href="https://discord.gg/F87eGuwkTp" target="_blank" rel="noreferrer noopener">Medusa Discord channel</a> for further assistance.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Hopefully, you have learnt how to build a basic store with Medusa, now you need to customize your store and add plugins and services like:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Payment methods with <a href="https://docs.medusajs.com/plugins/payment/klarna" target="_blank" rel="noreferrer noopener">Klarna</a>, <a href="https://docs.medusajs.com/plugins/payment/paypal" target="_blank" rel="noreferrer noopener">Paypal</a>,  or <a href="https://docs.medusajs.com/plugins/payment/stripe" target="_blank" rel="noreferrer noopener">Stripe</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Notification services with <a href="https://docs.medusajs.com/plugins/notifications/sendgrid" target="_blank" rel="noreferrer noopener">SendGrid</a>, <a href="https://docs.medusajs.com/plugins/notifications/mailchimp" target="_blank" rel="noreferrer noopener">Mailchimp</a> or Twilio SMS</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Search functionality with Algolia or MeiliSearch</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>File upload Services with S3, Space or MinIO</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Shipping method.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Gift cards</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Just head to the full <a href="https://docs.medusajs.com" target="_blank" rel="noreferrer noopener">Medusa Documentation</a> to get the necessaire instructions to fulfil each task.  Equally, feel free to sign up for our newsletter in order to get the latest ecommerce related content. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->