Ionic is an open source toolkit that allows developers to create cross-platform apps that support a variety of mobile platforms, including Android and iOS. Developers can build with their frontend framework of choice, including Angular, Vue and React.
Medusa is an open source composable ecommerce platform that allows developers to create their own customizable and extendable online store. Medusa aims to provide developers with a great experience creating unique ecommerce stores.
In this tutorial, you’ll build an ecommerce app using Medusa and Ionic. This app can then be used on mobile phones such as Android, iOS and Windows phones, and can also be used as a progressive web app (PWA).
You can view the source code for the tutorial in this repository on GitHub.
Prerequisites
To use Medusa, you need Node.js (version 14+) installed on your machine. You can download it from the official Node.js website.
Set up the Medusa Server
First, install the Medusa CLI by running the following command in your terminal:
Next, run the following command to create a new Medusa server:
The
flag populates the database with demo data that can then be used as part of the ecommerce store later on.Copy to clipboard--seed
Finally, navigate to the
directory and start the server:Copy to clipboardecommerce-store-server
If the server runs successfully, you should see in your terminal an output similar to this:
Install Medusa Admin
Next up, it's time to setup and run the Medusa Admin dashboard. In a separate directory, run the following command:
Navigate into the newly-created
directory and install the dependencies for the project:Copy to clipboardmedusa-admin
Then, to run the admin, execute the following command in your terminal:
This runs the Medusa admin on
. Make sure the Medusa server is also still running.Copy to clipboardlocalhost:7000
If you open the Medusa Admin, you should see a login page.
Login screen for Medusa Admin
Since you created a Medusa server in the previous section with the
flag, a test user was created in addition to the demo data. So, you can use the emailCopy to clipboard--seed
and passwordCopy to clipboardadmin@medusa-test.com
to log in.Copy to clipboardsupersecret
The Medusa admin includes many functionalities such as viewing orders, managing products, configuring your store and regions, and much more!
You can try editing some of the existing demo products or adding new products in the Medusa admin.
Editing a product’s metadata in Medusa Admin
Initialize An Ionic Project
In this section, you’ll start building the Ionic app.
First, install the Ionic CLI by running the following command:
Then, in a separate directory, create a new Ionic app using the following command:
This tutorial uses React to create the Ionic app. This is specified as part of the command above with the
flag.Copy to clipboard--type
It usually takes several minutes to install all the dependencies required for the project.
Once the installation is done, change to the
directory and install the other dependencies required:Copy to clipboardecommerce-store
is used to send asynchronous requests to the Medusa server. This will allow you to perform operations such as fetching products.Copy to clipboardaxios
Testing the Ionic App
To test out the blank ionic app, run the following command in your terminal:
This runs a development Ionic server on
and the Ionic Lab onCopy to clipboardlocalhost:8100
. You can use the Ionic Lab to simulate how the app looks like on different devices such as iOS or Android.Copy to clipboardlocalhost:8200
Change Store CORS Variable
Since the Ionic app runs on port 8100, you need to update the Store CORS settings on your Medusa server in the
file to the following:Copy to clipboardmedusa-config.js
For more information, check out this official guide on updating your CORS settings.
Make sure to restart the Medusa server after making this change.
Create Product Item Cards
In this section, you’ll create a reusable component to display products as cards on the home page.
First, you need to create two interfaces, one for products and another for images. These interfaces will be used to define the structure of a product and an image.
To do that, create the file
with the following content:Copy to clipboardsrc/Interfaces.tsx
Next, you’ll create the reusable product item card component.
Now that the interfaces are defined and exported, it’s time to create the UI for the product item cards.
Create a new file
with the following content:Copy to clipboardsrc/components/ProductItemCard/ProductItemCard.tsx
Each card displays the image, title, type and price of a product. A product prop will be passed to the component, and its corresponding metadata is then displayed. The
interface is used to enforce the type of theCopy to clipboardProduct
prop.Copy to clipboardproduct
Create the Home layout
Now that the component for individual product cards has been created, it’s time to fetch and render the products in the Home layout screen.
The
andCopy to clipboardHome.tsx
files are created by default inCopy to clipboardHome.css
when you initialize an Ionic project. Create a new directoryCopy to clipboardsrc/pages
and moveCopy to clipboardsrc/pages/Home
andCopy to clipboardHome.tsx
into theCopy to clipboardHome.css
directory.Copy to clipboardsrc/pages/Home
Edit the Header
If you open the
file and take a look at the returned JSX, you'll see a header has automatically been added for you. You can replace the text nested in the componentCopy to clipboardsrc/pages/Home/Home.tsx
with the name of your ecommerce store. For example:Copy to clipboardIonTitle
Fetch Products from the Medusa Server
Create the file
with the following content:Copy to clipboardsrc/server-url.js
It’s useful to define the base URL of the Medusa server in one file. Then, if the port or URL needs to be updated, you only need to update the URL in this file.
If you’re testing on a mobile device, the URL should be changed to your machine’s IP.
Next, in
, replace the imports at the beginning of the file with the following:Copy to clipboardsrc/pages/Home/Home.tsx
Then, create a state variable inside the
component to store the products:Copy to clipboardHome
And add the following after creating the state variable:
With
, the Home component will fetch the products from the server when the screen first opens. A request is sent withCopy to clipboarduseEffect
to the List Products endpoint. Then, the result is used to set theCopy to clipboardaxios
state variable.Copy to clipboardproducts
Create A Grid of Products
Next up, it’s time to create a grid of product items using the
component.Copy to clipboard<IonGrid>
Still in
, add the following within theCopy to clipboardsrc/pages/Home/Home.tsx
element in the returned JSX, replacing theCopy to clipboard<IonContent>
component:Copy to clipboard<ExploreContainer>
This grid renders each product using the
component. Two products are displayed per row, but if you’d like to alter this to a single product per row, update theCopy to clipboardProductItemCard
prop for theCopy to clipboardsize
element toCopy to clipboardIonCol
. For more information on grids in Ionic, be sure to take a look at the official documentation.Copy to clipboard12
Add the CSS
Change the content of
to add some helpful styling:Copy to clipboardsrc/pages/Home/Home.css
Testing the Home Screen
Make sure that the Medusa server is still running and re-run the Ionic server if it’s not still running.
If you open the app now in Ionic lab, you should see on the Home screen the products fetched from your Medusa server.
Please note that the screenshot shown is in dark mode due to system preferences. If you use light mode, the screen will look different.
Home screen for the app, listing the products in a grid display
Create the ProductDetail Screen
In this section, you’ll create the
screen. This screen will display the individual product’s information and image.Copy to clipboardProductDetail
Create the file
with the following content:Copy to clipboardsrc/pages/ProductDetailPage/ProductDetailPage.tsx
In this page, the product ID is retrieved from the route parameters. Then, the
library is used to send a request to the Retrieve Product endpoint on the Medusa server to retrieve the individual product’s data. Then, theCopy to clipboardaxios
state variable is set using the response of the request.Copy to clipboardproduct
Next, create the file
with the following content:Copy to clipboardsrc/pages/ProductDetailPage/ProductDetailPage.css
Add a New Route
To actually use the new screen, it must be added as a new route in the app.
First, import the
component inCopy to clipboardProductDetailPage
:Copy to clipboardsrc/App.tsx
Then, add the new route into the list of routes defined in
:Copy to clipboardApp
Test Product Details Screen
While the Medusa and Ionic development servers are still running, open the Ionic Lab in your browser and click on one of the products in the home screen. A new screen opens showing the product’s details.
Show Add to Cart Notification
In this section, you’ll add a simple toast notification when the Add to Cart button is clicked. This doesn’t actually add the product to cart but only simulates the functionality.
In the
file, add the following after the creation of theCopy to clipboardsrc/pages/ProductDetailPage/ProductDetailPage.tsx
state variable to create a new state variable managing the visibility of the toast notification:Copy to clipboardproduct
Then, add an
component in the returned JSX. It should be placed withinCopy to clipboardIonToast
and after theCopy to clipboardIonContent
component:Copy to clipboardIonCard
Finally, change the Add to Cart button to add an
event handler:Copy to clipboardonClick
Now, whenever the button is clicked, the value of
is set toCopy to clipboardshowToast
to show the toast notification.Copy to clipboardtrue
Testing the Notification
While the Medusa and Ionic development servers are still running, on the details screen of one of the products click the Add to Cart button. A toast notification will then be shown for a few seconds indicating that the product was added to cart.
What’s Next?
By following this tutorial, you’ve successfully connected your Ionic app to your Medusa server, and fetched products from the server.
More features can be added using your Medusa server in your Ionic app including:
- Adding cart functionalities that allows the customer to add items to their carts and manage its content.
- Implement the Checkout flow to allow customers to place an order
- Integrating a payment provider such as Stripe
Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.
Share this post
Try Medusa
Spin up your environment in a few minutes.
