SvelteKit

SETUP BACKEND DATABASE

server.js

require('dotenv').config()

const express = require('express');

const cors = require('cors');

const app = express();

app.get('/', (req, res) => {

    res.send('<h1>Hello, Express.js Server!</h1>');

});

const port = process.env.PORT || 3000;

app.listen(port, () => {

    console.log(`Server is running on http://localhost:${port}`);

});

PART 1 (COMPLETED)

SETUP db.js & .env

config/db.js

require('dotenv').config()

const mysql = require('mysql2/promise');

//CONNECT TO DATABASE

const pool = mysql.createPool({

    host: process.env.HOST,

    user: process.env.USER,

    database: process.env.DATABASE,

    password: process.env.PASSWORD,

});

module.exports = pool

.env

PORT=3000

HOST=localhost

USER=root

PASSWORD=

DATABASE=sveltekit

READ DATABASE

routes/readMany/+page.svelte

<script>

    import { onMount } from "svelte";

    let data = [];

    // console.log(data)

    onMount(async () => {

        const res = await fetch("http://localhost:3000/users"); //BACKEND ENDPOINT

        const response = await res.json();

        data = response.data

    });

    let thead = ["#", "Name", "Email", "Password"];

</script>

<section class="container">

    <h2 class="text-center text-secondary mt-4 mb-4">Read MySQL Database</h2>

    <p class="text-center mb-5">

        <a href="/">Back</a>

    </p>

    <h4 class="text-secondary">All User Information</h4>

    {#if data.length==0}

        <p class="text-danger mt-5">Loading...</p>

    {:else}

        <table class="table mt-5">

            <tr>

                {#each thead as hd}

                    <th>{hd}</th>

                {/each}

            </tr>

            <tbody>

                {#each data as row, idx}

                    <tr>

                        <td>{idx + 1}</td>

                        <td>{row.name}</td>

                        <td>{row.email}</td>

                        <td>{row.password}</td>

                    </tr>

                {/each}

            </tbody>

        </table>

    {/if}

</section>