Vendure is a modern, open-source headless commerce framework built with TypeScript & Nodejs. Vendure makes developer productivity a top priority. Combination of TypeScript and GraphQL provides end-to-end type safety. Content is delivered through its GraphQL API, leaving implementation of your storefront applications in technologies of your choice.
Qwik is a framework reimagined for the edge. You know React? You know Qwik. Developer experience is a core principle of Qwik. Built on top of JSX, functional components and reactivity, learning Qwik is a piece of cake.
Get started with Vendure + Qwik in under a minute! Steps required are:
- Make sure you have Docker installed
- Get the Dev Containers extension for VSCode
- Clone the qwik storefront starter
In the terminal, use this command to clone the starter and open the project folder in VSCode:
git clone https://github.com/vendure-ecommerce/storefront-qwik-starter.git && code storefront-qwik-starter
If you are using windows, line endings need to be 'LF' and not 'CRLF' for devcontainer-install-vendure.sh in VSCode. Reset any system changes to the files in the project folder with git checkout .
Change the fetch call in src/utils/api.ts to use local backend url
const executeRequest = async (options: Options) => {
const httpResponse = await fetch(ENV_VARIABLES.VITE_VENDURE_LOCAL_URL, options);
return await extractTokenAndData(httpResponse);
};
Open the folder in dev container to get a fully functioning local instance. Container installs postgres, populates the database with sample data and serves Vendure backend at port 3000 and Qwik storefront at port 8080. Default admin login: username- superadmin / password- superadmin
List of all endpoints:
Shop API: http://localhost:3000/shop-api
Admin API: http://localhost:3000/admin-api
Asset server: http://localhost:3000/assets
Dev mailbox: http://localhost:3000/mailbox
Admin UI: http://localhost:3000/admin
Qwik Storefront: http://localhost:8080/
Checkout qwik-storefront and sign up for an account, you can verify your email after signup with dev mailbox.
To run dev container without Vendure, disable postgres install in .devcontainer/Dockerfile and make following changes to .devcontainer/devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.241.1/containers/typescript-node
{
"name": "Node.js & TypeScript",
"build": {
"dockerfile": "Dockerfile",
// Update 'VARIANT' to pick a Node version: 18, 16, 14.
// Append -bullseye or -buster to pin to an OS version.
// Use -bullseye variants on local on arm64/Apple Silicon.
"args": {
"VARIANT": "18"
}
},
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Add the IDs of extensions you want installed when the container is created.
"extensions": ["dbaeumer.vscode-eslint", "ms-vscode-remote.remote-containers"]
}
},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [8080],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pnpm install",
// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
"remoteUser": "node",
"postStartCommand": "pnpm dev"
}
Join the communities at vendure + qwik and to learn more follow:
https://github.com/vendure-ecommerce/vendure
https://twitter.com/vendure_io
https://github.com/BuilderIO/qwik
https://twitter.com/QwikDev
https://github.com/vendure-ecommerce/storefront-qwik-starter
https://twitter.com/giorgio_boa
Top comments (1)
Hello @prasmalla , thanks for sharing this guide!
I followed this guide, upgraded the node version to 22 and encountered the following problem:
Could you advise how to fix this? Thanks in advance!