mirror of
https://github.com/Lissy93/personal-security-checklist.git
synced 2024-09-27 19:55:40 +00:00
175 lines
7.1 KiB
Markdown
175 lines
7.1 KiB
Markdown
# Qwik City App ⚡️
|
|
|
|
- [Qwik Docs](https://qwik.builder.io/)
|
|
- [Discord](https://qwik.builder.io/chat)
|
|
- [Qwik GitHub](https://github.com/BuilderIO/qwik)
|
|
- [@QwikDev](https://twitter.com/QwikDev)
|
|
- [Vite](https://vitejs.dev/)
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
|
|
This project is using Qwik with [QwikCity](https://qwik.builder.io/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.builder.io/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 `yarn 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.builder.io/qwikcity/guides/static-site-generation/).
|
|
|
|
```shell
|
|
yarn qwik add # or `yarn 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 `yarn 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
|
|
yarn preview # or `yarn 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
|
|
yarn build # or `yarn build`
|
|
```
|
|
|
|
## Vercel Edge
|
|
|
|
This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users.
|
|
|
|
## Installation
|
|
|
|
The adaptor will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
|
|
|
|
```
|
|
└── adapters/
|
|
└── vercel-edge/
|
|
└── vite.config.ts
|
|
└── src/
|
|
└── entry.vercel-edge.tsx
|
|
```
|
|
|
|
Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build.
|
|
|
|
## Production build
|
|
|
|
To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
|
|
|
|
```shell
|
|
npm run build
|
|
```
|
|
|
|
[Read the full guide here](https://github.com/BuilderIO/qwik/blob/main/starters/adapters/vercel-edge/README.md)
|
|
|
|
## Dev deploy
|
|
|
|
To deploy the application for development:
|
|
|
|
```shell
|
|
npm run deploy
|
|
```
|
|
|
|
Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step!
|
|
|
|
## Production deploy
|
|
|
|
The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it.
|
|
|
|
You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI.
|
|
|
|
## Netlify
|
|
|
|
This starter site is configured to deploy to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/), which means it will be rendered at an edge location near to your users.
|
|
|
|
### Local development
|
|
|
|
The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
|
|
|
|
1. Install Netlify CLI globally `npm i -g netlify-cli`.
|
|
2. Build your site with both ssr and static `npm run build`.
|
|
3. Start a local server with `npm run serve`.
|
|
In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
|
|
4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
|
|
|
|
### Edge Functions Declarations
|
|
|
|
[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/)
|
|
can be configured to run on specific URL patterns. Each edge function declaration associates
|
|
one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations.
|
|
|
|
This is useful to determine if a page response should be Server-Side Rendered (SSR) or
|
|
if the response should use a static-site generated (SSG) `index.html` file instead.
|
|
|
|
By default, the Netlify Edge adaptor will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions.
|
|
|
|
To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:
|
|
|
|
```toml
|
|
[[edge_functions]]
|
|
path = "/admin"
|
|
function = "auth"
|
|
```
|
|
|
|
### Addition Adapter Options
|
|
|
|
Netlify-specific option fields that can be passed to the adapter options:
|
|
|
|
- `excludedPath` this option accepts a `string` glob pattern that represents which path pattern should not go through the generated Edge Functions.
|
|
|
|
### Deployments
|
|
|
|
You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This starter site includes a `netlify.toml` file to configure your build for deployment.
|
|
|
|
#### Deploying via Git
|
|
|
|
Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link your site to a Git provider from the Netlify CLI, run the command:
|
|
|
|
```shell
|
|
netlify link
|
|
```
|
|
|
|
This sets up [continuous deployment](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) for your site's repo. Whenever you push new commits to your repo, Netlify starts the build process..
|
|
|
|
#### Deploying manually via the CLI
|
|
|
|
If you wish to deploy from the CLI rather than using Git, you can use the command:
|
|
|
|
```shell
|
|
netlify deploy --build
|
|
```
|
|
|
|
You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
|
|
|
|
Add `--prod` flag to deploy to production.
|