WordPress is the open source platform that powers the web. Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences. Gatsby is the fastest frontend for the headless web. And Nikole decided they should all play together.
Prerequisites:
To use the starter you should have a Medusa server running locally on port 9000. Check out Create a Medusa Server for a quick setup.
You will also need to set up a WordPress installation as outlined in the WordPress Theme repo.
- Create a new Gatsby project
You must have the gatsby cli installed - Homebrew / npm
gatsby new your-app https://github.com/you/your-app.git
# ie
gatsby new hacktoberfest2022-frontend https://github.com/websupergirl/hacktoberfest2022-frontend.git
- Check your Medusa Server
See instructions for Test Your Server if you have not already.
- Start the Development Build
You should now be able to start developing your site.
cd my-medusa-storefront
mv .env.template .env.development
gatsby develop
-
Open the source code and start editing!
Your site is now running at
http://localhost:8000!Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your store data. Learn more about using this tool in the Gatsby tutorial.Open the your app's directory in your code editor of choice and edit
src/pages/index.jsx. Save your changes and the browser will update in real time!
This site is currently available as a live demo, integrated with Netlify.
This project was created by Nikole Garcia Github - Twitter - Discord supernikole#2685
I wanted to combine a headless WordPress install with a headless e-commerce solution to see how it would work. The store itself is not very developed - most of my time was spent in the integration of the two, as I had never used MedusaJS or Gatsby before.
(for my mental sanity)
add cover photo for project and update readme
add basic wordpress blog pulling capabilities
modify readme to add better instructions