If you’re a web developer interested in creating a podcast site using SvelteKit, you’ve stumbled upon a delightful recipe! In this blog, we’ll guide you step-by-step through setting up the Syntax.fm site, ensuring everything runs smoothly like a finely-tuned machine. Let’s dive in!

Requirements

• Node 18.0.0 or higher

Prerequisites

Before you start, make sure you have the following:

• Install Node
• Install pnpm
• If you are on a Mac, preferably use Homebrew to avoid issues:
• brew install pnpm
• Install MySQL or use Docker with the provided docker-compose.yml file.

Getting Started

Now that you’re equipped, let’s get your podcast site up and running!

Without Docker

Before proceeding, make sure you have your database connection string ready. Here are the commands you need to run:

pnpm install
pnpm preheat
pnpm dev

That’s it! Your site should now be live.

With Docker

If you prefer to use Docker for your setup, follow these steps:

1. Ensure you’ve completed the prerequisites above.
2. Copy .env.example to .env and specify environment variables. You’ll need at least DATABASE_URL. You can refer to the section below for additional variables.
3. If using Docker, adjust your .env file to include the following

# required to run the seed commands within the container
DOCKER=true
DATABASE_HOST=localhost
DATABASE_PORT=3306
DATABASE_USER=syntax
DATABASE_PASSWORD=syntax
DATABASE_NAME=syntax
DATABASE_ROOT_PASSWORD=syntax
DATABASE_URL=mysql:$DATABASE_USER:$DATABASE_PASSWORD@$DATABASE_HOST:$DATABASE_PORT$DATABASE_NAME
REDIS_PORT=6379
REDIS_HTTP_PORT=8079
UPSPLASH_TOKEN=supersecret
UPSPLASH_URL=http:localhost:$REDIS_HTTP_PORT

4. In a separate terminal tab, run the Docker compose command:

docker compose up

5. Run:

pnpm preheat

6. Finally, start your development server:

pnpm dev

7. Now visit http://localhost:5173 to see the site in action!

Scripts

You can utilize the following commands for database operations:

• Generate Types: pnpm db:generate
• Database Studio: pnpm db:studio
• Database Migrations: pnpm db:push
• Database Seed: pnpm db:seed

About This Codebase

Your project structure is crucial! The primary code folders are located in the src directory, with exceptions for:

• actions: Reusable functions that act as lifecycle hooks on DOM elements
• assets: Static assets utilized via @import
• server: Database and server-side only reusable code
• lib: Components and files that are invaluable across multiple routes
• router: File System-based routing management
• state: Global State containers and resolvers
• styles: CSS files
• utilities: Global utility functions

Stylin’ the Media Queries

Your available media queries span a range of sizes to ensure responsiveness:

• @custom-media --below-small (width < 400px);
• @custom-media --below-med (width < 700px);
• @custom-media --below-large (width < 900px);
• @custom-media --below-xlarge (width < 1200px);
• @custom-media --above-small (width > 400px);
• @custom-media --above-med (width > 700px);
• @custom-media --above-large (width > 900px);
• @custom-media --above-xlarge (width > 1200px);

Usage in CSS would look like this:

@media (--above-med) { /* your styles here */ }

Where to Get Your Own Environment Variables

Obtaining your environment variables is paramount for functionality:

• PUBLIC_GITHUB_ID, GH_SECRET: Available from Github OAuth Apps.
• DEEPGRAM_SECRET: Obtainable at Deepgram.
• SENTRY_AUTH_TOKEN: Can be found at Sentry.
• OPENAI_API_KEY: Sign up at OpenAI.
• UPSPLASH_TOKEN, UPSPLASH_URL: Create a Redis DB at Upstash.
• YOUTUBE_API_KEY: Create this in the Google API Console.

Troubleshooting

If you run into any issues while setting up, here are some troubleshooting tips:

• Ensure all prerequisites are installed correctly.
• Double-check your environment variables in the .env file.
• Verify that Docker is running properly if using Docker.
• Consult the terminal for any error messages that could provide hints on what went wrong.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.