Vendure Qwik Storefront Starter️
An e-commerce storefront for Vendure built with Qwik & Qwik City.
Core Web Vitals
To do
- Cart
✅ - Checkout flow
✅ - Search facet filters
✅ - Login
✅ - Account creation
✅ - Customer account management
✅ - SPA-mode navigation
✅ - Set up GraphQL code generation
✅
Contributions welcome!
Development
Development mode uses Vite's development server. During development, the dev command will server-side render (SSR) the output.
npm start # or `yarn start`Note: during dev mode, Vite may request a significant number of
.jsfiles. This does not represent a Qwik production build.
Preview
The preview command will create a production build of the client modules, a production build of src/entry.preview.tsx, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
npm run preview # or `yarn preview`Production
The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
npm run build # or `yarn build`i18n
Marking string for translation
Any string can be marked for translation by using the $localize template function like so:
export default component$((props: { name: string }) => {
return <span>{$localize`Hello ${props.name}!`}</span>;
});Extracting string for translation
The first step in translation is to build the application. Once the artifacts are build the strings can be extracted for translation.
npm run build.client
npm run i18n-extractThe result of the commands is src/locale/message.en.json.
Translating strings
Take the resulting string and send them for translation. Produce a file for each language. For example:
src/locale/message.en.json # Original strings
src/locale/message.es.jsonSorting translations
Qwik hashes bundles based on the content of the files. This means that if a file changes, the order of i18n translations will be lost and can be difficult to manage manually.
npm run i18n-sortThe i18n-sort script will sort by first appearance in the src folder to keep a consistent order.
Testing translations
The resulting language should match your browser language. You can also override the language by adding ?lang=es to the URL.