In 2023, spin up an e-commerce app in 60s with Vendure + Qwik. Fast enough?
Tags: typescript, graphql, vendure, qwik
Published: 2023-03-15 16:10:12


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c38b3hc2w9doiril3kqn.png)
[Vendure](https://www.vendure.io/) 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](https://qwik.builder.io/) 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:

1. Make sure you have [Docker installed](https://docs.docker.com/get-docker/)
2. Get the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) for VSCode
3. Clone the [qwik storefront starter](https://github.com/vendure-ecommerce/storefront-qwik-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`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zcikx646m6332zrxv6z.png)
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

```ts
const executeRequest = async (options: Options) => {
 const httpResponse = await fetch(ENV_VARIABLES.VITE_VENDURE_LOCAL_URL, options);
 return await extractTokenAndData(httpResponse);
};
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqfueydh548j02fgz2om.png)
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](http://localhost:8080/) and sign up for an account, you can verify your email after signup with [dev mailbox](http://localhost:3000/mailbox).

To run dev container without Vendure, disable postgres install in .devcontainer/Dockerfile and make following changes to .devcontainer/devcontainer.json 

```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](https://join.slack.com/t/vendure-ecommerce/shared_invite/zt-1exzio25w-vjL5TYkyJZjK52d6jkOsIA) + [qwik](https://qwik.builder.io/chat) 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