CoryParsnipson / indie-engineer

SvelteKit + MDsveX blog about freelancing technical work

Indie Engineer

This is a sveltekit + MDsveX blog.

TODO

• add links to next and prev posts. Also section for "posts you may also like"?

• csrf tokens for forms and api calls

• next gen images - (low res placeholder, multiple res, etc)

• add in tag manager events for share button clicks + subscribe clicks

• rate limiting api endpoints

• fix all high priority issues in SEO site checkup: https://seositecheckup.com

Creating a svelte kit project

npm init svelte@next app

mv app indie-engineer
cd indie-engineer

npm install
npm run dev # or npm run dev:host

git init && git add -A && git commit -m "Initial commit"

Adding tailwindcss and MDsveX

Do this before modifying the project.

npx svelte-add@latest tailwindcss --forms --typography

npm install
git add -A && git commit -m "Add tailwindcss"

npx svelte-add@latest mdsvex

npm install
git add -A && git commit -m "Add mdsvex"

Deploy to Heroku [1]

1. Add a start command to package.json. Heroku runs this command in the deployment container.

{
  "name": "indie-engineer",
  // ...
  "scripts": {
    "start": "node build/index.js",
    // ...
  }
  // ...
}

1. Specify which node version to use.

  "engines": {
    "node": "16.x",
    "npm": "8.x"
  }

1. Change the adapter to use the node adapter.

npm install --save-dev @sveltejs/adapter-node@next

Swap out the adapter in svelte.config.js. This needs to be a node adapter and not a static adapter because we are handling POST requests in the webhook and email signup forms.

1. Add heroku remote to git repo

git remote add heroku <heroku git repo url>

Set up Environment Variables and API keys

Vite uses .env and .env.* files to load environment variables.

Required variables:

• VITE_INSTANCE - set this to "dev" or "prod" ("dev" will expose debug functionality. Do NOT use this in production)
• VITE_API_SECRET - see [3]
• VITE_SENDGRID_API_KEY - see [4]
• VITE_SENDGRID_SENDER\ID - set this to the sender you used in sendgrid. To get the "from" field, use the view sender API call (see [8]).
• VITE_SENDGRID_LIST_ID - see [6]
• VITE_SENDGRID_UNSUBSCRIBE_GROUP - link to group for users to unsubscribe from the list; see [9]
• VITE_HEROKU_WEBHOOK_ENABLE - if not "true", exit the webhook function without doing anything (not even authentication)
• VITE_HEROKU_REPO - set the heroku repo (git remote show heroku)
• VITE_HEROKU_API_TOKEN - retrieve your heroku api token (see [7])

Optional variables:

• VITE_SENDGRID_MAX_CONTACTS - set this to change amount of people who can go in the sendgrid 'dev' mailing list. Defaults to 10.
• VITE_GTM_ENABLE - set this to true to enable the Google Tag Manager widget
• VITE_GTM_ID - if Google Tag Manager is enabled, this must be set to properly send data to the account
• VITE_INDEX_PAGINATION_SIZE - set the page size for index blog post pagination (defaults to 10 if not present)

Set up automated email hook

Use heroku app web hooks [3].

1. Create a new web hook using the tutorial. Use the api:build event. The payload url should use the sendEmail.json endpoint:

PayloadURL (https): https://indie-engineer-dev.herokuapp.com/api/sendEmail.json

1. Create a secret phrase to serve as the internal API key. [4] Put this in the .env file:

VITE_API_SECRET="<secret passphrase>"

Don't forget to copy this to the heroku app config vars.

1. Install sendgrid packages:

npm install @sendgrid/mail
npm install @sendgrid/client

Create a sendgrid api key and put it in the .env folder (see [4]). This requires a valid sendgrid account.

1. Modify tsconfig.js to allow for importing sendgrid ESM style. See [5].

2. Set the sendgrid mailing list ID for this website instance. For example, create a mailing list for the dev instance called "indie-engineer-dev". Add the ID of this list to the environment variables. Use [6] api call to get all existing list ids.

3. Create Unsubscribe groups

It's recommended to create 2--one for unsubscribing from automated blog post notifications and another called "All" for unsubscribing for all email. (When you do a single send, the associated suppression group you supply will filter out unsubscribed users from the provided list_ids)

Then get the suppression group ID from the sendgrid dashboard and put it in the VITE_SENDGRID_UNSUBSCRIBE_GROUP environment variable.

Set up reCAPTCHA Enterprise (Requires GCP account)

1. Create a GCP account and make a GCP project. (I called mine "indie-engineer").

2. Enable the reCAPTCHA Enterprise API

3. Create a sitekey (See [10].) for a score based test. You need to make one key for dev and another for prod. For dev, add "localhost" and "indie-engineer-dev.herokuapp.com" to the domains. For prod, add "indieengineer.com".

4. Create a google cloud API key and restrict it to only allow it for reCAPTCHA Enterprise API. (See [11]).

5. Set these environment variables:

VITE_CAPTCHA_ENABLE=true
VITE_CAPTCHA_SITEKEY=\<sitekey from GCP dashboard\>
VITE_CAPTCHA_API_KEY=\<api key\>
VITE_CAPTCHA_PROJECT_ID=<gcp project id--e.g. 'indie-engineer'>

References

1. https://dev.to/nostro/deploying-to-heroku-with-sveltekit-3350
2. https://devcenter.heroku.com/articles/app-webhooks
3. https://www.worksighted.com/random-passphrase-generator/#passphrase-generator
4. https://app.sendgrid.com/guide/integrate/langs/nodejs
5. sendgrid/sendgrid-nodejs#743
6. https://docs.sendgrid.com/api-reference/lists/get-all-lists
7. https://devcenter.heroku.com/articles/authentication
8. https://docs.sendgrid.com/api-reference/sender-identities-api/view-a-sender-identity
9. https://docs.sendgrid.com/ui/sending-email/unsubscribe-groups
10. https://cloud.google.com/recaptcha-enterprise/docs/create-key
11. https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages-with-checkbox
12. https://auth0.com/docs/secure/attack-protection/bot-detection/configure-recaptcha-enterprise#create-an-api-key
13. https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment