An open API service indexing awesome lists of open source software.

https://github.com/thecoder93/qwik-sanity-template


https://github.com/thecoder93/qwik-sanity-template

Last synced: 2 months ago
JSON representation

Awesome Lists containing this project

README

          

# Qwik + Sanity frontend example = 🩷

![alt text](https://imgur.com/pyg8cAL.jpg/)

This is an example [Sanity](https://www.sanity.io/) powered frontend for an hero page using [Qwik](https://qwik.dev/).

![Alt Text](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDJraTh0bGxlNDIxYWJkMXB5amRzdGwweXJrbnRrOXE2OTRkYnZtbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Z3tOBIqimgvKr6mn3a/giphy.gif)

## Setup

```
pnpm install
```

If you're running your own Sanity project, go to `sanity/config/sanity.client.ts` and change the following lines:

```
projectId: 'YOUR_PROJECT_ID',
dataset: 'NAME_OF_YOUR_DATASET',
apiVersion: 'VERSION_API_OF_SANITY'
```

You can locate the ID of your project in the header of the [management page for your project](https://manage.sanity.io/).

Then start the example app with:

```
pnpm run dev
```

The app should now be up and running at http://localhost:5173/ 🚀

# Qwik City App ⚡️

- [Qwik Docs](https://qwik.dev/)
- [Discord](https://qwik.dev/chat)
- [Qwik GitHub](https://github.com/QwikDev/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Vite](https://vitejs.dev/)

---

## Project Structure

This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.

Inside your project, you'll see the following directory structure:

```
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
└── routes/
└── ...
```

- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info.

- `src/components`: Recommended directory for components.

- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.

## Add Integrations and deployment

Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/).

```shell
pnpm qwik add # or `pnpm qwik add`
```

## Development

Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.

```shell
npm start # or `pnpm start`
```

> Note: during dev mode, Vite may request a significant number of `.js` files. 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 preview a production build locally and should not be used as a production server.

```shell
pnpm preview # or `pnpm preview`
```

## Production

The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.

```shell
pnpm build # or `pnpm build`
```