Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devjiwonchoi/set-status
Set a custom HTTP status code for the client by utilizing proxy and a meta tag.
https://github.com/devjiwonchoi/set-status
browser client next nextjs proxy status status-code
Last synced: about 17 hours ago
JSON representation
Set a custom HTTP status code for the client by utilizing proxy and a meta tag.
- Host: GitHub
- URL: https://github.com/devjiwonchoi/set-status
- Owner: devjiwonchoi
- License: mit
- Created: 2023-12-31T03:19:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-31T17:28:13.000Z (about 1 year ago)
- Last Synced: 2024-10-11T12:05:25.381Z (4 months ago)
- Topics: browser, client, next, nextjs, proxy, status, status-code
- Language: TypeScript
- Homepage:
- Size: 133 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# set-status
> Set a custom HTTP status code for the client by utilizing proxy and a meta tag.
**Note: Manipulating HTTP status code is not recommended for production. Use at your own risk.**
Current v0 is inspired by [next-status-proxy](https://github.com/suleymangezsat/next-status-proxy).
## Install
```sh
pnpm add set-status
```
## Configuration
You can configure all settings with the environment variables.
- Set the `TARGET_URL` as your target app URL, `http://localhost:3000` by default.
- Set the `PROXY_SERVER_PORT` for the proxy server port, `3001` by default.
- Set the `TARGET_META_NAME` for the target `meta` tag, `set-status` by default.
- Set the `IGNORE_PATH_REGEX` for the regex to ignore the target path set to Next.js by default.
> See [`.env.example`](./.env.example) for an example.
## Usage
### Basic
Run the proxy server with the following command:
```sh
pnpm proxy-status
```
The proxy server will look for the target meta tag and set the status code to the client.
```html
```
The meta tag above will let the proxy server set the status code to `401`.
### Recommended
Install [`concurrently`](https://www.npmjs.com/package/concurrently) to run the proxy server and your production app concurrently.
```sh
pnpm add concurrently
```
Set your `start` script in `package.json` as follows:
```json
{
"scripts": {
"start": "concurrently \"pnpm proxy-status\" \"YOUR PRODUCTION COMMAND\""
}
}
```
```sh
pnpm start
```
### Next.js
> See examples in [`examples/nextjs`](./examples/nextjs).
In Next.js, you can statically set a custom `meta` tag by using a `Metadata` API.
Through this, we can set the status code read from the target meta tag.
```tsx
// page.tsx
export default function Unauthorized() {
return (
401
Unauthorized
)
}
export const metadata = {
other: {
'set-status': 401,
},
}
```
Also, you can dynamically set the target meta tag by using `generateMetadata` function.
```tsx
// page.tsx
export async function generateMetadata() {
const res = await fetch('https://example.com/api')
if (res.status !== 200) {
return {
other: {
'set-status': res.status,
},
}
}
}
```
For more information about the `Metadata` API, see the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/optimizing/metadata).