Skip to content

Commit

Permalink
Merge pull request #5 from thedevdojo/wave-on-digitalocean
Browse files Browse the repository at this point in the history
Add wave deploy guide to Droplet
  • Loading branch information
tnylea authored Nov 25, 2024
2 parents 91c7fcd + cb5170a commit f492b43
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 14 deletions.
184 changes: 184 additions & 0 deletions content/docs/guides/deploy-on-digitalocean.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
---
title: Deploying Wave to DigitalOcean
description: Learn how to deploy Wave to DigitalOcean using the Laravel One-Click Droplet.
prevTitle: 'Using Filament With Volt'
prevURL: '/docs/guides/using-filament-with-volt'
nextTitle: ''
nextURL: null
---

# Deploying Wave to DigitalOcean

Wave can be deployed seamlessly using DigitalOcean's Laravel One-Click Droplet. The Laravel One-Click app provides a pre-configured environment, saving time and effort when setting up your project.

---

## Prerequisites

Before you begin, ensure you have:

- A [DigitalOcean account](https://m.do.co/c/dc19b9819d06).
- A registered domain name (optional but recommended for SSL).
- Basic familiarity with SSH and terminal commands.

---

## Step 1: Create the Laravel One-Click Droplet

1. Navigate to the [Laravel One-Click Marketplace listing](https://marketplace.digitalocean.com/apps/laravel).
2. Click **Create Laravel Droplet** and configure:
- Choose a plan (Basic, General Purpose, or Premium).
- Select a data center region close to your target audience.
- Recomended, enable backups for added security.

3. Complete the creation process and note the public IPv4 address of the Droplet.

---

## Step 2: Log Into Your Droplet

1. Open your terminal and SSH into the Droplet:

```bash
ssh root@your_droplet_public_ipv4
```

2. If prompted, set a new password or confirm your SSH key.

---

## Step 3: Configure Your Domain (Optional)

During the initial setup, the interactive script will prompt you for your domain or subdomain. Enter your domain (e.g., `example.com`) and proceed.

To ensure proper domain resolution, configure DNS records for your domain:
- **A Record**: `example.com` -> `your_droplet_public_ipv4`
- **A Record**: `www.example.com` -> `your_droplet_public_ipv4`

---

## Step 4: Enable SSL (Recommended)

You will be prompted to enable SSL via Let's Encrypt. If you've pointed your domain to the Droplet's IP address, choose `y` to enable SSL. This secures your site with HTTPS.
---
## Step 5: Download and Set Up Wave
1. **Access the Droplet**:
Once connected to the Droplet, you will be in the `/root` directory.
Switch to the `larasail` user:
```bash
su larasail
```
Change to the web root:
```bash
cd /var/www/
```
2. **Download Wave**:
Replace the existing Laravel project with Wave. First, back up the existing project:
```bash
mv /var/www/laravel /var/www/laravel_backup
```
Clone Wave from GitHub:
```bash
git clone [email protected]:thedevdojo/wave.git laravel
```
Change the `thedevedojo` to your GitHub username if you forked the repository.
Then update the permissions for the storage directory so that the web server can write to it and store temporary files:
```bash
sudo chown -R larasail:www-data /var/www/laravel/storage
```
3. **Install Dependencies**:
Access the `/var/www/laravel` directory:
```bash
cd /var/www/laravel
```
Inside the `/var/www/laravel` directory, run:
```bash
composer install
```
4. **Environment Configuration**:
Copy and configure the `.env` file:
```bash
cp .env.example .env
nano .env
```
You can use a SQLite database or configure MySQL database. You can create a database and user for it by using the following command:
```bash
larasail database init [--user wave] [--db wave]
```
Update the `DB_CONNECTION`, `DB_HOST`, `DB_PORT`, `DB_DATABASE`, `DB_USERNAME`, and `DB_PASSWORD` fields in the `.env` file.
5. **Migrate and Seed the Database**:
```bash
php artisan migrate
php artisan db:seed
```
6. **Set the `APP_URL`**:
Update the `APP_URL` in the `.env` file with your domain or IP address:
```bash
APP_URL=http://example.com
```
It needs to exactly match the domain you used during the setup process including the protocol.
7. **Build Assets**:
Build the static assets:
```bash
npm install && npm run dev
```
---
## Step 6: Verify the Installation
1. Visit your Droplet's public IP address or domain in a web browser.
If everything is configured correctly, you'll see the Wave installation screen.
2. Log in with the default admin credentials:
- **Email**: `[email protected]`
- **Password**: `password`
---
## Additional Notes
- **Managed Databases**: If using a DigitalOcean Managed Database, connect Wave by updating the `DATABASE_URL` in the `.env` file with the provided credentials.
- **SSL Configuration**: Run the following if SSL wasn't enabled initially:

```bash
certbot --nginx -d example.com -d www.example.com
```

---

Wave is now ready to sail on DigitalOcean! Raise the anchor and prepare for smooth sailing ahead. For more customization options, check out [Wave's documentation](https://wave.devdojo.com/).
19 changes: 9 additions & 10 deletions content/docs/guides/using-filament-with-volt.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ title: Using Filament With Volt
description: Learn how to use FilamentPHP with any Volt page
prevTitle: 'About Guides'
prevURL: '/docs/guides/about'
nextTitle: ''
nextURL: null
nextTitle: 'Deploying Wave to DigitalOcean'
nextURL: '/docs/guides/deploy-on-digitalocean'
---

# Using Filament with Volt
Expand Down Expand Up @@ -75,11 +75,11 @@ Inside of our `pages/projects/index.blade.php` page, we listed out a table view
<x-layouts.app>
@volt('projects')
<x-app.container>
<div class="flex items-center mb-5 justify-between">
<div class="flex items-center justify-between mb-5">
<x-app.heading title="Projects" description="Check out your projects below" :border="false" />
<x-button tag="a" href="/projects/create">New Project</x-button>
</div>
<div class="overflow-x-auto rounded-lg border">
<div class="overflow-x-auto border rounded-lg">
{{ $this->table }}
</div>
</x-app.container>
Expand Down Expand Up @@ -164,14 +164,14 @@ We can utilize the <a href="https://filamentphp.com/docs/forms/installation" tar
<x-layouts.app>
@volt('projects.create')
<x-app.container class="max-w-xl">
<div class="flex items-center mb-5 justify-between">
<div class="flex items-center justify-between mb-5">
<x-app.heading title="Create Project" description="Fill out the form below to create a new project" :border="false" />
</div>
<form wire:submit="create" class="space-y-6">
{{ $this->form }}
<div class="flex justify-end gap-x-3">
<x-button tag="a" href="/projects" color="secondary">Cancel</x-button>
<x-button type="submit" class="bg-primary-600 hover:bg-primary-500 text-white">
<x-button type="submit" class="text-white bg-primary-600 hover:bg-primary-500">
Create Project
</x-button>
</div>
Expand Down Expand Up @@ -326,7 +326,7 @@ We can simplify the process of viewing, creating, editing, and deleting our proj
<x-layouts.app>
@volt('projects')
<x-app.container class="max-w-5xl">
<div class="flex items-center mb-5 justify-between">
<div class="flex items-center justify-between mb-5">
<x-app.heading title="Projects" description="Check out your projects below" :border="false"/>
<x-modal id="create-project" width="md" :slide-over="true">
<x-slot name="trigger">
Expand All @@ -337,15 +337,15 @@ We can simplify the process of viewing, creating, editing, and deleting our proj
</x-slot>
<form wire:submit="create" class="space-y-6">
{{ $this->form }}
<div class="mt-6 flex justify-end">
<div class="flex justify-end mt-6">
<x-button type="submit" wire:target="create">
Create Project
</x-button>
</div>
</form>
</x-modal>
</div>
<div class="overflow-x-auto rounded-lg border">
<div class="overflow-x-auto border rounded-lg">
{{ $this->table }}
</div>
</x-app.container>
Expand All @@ -367,4 +367,3 @@ You can also click the **New Project** button and you'll see a slide-over open a
<img src="https://cdn.devdojo.com/images/october2024/projects-create1.png" class="w-full rounded" alt="Projects Create">

Combining the Table and the Form builder in the same page will make it easer to add functionality to our application.

14 changes: 10 additions & 4 deletions includes/docs-sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@
</button>
</nav>
</div>
<div x-data="{
<div x-data="{
collapsed: true,
unCollapseBasedOnURL(){
let buttons = $el.querySelectorAll('nav button');
Expand Down Expand Up @@ -288,9 +288,15 @@
<svg class="z-20 flex-shrink-0 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path d="M78.7 167A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24a80 80 0 0 1 51.34 142.9A24.3 24.3 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19Z" opacity=".2"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M88 232h80M128 200v-56M96 112l32 32 32-32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M78.7 167A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24a80 80 0 0 1 51.34 142.9A24.3 24.3 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19Z"/></svg>
<span class="relative truncate">Using Filament with Volt</span>
</button>
</nav>
<button id="deploying-wave-to-digitalocean-docs" hx-get="{ url('/docs/guides/deploy-on-digitalocean') }" hx-target="#docs-content" hx-select="#docs-content" hx-swap="outerHTML" hx-push-url="true" @click="docSidebarClick($el)"
:class="{ 'text-white before:bg-neutral-800 dark:before:bg-neutral-100 dark:text-neutral-900' : route.includes($el.getAttribute('hx-get')), 'text-neutral-500 dark:text-neutral-400 dark:hover:text-black hover:text-black hover:before:bg-neutral-200' : route != $el.getAttribute('hx-get') }"
class="relative flex items-center w-full gap-2 px-3 py-2 text-xs font-medium rounded-md text-neutral-500 group focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-1 focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-400 hover:text-black hover:before:bg-neutral-200">
<svg class="z-20 flex-shrink-0 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" opacity="0.2"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M104 144h48M128 176a48 48 0 1 0 0-96 48 48 0 0 0 0 96Z"/></svg>
<span class="relative truncate">Deploying Wave to DigitalOcean</span>
</button>
</nav>
</div>
<div x-data="{
<div x-data="{
collapsed: true,
unCollapseBasedOnURL(){
let buttons = $el.querySelectorAll('nav button');
Expand Down Expand Up @@ -318,4 +324,4 @@
</a>
</nav>
</div>
</div>
</div>

0 comments on commit f492b43

Please sign in to comment.