An e-commerce storefront for Vendure built with Qwik & Qwik City.
- Cart ✅
- Checkout flow ✅
- Search facet filters ✅
- Login ✅
- Account creation ✅
- Customer account management ✅
- SPA-mode navigation ✅
- Set up GraphQL code generation ✅
Contributions welcome!
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.
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`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`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>;
});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.
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.jsonQwik 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.
The resulting language should match your browser language. You can also override the language by adding ?lang=es to the URL.