55 |
56 |
57 | Your API key is `2f09ecd9-6a64-4d5b-9c77-a5587cedbcf7`.
58 |
59 | Usage of the API must follow Revue’s [Terms of Service] and [Privacy
60 | Policy].
61 |
62 |
63 |
64 |
65 | ⚠️ Usual warning about exposing API keys here, there doesn't seem to
66 | be a way to generate a new Revue API key, so if it's leaked somewhere
67 | I'm not sure how you'd go about revoking it.
68 |
69 | Using Insomnia the first thing I did was check out the POST method
70 | with `https://www.getrevue.co/api/v2/subscribers` the request body was
71 | this:
72 |
73 | ```json
74 | {
75 | "email": "spences10apps+test@gmail.com",
76 | "first_name": "",
77 | "last_name": "",
78 | "double_opt_in": false
79 | }
80 | ```
81 |
82 | As a side note you can add a `+` to the end of an email address in
83 | Gmail to give it a unique name. So in the case of the example `+test`
84 | is what I'm using as a way to identify the email address.
85 |
86 | The Bearer token looked like this `Token `.
87 |
88 | Hit Send button and wait for the response! I get a 200 OK with the
89 | preview reply looking something like this:
90 |
91 | ```json
92 | {
93 | "id": 5654821249,
94 | "list_id": 216568,
95 | "email": "spences10apps+test@gmail.com",
96 | "first_name": "",
97 | "last_name": "",
98 | "last_changed": "2021-08-31T20:10:24.197Z"
99 | }
100 | ```
101 |
102 | Alright, sweet! I can now add a subscriber to my Revue account via the
103 | Revue API!
104 |
105 | ## Setup the project
106 |
107 | In this example like the last couple of examples I've done I'll be
108 | using Matt Jennings' [SvelteKit blog template]; it's what this site is
109 | based off of.
110 |
111 | ℹ️ This is for a SvelteKit project hosted on Vercel, if you're
112 | following along then this is what I'm doing:
113 |
114 | ```bash
115 | git clone git@github.com:mattjennings/sveltekit-blog-template.git
116 | cd sveltekit-blog-template
117 | npm i
118 | ```
119 |
120 | Matt's example uses the SvelteKit `adapter-static` and because I'm
121 | deploying to Vercel I'll need to install `adapter-vercel` and add that
122 | in the `svelte.config.js`:
123 |
124 | ```bash
125 | # uninstall adapter-static
126 | npm un @sveltejs/adapter-static
127 | # install adapter-vercel
128 | npm i @sveltejs/adapter-vercel@next
129 | ```
130 |
131 | Then it's a case of swapping out the first line here `adapter-static`
132 | with `adapter-vercel`:
133 |
134 | ```js
135 | import adapter from '@sveltejs/adapter-vercel';
136 | import { mdsvex } from 'mdsvex';
137 | import preprocess from 'svelte-preprocess';
138 | import mdsvexConfig from './mdsvex.config.js';
139 |
140 | /** @type {import('@sveltejs/kit').Config} */
141 | const config = {
142 | extensions: ['.svelte', ...mdsvexConfig.extensions],
143 | // Consult https://github.com/sveltejs/svelte-preprocess
144 | // for more information about preprocessors
145 | preprocess: [
146 | mdsvex(mdsvexConfig),
147 | [
148 | preprocess({
149 | postcss: true,
150 | }),
151 | ],
152 | ],
153 |
154 | kit: {
155 | target: '#svelte',
156 | adapter: adapter(),
157 | },
158 | };
159 |
160 | export default config;
161 | // Workaround until SvelteKit uses Vite 2.3.8 (and it's confirmed to fix the Tailwind JIT problem)
162 | const mode = process.env.NODE_ENV;
163 | const dev = mode === 'development';
164 | process.env.TAILWIND_MODE = dev ? 'watch' : 'build';
165 | ```
166 |
167 | The rest of the config here isn't really pertenant, what matters is
168 | that I have swapped out `adapter-static` with `adapter-vercel` I've
169 | literally copied the code of what I'm working on.
170 |
171 | ## Setting up environment variables
172 |
173 | Because I'm going to be using an API key I don't want exposed there's
174 | a few things I'll need to do!
175 |
176 | First is to add `.env` to the `.gitignore` file. For some reason this
177 | isn't in the default skeleton you make with `npm init svelte@next`
178 | project so I'll be adding `.env` to the `.gitignore` file. I'll be
179 | doing this via the terminal, you can edit the file manually if you
180 | like:
181 |
182 | ```bash
183 | echo .env >> .gitignore
184 | ```
185 |
186 | SvelteKit uses [Vite] and you can prefix you environment variables
187 | with `VITE_` so they're available to the client (the browser) this
188 | also means that they can be seen from the client.
189 |
190 | Although the code for an endpoint runs on the server and adding the
191 | `VITE_` means that you can access the variable in development mode it
192 | _shouldn't_ be exposed to the client **but** I prefer to use
193 | `process.env` to access the variables.
194 |
195 | I've made a short post on how to use [`.env` secrets in SvelteKit] if
196 | you need a bit more detail on that.
197 |
198 | I'm going to install `env-cmd` and add that to the dev script, first
199 | up install the package:
200 |
201 | ```bash
202 | npm i -D env-cmd
203 | ```
204 |
205 | Then add it to the dev script:
206 |
207 | ```json
208 | "scripts": {
209 | "dev": "env-cmd svelte-kit dev",
210 | ```
211 |
212 | No I can access environment variables in development mode.
213 |
214 | ## Setting up the endpoint
215 |
216 | Now I'll need to set up the endpoint to submit the email to the Revue
217 | API. I'll do this in the terminal:
218 |
219 | ```bash
220 | # make the directory
221 | mkdir src/routes/email-submit
222 | # create the file
223 | touch src/routes/email-submit/index.json.js
224 | ```
225 |
226 | Now for the endpoint `post` function!
227 |
228 | Now I can scaffold ou the function to submit the email to the Revue
229 | API.
230 |
231 | For now, to test it's worked I'll **hardcode** in the email address to
232 | the `POST` body, then I'll build on that once I've validated it's
233 | working.
234 |
235 | ```js
236 | export async function post() {
237 | const REVUE_API_KEY = process.env['REVUE_API_KEY'];
238 | try {
239 | const res = await fetch(
240 | 'https://www.getrevue.co/api/v2/subscribers',
241 | {
242 | method: 'POST',
243 | headers: {
244 | Authorization: `Token ${REVUE_API_KEY}`,
245 | 'Content-Type': 'application/json',
246 | },
247 | body: JSON.stringify({
248 | email: 'spences10apps+test@gmail.com',
249 | first_name: '',
250 | last_name: '',
251 | double_opt_in: false,
252 | }),
253 | },
254 | );
255 | if (res.ok) {
256 | return {
257 | status: 200,
258 | body: JSON.stringify({
259 | message: 'email sent!',
260 | }),
261 | };
262 | }
263 | if (res.status !== 200) {
264 | return {
265 | status: 400,
266 | body: JSON.stringify({
267 | message: 'bad request',
268 | }),
269 | };
270 | }
271 | } catch (error) {
272 | return {
273 | status: 500,
274 | body: JSON.stringify({
275 | message: 'something went wrong with the email submit!',
276 | }),
277 | };
278 | }
279 | }
280 | ```
281 |
282 | Nice big wall of text! Like that? Apologies, you could just remove the
283 | error checks and YOLO it if you like, I'm not your mum! 😂
284 |
285 | So everything is wrapped in a `try` block and if there's an bad
286 | request made to the Revue API then that'll be caught and a response of
287 | `bad request` given.
288 |
289 | There's a final catch if the Revue request fails as well.
290 |
291 | ℹ️ One thing to note is that I'm not asking for a first or last name
292 | and that I'm not requiring users to double opt in (i.e. reply to
293 | another email to say yes sign me up to the list I've just subscribed
294 | to).
295 |
296 | **Note** again, if you didn't catch it earlier, the email address is
297 | hardcoded in here:
298 |
299 | ```js
300 | body: JSON.stringify({
301 | email: 'spences10apps+test@gmail.com',
302 | first_name: '',
303 | last_name: '',
304 | double_opt_in: false,
305 | });
306 | ```
307 |
308 | I'll be changing that once I've validated the submit is working. I
309 | cover that in the [Receive email in endpoint] section.
310 |
311 | If you want you can do what you like with these options, my aim is to
312 | remove as much friction as possible.
313 |
314 | Sweet! Now that the endpoint is set up I can test it by submitting a
315 | request from a page.
316 |
317 | ## Setting up the submit form
318 |
319 | I'm going to create a sign up component and then use that on the index
320 | page of the project, first I'll create the component in the `lib`
321 | folder:
322 |
323 | ```bash
324 | touch src/lib/components/submit.svelte
325 | ```
326 |
327 | Then add the following script to the component:
328 |
329 | ```svelte
330 |
358 | ```
359 |
360 | So this is setting up the call to the endpoint using the browser fetch
361 | API to the endpoint `/email-submit.json` then setting the `success`
362 | variable if there's no issues.
363 |
364 | In the body of the component I'll add the form and the submit button,
365 | the project uses Tailwind so I've added some minimal styles:
366 |
367 | ```svelte
368 |
369 | {#if success}
370 |
371 |
{responseMessage}
372 |
373 | {:else}
374 |
375 |
376 | Sign up for the newsletter
377 |
378 |
394 |
395 | {/if}
396 |
397 | ```
398 |
399 | The main part to note here is in the `