Hands-On Experience: eCommerce Store with Astro?
Astro🚀 has been a hot topic since its release in June 2022, especially because it is extremely fast. So it was a no-brainer to choose which framework we should go with next for our series of minimal eCommerce boilerplates titled ‘dounut’.
3 minutes
The main goal behind the dounut series of boilerplates is to make it as easy as possible to start with Crystallize, regardless of the frontend frameworks you are using. These boilerplates introduce how to fetch data, manage carts, and push orders using Crystallize. The tech stack here is as follows:
- Astro - the frontend framework,
- Tailwind - for the styling,
- Crystallize - for the headless commerce backend.
You can check the DEMO store here and the appropriate documentation here.
If you work with JavaScript frameworks, you have probably heard of Astro. It has been one of the most talked about frameworks last year. Performant and fast are two words that I have heard people use when describing Astro. Astro is HTML-first and it ships with zero JS by default (you can customize this based on your needs, of course!). It includes component-based architecture (referred to as Islands), seamless integration with existing frameworks, built-in optimizations, and supports both static site generation (SSG) and server-side rendering(SSR).
One of the best things about working with Astro was how easy it is to get started. The framework itself is very intuitive and has very comprehensive documentation.
Since this boilerplate is made as an entry point to Crystallize, we have made sure that it is simple to use. It contains a frontpage, individual product pages, a cart, and a checkout page. The frontpage here is a simple grid that you create in Crystallize. Please note the checkout process involves a fake method, as we wanted to keep it as minimal as possible.
For a more complete boilerplate with a full cart, checkout, my page, etc., you can look at our Remix eCommerce boilerplate or the Next.js eCommerce boilerplate. The service API code can be found there and re-used in the Astro example as well.
To get started, you first need to clone the GitHub repository. Simply run the following command:
git clone <https://github.com/CrystallizeAPI/dounut-astro>Once the repository is cloned, you must install the packages required to run the project.
npm installNow you have installed the packages and are ready to run the project locally. This will run the project on http://localhost:4321/. Point your browser to that address, and you should see the project running locally.
npm run devThat is it. Now you can start making it yours.
The files to mention here are the following:
- src/pages/index.route, this is the route for the front page.
- src/pages/shop/[product].astro, here you have the product page, which uses dynamic routing.
- src/pages/cart.astro and src/pages/checkout.astro are, respectively, for the cart and the checkout.
- src/layouts/Layout.astro, this is a global layout. Here, you tweak the header, footer, etc.
As mentioned earlier, the PLP (Product Landing Pages) are resolved using dynamic routing. The syntax in Astro is to use the [brackets] in the directory name. That will automatically give you a route with the dynamic element in brackets.
All the queries that are being used to fetch data from Crystallize can be found in the use-cases/queries folder. I would also recommend playing around with the queries in the GraphQL playground to get a better idea of the different fields an item can contain.
It was very straightforward to get started with Astro. If you are a fan of another framework like React, Vue, or Svelte, there are built-in integrations for all of these and more so you do not need to worry about learning a whole new framework. Deploying the project was a breeze as well. We chose to go with Vercel, but there are guides for deploying an Astro project, so you can choose your preferred static hosting platform without hassle.
Overall, I would recommend trying out Astro. Feel free to use this boilerplate as an entry point to both Astro and Crystallize, and if you have any feedback or queries, feel free to reach out to us in the Community Slack channel.
Schedule a 1-on-1 demo so we can help you understand the ins and outs of our Astro boilerplate. Or, why not START building for FREE with Crystallize.
👇More Framework Templates.
Hands-On Experience: How to Build an eCommerce Store with SvelteKit?
Do you want to build an eCommerce storefront using SvelteKit, Houdini, Tailwind, and with product information from the Crystallize GraphQL API? Well, look no further. We have created an open-source boilerplate that connects the dots for this stack.
Hands On Experience: How to Build an eCommerce Store with Next.js?
But first, a background story to give you context. I didn't take the path most Computer Science students take once they graduate. At some point during my college career, while coding my brains out in Java, C++, and assembly, I decided that being a full-time developer was not for me.
To be fair, I hadn't known what to do with myself even before college. I’d always liked writing, but you couldn’t get paid for that. (Right?)
As the Internet became more popular, I’ve enjoyed building homemade websites in HTML+CSS, learned a great deal about how to use search engines, connected with people worldwide, and even bought books and Star Trek memorabilia off eBay.
Therefore, the elders in my life had nudged me toward Computer Science, saying I’d be sure to make a lot of money once I graduated. I’d started with programming classes in high school, then continued with that path into college. And while I kept up with my coursework, I was never all that into coding for coding’s sake. It wasn’t something I itched to do in or out of the classroom.
As a result, my career path has been colorful: tech support, technical training, business analysis, and project management. I once had a job helping developers who used my company’s SaaS and APIs to get up and running and troubleshoot their programming issues. But by far, my favorite thing to do has always been technical writing and documentation. I enjoyed writing articles for the company website, for the knowledge base, you name it.
It turned out I could get paid for writing. Who would’ve thunk it?
I like writing so much that I’ve done a fair bit of it outside work as well. It’s been mostly for myself and my own fun, but I was able to get some work self-published under a pen name.
Now I’m doing technical writing full-time. Although I enjoy every second of it and wouldn’t want things any other way, there’s no denying that my technical side has atrophied a bit. It's super-hard for a full-time developer to keep up with all the latest technological trends, never mind someone who isn’t constantly immersed in it.
So, every once in a while, I like to dip my toes back into that water to learn what’s going on. It helps me to write better documentation when I know firsthand what’s important from the developer’s perspective.
On one occasion, I wanted to see if I could deploy one of the Crystallize boilerplates myself. And if I wanted to later on, I could eventually customize the boilerplate to sell my short stories and novels without having to rely on the big A or the big G.
What follows is a nice bit of hands-on experience. How easy or hard was it for a beginner like me to pull off?
Hands-On Experience: Remix.run eCommerce Starter
Remix is getting quite some attention lately, and being in the eCommerce space, it has caught our eye.