@edgestore/server 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +125 -46
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,86 +1,165 @@
1
- # Getting Started
1
+ # Docs
2
2
 
3
- ### Next.js Setup
3
+ Check the official [documentation](https://edgestore.dev) for more information.
4
4
 
5
- #### Install
5
+ # Quick Start
6
6
 
7
- ```bash
8
- npm install @edgestore/react
7
+ ## Next.js Setup
8
+
9
+ ### Install
10
+
11
+ Let's start by installing the required packages.
12
+
13
+ ```shell
14
+ npm install @edgestore/server @edgestore/react zod
9
15
  ```
10
16
 
11
- #### Environment Variables
17
+ ### Environment Variables
18
+
19
+ Then go to your [Dashboard](https://dashboard.edgestore.dev), create a new project and copy the keys to your environment variables.
12
20
 
13
- ```bash
14
- # .env
21
+ ```shell title=".env"
15
22
  EDGE_STORE_ACCESS_KEY=your-access-key
16
23
  EDGE_STORE_SECRET_KEY=your-secret-key
17
24
  ```
18
25
 
19
- #### API Route
26
+ ### Backend
27
+
28
+ Now we can create the backend code for our Next.js app.<br/>
29
+ Edge Store is compatible with both types of Next.js apps (`pages router` and `app router`).
30
+
31
+ The example below is the simplest bucket you can create with Edge Store. Just a simple file bucket with no validation that will be accessible by anyone with the link.
32
+
33
+ You can have multiple buckets in your app, each with its own configuration.
34
+
35
+ ```ts title="src/app/api/edgestore/[...edgestore]/route.ts"
36
+ import { initEdgeStore } from '@edgestore/server';
37
+ import { createEdgeStoreNextHandler } from '@edgestore/server/adapters/next/app';
38
+
39
+ const es = initEdgeStore.create();
40
+
41
+ /**
42
+ * This is the main router for the Edge Store buckets.
43
+ */
44
+ const edgeStoreRouter = es.router({
45
+ publicFiles: es.fileBucket(),
46
+ });
47
+
48
+ const handler = createEdgeStoreNextHandler({
49
+ router: edgeStoreRouter,
50
+ });
51
+
52
+ export { handler as GET, handler as POST };
53
+
54
+ /**
55
+ * This type is used to create the type-safe client for the frontend.
56
+ */
57
+ export type EdgeStoreRouter = typeof edgeStoreRouter;
58
+ ```
59
+
60
+ ### Frontend
20
61
 
21
- ```jsx
22
- // pages/api/edgestore/[...edgestore].js
23
- import EdgeStore from '@edgestore/react/next';
62
+ Now let's initiate our context provider.
24
63
 
25
- export default EdgeStore();
64
+ ```tsx title="src/lib/edgestore.ts"
65
+ 'use client';
66
+
67
+ import { EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route';
68
+ import { createEdgeStoreProvider } from '@edgestore/react';
69
+
70
+ const { EdgeStoreProvider, useEdgeStore } =
71
+ createEdgeStoreProvider<EdgeStoreRouter>();
72
+
73
+ export { EdgeStoreProvider, useEdgeStore };
26
74
  ```
27
75
 
28
- #### Provider
76
+ And then wrap our app with the provider.
77
+
78
+ ```tsx title="src/app/layout.tsx"
79
+ import { EdgeStoreProvider } from '../lib/edgestore';
80
+ import './globals.css';
29
81
 
30
- ```jsx
31
- // pages/_app.jsx
32
- import { EdgeStoreProvider } from '@edgestore/react';
82
+ // ...
33
83
 
34
- export default function App({ Component, pageProps }) {
84
+ export default function RootLayout({
85
+ children,
86
+ }: {
87
+ children: React.ReactNode;
88
+ }) {
35
89
  return (
36
- <EdgeStoreProvider>
37
- <Component {...pageProps} />
38
- </EdgeStoreProvider>
90
+ <html lang="en">
91
+ <body>
92
+ <EdgeStoreProvider>{children}</EdgeStoreProvider>
93
+ </body>
94
+ </html>
39
95
  );
40
96
  }
41
97
  ```
42
98
 
43
- ### Upload image
99
+ ### Upload file
44
100
 
45
- ```jsx
46
- import { useEdgeStore } from '@edgestore/react';
101
+ You can use the `useEdgeStore` hook to access typesafe frontend client and use it to upload files.
47
102
 
48
- const Page = () => {
49
- const [file, setFile] = useState(null);
50
- const { upload } = useEdgeStore();
103
+ ```tsx {1, 6, 19-28}
104
+ import { useEdgeStore } from '../lib/edgestore';
105
+ import * as React from 'react';
106
+
107
+ export default function Page() {
108
+ const [file, setFile] = React.useState<File | null>(null);
109
+ const { edgestore } = useEdgeStore();
51
110
 
52
111
  return (
53
112
  <div>
54
- <input type="file" onChange={(e) => setFile(e.target.files[0])} />
113
+ <input
114
+ type="file"
115
+ onChange={(e) => {
116
+ setFile(e.target.files?.[0] ?? null);
117
+ }}
118
+ />
55
119
  <button
56
120
  onClick={async () => {
57
- await upload({
58
- file,
59
- key: 'path/to/image.jpg',
60
- });
121
+ if (file) {
122
+ const res = await edgestore.publicFiles.upload({
123
+ file,
124
+ onProgressChange: (progress) => {
125
+ // you can use this to show a progress bar
126
+ console.log(progress);
127
+ },
128
+ });
129
+ // you can run some server action or api here
130
+ // to add the necessary data to your database
131
+ console.log(res);
132
+ }
61
133
  }}
62
134
  >
63
135
  Upload
64
136
  </button>
65
137
  </div>
66
138
  );
67
- };
68
-
69
- export default Page;
139
+ }
70
140
  ```
71
141
 
72
- ### Show image
142
+ ### Replace file
73
143
 
74
- ```jsx
75
- import { useEdgeStore } from '@edgestore/react';
144
+ By passing the `replaceTargetUrl` option, you can replace an existing file with a new one.
145
+ It will automatically delete the old file after the upload is complete.
76
146
 
77
- const Page = () => {
78
- const { getImgSrc } = useEdgeStore();
147
+ You can also just upload the file using the same file name, but in that case, you might still see the old file for a while becasue of the CDN cache.
79
148
 
80
- return (
81
- <div>
82
- <img src={getImgSrc('path/to/image.jpg')} />
83
- </div>
84
- );
85
- };
149
+ ```tsx
150
+ const res = await edgestore.publicFiles.upload({
151
+ file,
152
+ options: {
153
+ replaceTargetUrl: oldFileUrl,
154
+ },
155
+ // ...
156
+ });
157
+ ```
158
+
159
+ ### Delete file
160
+
161
+ ```tsx
162
+ await edgestore.publicFiles.delete({
163
+ url: urlToDelete,
164
+ })
86
165
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edgestore/server",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "The best DX for uploading files from your Next.js app",
5
5
  "homepage": "https://edgestore.dev",
6
6
  "repository": "https://github.com/edgestorejs/edgestore.git",
@@ -94,5 +94,5 @@
94
94
  "typescript": "^5.1.6",
95
95
  "zod": "^3.21.4"
96
96
  },
97
- "gitHead": "f57bc36304ce6bd97f5b85e33a2b1eeeaf7633d2"
97
+ "gitHead": "bb5207ec9b0558f09e7a66ad696ed978c120eb1c"
98
98
  }