AWS EC2 Vite Config

By default, Vite is configured to listen only on `localhost`. To access the Vite server externally (from your machine, for example), you'll need to adjust Vite's configuration to make it accessible over your EC2 instance's public IP or domain.

### Solution: Update Vite Configuration
1. **Open the Vite Configuration File**:

Locate the `vite.config.js` (or `vite.config.ts`) file in your project, which is typically found in the root directory.

2. **Update the `server` Configuration**:

Modify the Vite `server` settings to allow access from external IPs:

export default defineConfig({
     server: {
       host: '0.0.0.0',      // Bind to all IPs (including public IP)
       port: 5173,           // Ensure the port is open in your AWS security group
       hmr: {
         host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com', // Your EC2 public DNS
         port: 5173,
       },
     },
   });

3. **Restart the Vite Server**:

After making changes, stop the current Vite server by pressing `Ctrl+C` in your SSH terminal, then run:

yarn run dev

### Step 2: Open Port 5173 in AWS Security Group
Ensure that your AWS security group allows inbound traffic on port `5173`:

1. Go to the [AWS Management Console](https://console.aws.amazon.com/).
2. Navigate to **EC2 Dashboard** > **Instances**.
3. Select your EC2 instance.
4. Click on the **Security** tab, then click on the **Security Group** linked to your instance.
5. Edit the **Inbound rules**:
– **Type**: Custom TCP Rule
– **Port Range**: 5173
– **Source**: Anywhere (or your IP for better security)

6. Save the changes.

### Step 3: Access the Application
Once everything is set up, you can access your Laravel Vue.js application in your browser using:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:5173

This should now display your Vite-powered Laravel Vue.js Breeze application running on your AWS EC2 instance.

Here's an updated version of your `vite.config.js`:

### Updated `vite.config.js`

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    cacheDir: './node_modules/.vite',
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/js/app-backend.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: '0.0.0.0', // Bind to all network interfaces, allowing external access
        port: 5173,      // Ensure this port is open in your AWS security group
        hmr: {
            host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com', // Your EC2 instance's public DNS
            port: 5173,
        },
        watch: {
            ignored: [
                '**/node_modules/**',
                '**/vendor/**',
                '**/.git/**',
                '**/.idea/**',
            ],
        },
    },
});

### Explanation of Changes
– **`host: '0.0.0.0'`**: This binds the Vite server to all available network interfaces, not just `localhost`.
– **`hmr` (Hot Module Replacement)**:
– **`host`**: Set this to your EC2 instance's public DNS to enable HMR to work correctly when accessed from your local machine.
– **`port`**: Ensure this matches the port your Vite server is running on (5173 by default).

### Additional Steps
1. **Restart Vite Server**:
After saving the changes, restart your Vite server:

yarn run dev

2. **Update AWS Security Group**:
Ensure that port `5173` is open in your AWS EC2 security group:
– Go to the [AWS Management Console](https://console.aws.amazon.com/).
– Navigate to **EC2 Dashboard** > **Instances**.
– Select your instance and go to the **Security** tab.
– Edit **Inbound Rules** for the associated Security Group:
– **Type**: Custom TCP Rule
– **Port Range**: `5173`
– **Source**: `0.0.0.0/0` (for public access) or your specific IP for restricted access.

3. **Access the Vite Server**:
– You should now be able to access your application via:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:5173

This configuration should allow you to access the Vite development server from any external device.

### 1. Confirm Your Vite Configuration
Make sure your `vite.config.js` is correctly configured:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    cacheDir: './node_modules/.vite',
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/js/app-backend.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: '0.0.0.0', // Bind to all IPs
        port: 5173,      // Port Vite will use
        hmr: {
            host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com', // EC2 public DNS
            port: 5173,
        },
        watch: {
            ignored: [
                '**/node_modules/**',
                '**/vendor/**',
                '**/.git/**',
                '**/.idea/**',
            ],
        },
    },
});

### 2. Open Port 5173 in Your AWS Security Group
If your security group is not configured to allow traffic on port `5173`, you’ll get a timeout.

