Skip to main content

​
Quickstart

This guide will help you set up the Lake Ozark Christian Church website on your local development environment and make your first changes.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 18 or higher (check with node --version)
  • npm or bun package manager
  • Git for cloning the repository
  • A code editor (VS Code recommended)
This project uses Astro 5 with server-side rendering. Some features like location detection and API routes require the dev server to be running.

​
Installation

Follow these steps to get the site running locally:
1

Clone the repository

Clone the Lake Ozark Christian Church repository to your local machine:
git clone <repository-url>
cd lake-ozark-christian-church
2

Install dependencies

Install all required dependencies using npm or bun:
npm install
This will install all dependencies listed in package.json, including:
  • Astro 5.16.4
  • React 18.3.1
  • Tailwind CSS 3.4.17
  • Vercel adapter
  • YouTube integration
  • Sentry monitoring
3

Start the development server

Run the development server:
npm run dev
The server will start at http://localhost:4321
4

Open in your browser

Navigate to http://localhost:4321 to see the site running locally.You should see the Lake Ozark Christian Church homepage with all components loaded.
Location-based features may behave differently in development. The site checks if visitors are local to the Lake Ozark area and adjusts content accordingly.

​
Available commands

Here are all the npm commands available in this project:
CommandAction
npm run devStarts local dev server at localhost:4321
npm startAlternative command to start dev server
npm run buildBuilds the production site to ./dist/
npm run previewPreview the built site locally before deploying
npm run astroRun Astro CLI commands (add, check, etc.)
npm run astro -- --helpGet help with the Astro CLI

​
Making your first change

Let’s make a simple change to verify everything is working:
1

Open the homepage

Open src/pages/index.astro in your code editor. This is the main homepage file.
2

Find the welcome section

Look for the welcome section in the file. You’ll see Astro component syntax with frontmatter at the top and HTML-like template code below.
3

Make a change

Try modifying some text in the page. For example, change a heading or paragraph text.
src/pages/index.astro
---
import Layout from '../layouts/Layout.astro';
// ... other imports
---
<Layout title="Home">
  <h1>Welcome to Lake Ozark Christian Church!</h1>
  <!-- Your changes here -->
</Layout>
4

See the changes

Save the file and check your browser. Astro has hot module reloading, so changes should appear automatically.

​
Creating a new page

Astro uses file-based routing. Creating a new page is as simple as adding a new file to src/pages/: 
---
import Layout from '../layouts/Layout.astro';

// This is the frontmatter - TypeScript/JavaScript code runs on the server
const pageTitle = "Example Page";
const pageDescription = "This is an example page for demonstration";
---

<Layout title={pageTitle} description={pageDescription}>
  <div class="container mx-auto px-6 py-12">
    <h1 class="text-4xl font-light mb-6 text-gray-900">
      {pageTitle}
    </h1>
    <p class="text-lg text-gray-600">
      This is an example page created in the Lake Ozark Christian Church website.
    </p>
  </div>
</Layout>
Save this file and navigate to http://localhost:4321/example to see your new page.

​
Using a component

Let’s add an existing component to your new page: 
---
import Layout from '../layouts/Layout.astro';
import PrayerRequestForm from '../components/PrayerRequestForm.astro';

const pageTitle = "Example Page";
---

<Layout title={pageTitle}>
  <div class="container mx-auto px-6 py-12">
    <h1 class="text-4xl font-light mb-6 text-gray-900">
      {pageTitle}
    </h1>
    
    <!-- Include the Prayer Request Form component -->
    <PrayerRequestForm />
  </div>
</Layout>
The PrayerRequestForm component is now embedded in your page with all its functionality.

​
Project structure overview

Here’s a quick overview of the main directories: 
lake-ozark-christian-church/
├── src/
│   ├── pages/          # File-based routing - each file becomes a page
│   ├── components/     # Reusable Astro and React components
│   ├── layouts/        # Page layout templates
│   ├── utils/          # Utility functions and helpers
│   ├── ui/             # UI components (Header, Footer)
│   └── blogs/          # Markdown blog posts
├── public/             # Static assets (images, fonts, etc.)
├── astro.config.mjs    # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
└── package.json        # Dependencies and scripts
For a detailed explanation of the project structure, see the Project structure documentation.

​
Building for production

When you’re ready to build for production: 
npm run build
This creates an optimized production build in the ./dist/ directory. You can preview the production build locally with: 
npm run preview

​
Deployment

This project is configured for deployment on Vercel using the @astrojs/vercel adapter: 
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel()
});
The output: 'server' setting enables server-side rendering for API routes and dynamic features.

​
Next steps

Now that you have the site running locally:

Project structure

Learn about the codebase organization and directory structure

Components

Explore the available components and how to use them

Pages

Understand routing and page creation in detail

Styling

Learn about Tailwind CSS and the custom theme

​
Troubleshooting

Port 4321 is already in use If you see an error about port 4321 being in use, you can specify a different port: 
npm run dev -- --port 3000
Dependencies fail to install Make sure you’re using Node.js 18 or higher: 
node --version
Clear the node_modules and try again: 
rm -rf node_modules package-lock.json
npm install
Changes not appearing Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R) to clear cached assets.

Build docs developers (and LLMs) love

Get started for freeTalk to us