Cleanup + read vars from .env.local

Author: maietta

.env.example

@@ -1,17 +1,31 @@
-# THE FOLLOWING ARE LOCAL ONLY VALUES. IN PRODUCTION, THESE SHOULD BE SET IN THE GITHUB SECRETS.
+# WARNING!!! - WARNING!!! - WARNING!!
+
+# Some of the following values are for use LOCAL ONLY and are not needed in GitHub secrets.
+# MYSQL_* variables are only used with docker-compose.yml and are not needed in GitHub secrets.
+# APP_NAME, APP_TOKEN, and CAPROVER_URL are only used with caprover deploy bash script and useful for directly deploying to CapRover.
+# JWT_SECRET shoudl always be generated separately for production than what is used for local development.
 
 # REQUIRED for Prisma
 DATABASE_URL="mysql://dbuser:dbpass@localhost:3306/dbname"
 
 # Required for JWT authentication
 # Generate one with `openssl rand -base64 32`. Generate a seperate secret for production.
-VITE_JWT_PRIVATE_KEY="secret key"
+JWT_SECRET="secret key"
 
 # ONLY REQUIRED FOR LOCAL DEVELOPMENT!!! DO NOT ADD THESE TO GITHUB SECRETS.
 MYSQL_DATABASE="dbname"
 MYSQL_USER="dbuser"
 MYSQL_PASSWORD="dbpass"
 MYSQL_ROOT_PASSWORD="dbrootpass"
 
-SENDGRID_API_KEY="sendgrid api key"
-EMAIL_FROM="no-reply@your-domain.com"
+# REQUIRED - FOR CONTACT FORM. (For local development only. For production, use GitHub secrets.)
+SENDGRID_API_KEY="SGXXXXXXXXXXXXXXXXXXXXXXXXXXX"
+EMAIL_DESTINATION="nick@example.com" # Where contact form emails will be sent to.
+EMAIL_REPLY_TO="no-reply@example.com" # Must be verified email or domain in SendGrid
+
+# OPTIONAL - REMOVE IF NOT NEEDED. (For direct deployment to CapRover using caprover deploy bash script.)
+APP_NAME="my-app"
+APP_TOKEN="XXXXXXXXXXXXXXXXXXX"
+CAPROVER_URL="https://captain.example.com"
+
+# Google ReCaptcha - Up next...

.github/workflows/production.yml

@@ -5,9 +5,14 @@ on:
     branches:
       - "main"
 
-#env:
-#DATABASE_URL: ${{ secrets.DATABASE_URL }}
-#SENDGRID_API_KEY: ${{ secrets.SENDGRID_API_KEY }}
+env:
+  DATABASE_URL: ${{ secrets.DATABASE_URL }} # Used by Prisma
+  SENDGRID_API_KEY: ${{ secrets.SENDGRID_API_KEY }} # Used by SendGrid
+  JWT_SECRET": ${{ secrets.JWT_SECRET }} # Used by authentication/authorization/session management
+
+  # Email configuration
+  EMAIL_DESTINATION: "you@example.com" # Where contact form emails will be sent to.
+  EMAIL_REPLY_TO: "no-reply@example.com" # Must be verified email or domain in SendGrid
 
 jobs:
   build-and-deploy:

.vscode/settings.json

@@ -1,39 +1,41 @@
 {
-    "editor.formatOnSave": true,
-    "workbench.editor.labelFormat": "short",
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
+    "editor.formatOnSave": true,
     "emmet.includeLanguages": {
         "postcss": "css"
     },
     "files.associations": {
         "*.css": "sass"
     },
     "files.exclude": {
-        // "**/.git": true,
-        // "**/.svn": true,
-        // "**/.hg": true,
-        // "**/CVS": true,
-        // "**/.DS_Store": true,
-        // "**/Thumbs.db": true,
-        // "**/node_modules": false,
-        // "**/build": true,
-        // ".svelte-kit": true,
-        // ".eslint*": true,
-        // ".npmrc": true,
-        // ".prettier*": true,
-        // "Dockerfile": false,
-        // "package-lock.json": true,
-        // "playwright.config.ts": true,
-        // "postcss.config.cjs": true,
-        // "tailwind.config.cjs": true,
-        // "tsconfig.json": false,
-        // "svelte.config.js": true,
-        // "vite.config.ts": true,
-        // "npm.sh": true,
-        // "prisma.sh": true,
-        // "yarn.lock": true,
-        // ".gitignore": true,
-    }
+        "**/.DS_Store": true,
+        "**/.git": true,
+        "**/.hg": true,
+        "**/.svn": true,
+        "**/CVS": true,
+        "**/Thumbs.db": true,
+        "**/build": true,
+        "**/node_modules": false,
+        ".eslint*": true,
+        ".gitignore": true,
+        ".npmrc": true,
+        ".prettier*": true,
+        ".svelte-kit": true,
+        "Dockerfile": false,
+        "npm.sh": true,
+        "package-lock.json": true,
+        "playwright.config.ts": true,
+        "postcss.config.cjs": true,
+        "prisma.sh": true,
+        "svelte.config.js": true,
+        "tailwind.config.cjs": true,
+        "tsconfig.json": true,
+        "vite.config.ts": true,
+        "yarn.lock": true
+    },
+    "workbench.editor.labelFormat": "short",
+    "workbench.iconTheme": "vs-minimal",
+    "workbench.colorTheme": "Tomorrow Night Blue"
 }