– Go to the **AWS Management Console**.
– Navigate to **EC2 Dashboard** > **Instances**.
– Select your EC2 instance and note its **Security Group**.
– Click on the **Security Group** link.
– **Edit Inbound Rules**:
– **Type**: Custom TCP Rule
– **Port Range**: `5173`
– **Source**: `0.0.0.0/0` (or specify your IP for restricted access)

**Note**: Allowing `0.0.0.0/0` opens the port to the entire internet. For security, restrict it to your IP if possible.

### 3. Check the UFW (Uncomplicated Firewall) on Ubuntu
If you have UFW (Ubuntu's firewall) enabled, you might need to allow traffic on port `5173`.

– SSH into your EC2 instance:

ssh -i your-key.pem ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

– Check if UFW is enabled:

sudo ufw status

– If it’s active, allow port `5173`:

sudo ufw allow 5173
  sudo ufw reload

### 4. Restart the Vite Development Server
Ensure that after all these changes, you restart the Vite server:

yarn run dev

### 5. Check EC2 Instance for Public IP/DNS
Make sure you are using the correct public IP or DNS for your EC2 instance:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:5173

### 6. Test the Connection Locally on the EC2 Server
To confirm that Vite is listening on the right port, you can use `curl` from your EC2 instance:

curl http://localhost:5173

If it responds with HTML content, it means the Vite server is running correctly.

### 7. Check for Processes Using Port 5173
Ensure no other processes are using port `5173`:

sudo lsof -i:5173

If another process is using the port, kill it:

sudo kill -9 <PID>

### 8. Use a Different Port (if needed)
Sometimes AWS might block certain ports. Try using a different port (e.g., `3000`) in your Vite config:

server: {
    host: '0.0.0.0',
    port: 3000,
    hmr: {
        host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com',
        port: 3000,
    },
},

Then, update your security group to allow the new port and restart the server:

yarn run dev

### Conclusion
By following these steps, you should be able to resolve the connection timeout issue and successfully access your Vite development server externally.

To make your Vite development server publicly accessible, you need to use your **EC2 instance's public IP address or DNS name**. Let's go through the necessary troubleshooting steps to ensure everything is set up correctly.

### Step 1: Confirm Your EC2 Instance's Public IP or DNS
– Go to your **AWS EC2 Dashboard**.
– Select your instance.
– Note the **Public IPv4 address** or **Public IPv4 DNS** (e.g., `ec2-16-170-254-93.eu-north-1.compute.amazonaws.com`).

### Step 2: Update Vite Configuration to Use the Public IP
In your `vite.config.js`, ensure the server configuration is set up to bind to all interfaces and uses your instance's public DNS for HMR:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    cacheDir: './node_modules/.vite',
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/js/app-backend.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: '0.0.0.0', // Bind to all IP addresses
        port: 3000,      // Use port 3000
        hmr: {
            host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com', // Use your EC2 public DNS
            port: 3000,
        },
        watch: {
            ignored: [
                '**/node_modules/**',
                '**/vendor/**',
                '**/.git/**',
                '**/.idea/**',
            ],
        },
    },
});

### Step 3: Open Port 3000 in Your AWS Security Group
– In your **AWS Management Console**, go to **Security Groups**.
– Find the security group associated with your EC2 instance.
– Edit the **Inbound Rules**:
– **Type**: Custom TCP Rule
– **Port Range**: `3000`
– **Source**: `0.0.0.0/0` (for public access) or your specific IP for restricted access.

### Step 4: Restart the Vite Development Server
SSH into your EC2 instance and restart your Vite server:

ssh -i your-key.pem ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com
cd /var/www/share
yarn run dev

### Step 5: Access Your Application
Now, open your browser and go to:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:3000

### Step 6: Test Locally on the EC2 Instance
To verify that Vite is running correctly, try curling it from your EC2 instance:

curl http://localhost:3000

If you get a response with HTML content, it means Vite is running correctly.

### Additional Troubleshooting
– **Disable Firewall (UFW)**: If you have UFW enabled on your EC2 instance, allow port `3000`:

sudo ufw allow 3000
  sudo ufw reload

– **Check Vite Logs**: Look for any errors when running `yarn run dev` to see if there's an issue with Vite starting up.

By following these steps, you should be able to access your Laravel Vue.js Breeze application on your AWS EC2 instance through its public IP or DNS.

