In 2023, spin up an e-commerce app in 60s with Vendure + Qwik. Fast enough?

#typescript #graphql #vendure #qwik

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"
}