deploy.sh

@@ -1,9 +1,5 @@
 #!/bin/bash
 
-APP_NAME="my-app"
-APP_TOKEN="45a0fc928aa4c3756251b81709da45abb4183c53a0bab31976bf79f5a2a47a9a"
-CAPROVER_URL="https://captain.example.com"
-
 # Run yarn build
 yarn build
 

src/lib/variables.ts

@@ -1,3 +1,3 @@
 export const variables = {
-    private_key: import.meta.env.VITE_JWT_PRIVATE_KEY,
+    private_key: import.meta.env.JWT_SECRET,
 }

src/routes/+page.svelte

@@ -11,6 +11,5 @@
 <style lang="postcss">
 	:global(html) {
 		background-color: theme(colors.gray.100);
-		height: 100%;
 	}
 </style>

src/routes/contact/+page.server.ts

@@ -1,21 +1,16 @@
-
+// This file is a SvelteKit action that is called when the contact form is submitted.
 import type { Actions } from "@sveltejs/kit";
 import { fail } from "@sveltejs/kit"
 
-
+// Form specific imports
 import z from "zod"
 import sgMail from "@sendgrid/mail/index";
-// THE FOLLOWING TWO LINES ARE NOT WORKING. STILL WORKING ON THIS.
-// import { env } from '$env/dynamic/private';
-// const { SENDGRID_API_KEY, SENDGRID_EMAIL_FROM, VITE_CONTACT_EMAIL } = env;
 
-// This needs to be picked up from the .env file. I'm not sure how to do this. Seems broken at the moment.
-const SENDGRID_API_KEY = "<EXAMPLE_KEY>";
-const SENDGRID_EMAIL_FROM = "no-reply@example.com";
-const VITE_CONTACT_EMAIL = "username+contactform@example.com";
+// Import the SendGrid API key and email addresses from the private environment variables.
+import { SENDGRID_API_KEY, EMAIL_DESTINATION, EMAIL_REPLY_TO } from '$env/static/private';
 
-// Refer to https://zod.dev/ for building a desired data schema for the data we want to parse and optionally.
-const contactSchema = z.object({
+// Refer to https://zod.dev/ for details about how to setup a validation schema.
+const contactFormSchema = z.object({
     fname: z.string({ required_error: "First name is required" }).min(1),
     lname: z.string({ required_error: "Last name is required" }).min(1),
     email: z.string({ required_error: "Valid email address required" }).email(),
@@ -25,20 +20,13 @@ const contactSchema = z.object({
 export const actions: Actions = {
     default: async ({ request }) => {
 
-        sgMail.setApiKey(SENDGRID_API_KEY);
-
         const formData = Object.fromEntries(await request.formData());
-
-        // Remove empty fields from the form data.
-        Object.keys(formData).forEach(key => formData[key] === '' && delete formData[key]);
-
-        const form = contactSchema.safeParse(formData);
-        const { ...rest } = formData;
+        const form = contactFormSchema.safeParse(formData);
 
         // If there is a problem with the form data, return the error.
-        if (!form.success) {
+        if (!form.success) { // If not successful, return the error.
             return fail(400, {
-                data: rest,
+                data: formData,
                 errors: form.error.flatten().fieldErrors,
                 body: {
                     message: 'Please review the form and try again.',
@@ -48,10 +36,12 @@ export const actions: Actions = {
         }
 
         try {
+            sgMail.setApiKey(SENDGRID_API_KEY);
+
             await sgMail.send({
-                to: VITE_CONTACT_EMAIL, // Destination email address (Who is responsible responding to emails)
-                replyTo: form.data.email, // Email of visitor requesting contact.
-                from: SENDGRID_EMAIL_FROM, // Email of sender (verified email address or domain at SendGrid)
+                to: EMAIL_DESTINATION, // SendGrid verified email or domain where email is send "from". This could be a reply-to address, or a sales, support, or other address.
+                from: EMAIL_REPLY_TO,  // The email address that will be displayed as the sender.
+                replyTo: form.data.email, // The email provided provided by the visitor.
                 subject: 'Contat form submission',
                 text: 'First Name: ' + form.data.fname + '\n' +
                     'Last Name: ' + form.data.lname + '\n' +
@@ -64,7 +54,7 @@ export const actions: Actions = {
             if (err.response) {
                 console.error(err.response.body?.errors)
                 return fail(400, {
-                    data: rest,
+                    data: formData,
                     body: {
                         message: "Upstream Error: " + err.response.body?.errors[0]?.message,
                         classes: 'text-2xl text-red-500'

src/routes/contact/+page.svelte

@@ -4,11 +4,11 @@
 	/**
 	 * @type {{ errors: { fname: any[]; lname: any[]; email: any[]; message: any[]; }; fname: any; data: { lname: any; email: any; message: any; }; }}
 	 */
-	 export let form;
+	export let form;
 	/**
 	 * @type {{ message: any; classes: any; } | null}
 	 */
-	 export let placeholder = null;
+	export let placeholder = null;
 </script>
 
 <div class=" mx-auto my-20 w-1/3 border border-purple-500 bg-white">