### 1. Confirm Vite Configuration
Double-check that your `vite.config.js` is correctly set up for external access:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    cacheDir: './node_modules/.vite',
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/js/app-backend.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: '0.0.0.0',     // Bind to all IPs
        port: 3000,          // Port Vite will use
        hmr: {
            host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com', // Your EC2 public DNS
            port: 3000,
        },
        watch: {
            ignored: [
                '**/node_modules/**',
                '**/vendor/**',
                '**/.git/**',
                '**/.idea/**',
            ],
        },
    },
});

– **`host: '0.0.0.0'`**: This ensures that Vite listens on all network interfaces, not just `localhost`.
– **`hmr.host`**: Ensure that you're using your EC2 instance's **public DNS** (not the private IP).
– **`port: 3000`**: Make sure you're using the correct port, and that this port is allowed through security groups and any firewalls.

### 2. Open Port 3000 in AWS Security Group
Your EC2 instance needs to allow traffic on port `3000` from the outside world. Follow these steps:

1. Go to the **AWS Management Console**.
2. Navigate to **EC2 Dashboard** > **Instances**.
3. Select your EC2 instance.
4. Click on the **Security** tab and note the **Security Group** linked to the instance.
5. Click on the **Security Group** to open the inbound rules.
6. **Edit Inbound Rules**:
– **Type**: Custom TCP Rule
– **Port Range**: `3000`
– **Source**: `0.0.0.0/0` (for open access) or restrict to your IP address for added security.

**Important**: After opening port `3000`, make sure to **save the changes**.

### 3. Check EC2's Firewall (UFW)
If the EC2 instance has a firewall (UFW) configured, you need to allow port `3000` explicitly. You can check and configure it with these steps:

1. SSH into your EC2 instance:

ssh -i your-key.pem ubuntu@ec2-16-170-254-93.eu-north-1.compute.amazonaws.com

2. Check if UFW is enabled:

sudo ufw status

3. If UFW is enabled, allow port `3000`:

sudo ufw allow 3000
   sudo ufw reload

4. After this, check the firewall again:

sudo ufw status

Make sure port `3000` is listed as "ALLOW".

### 4. Check Vite Server Logs
Check the terminal where you ran `yarn run dev` for any errors. If Vite is running correctly, it should show a message like:

Vite v4.0.0 dev server running at:
> Local:  http://localhost:3000/
> Network:  http://<your-ec2-public-ip>:3000/

If there are errors, resolve them first.

### 5. Check EC2 Instance's Public DNS/IP
Make sure you are using the correct public DNS or IP address to access the server.

– Go to your **EC2 instance** dashboard in AWS.
– Under **Public IPv4 DNS** or **Public IPv4 address**, use that IP or DNS to access the site:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:3000

If you're unsure of the public IP/DNS, double-check in the **EC2 Dashboard** > **Instances**.

### 6. Test Locally on the EC2 Instance
To ensure that the Vite development server is running correctly on the EC2 instance itself, you can try accessing it locally from the EC2 server:

curl http://localhost:3000

If this works, Vite is running correctly but might not be accessible externally due to network/firewall issues.

### 7. Check if Vite is Listening on the Correct Port
If `curl http://localhost:3000` works on your EC2 instance, but accessing it externally doesn't, verify if Vite is bound to the right port and interface.

– You can use `lsof` to see which process is using port `3000`:

sudo lsof -i:3000

If Vite is running on the port and there is no conflict, you should see it listed.

### 8. Restart Vite
After making sure everything is configured, restart the Vite server:

cd /var/www/share
yarn run dev

### 9. Additional Step: Try Using a Different Port
If all else fails, try switching to a different port (e.g., `8080`) and updating both the `vite.config.js` and security group to match the new port.

server: {
    host: '0.0.0.0',
    port: 8080,
    hmr: {
        host: 'ec2-16-170-254-93.eu-north-1.compute.amazonaws.com',
        port: 8080,
    },
},

Update the security group to allow inbound traffic on port `8080` as well.

### 10. Final Testing
After making these changes, try to access the app again:

http://ec2-16-170-254-93.eu-north-1.compute.amazonaws.com:3000

If it's still not working, please provide any error messages or logs from your Vite server that might help further diagnose the issue.