DEV Community: Denis Donici

The Evolution of Meta-Frameworks: Beyond the JavaScript Ecosystem

Denis Donici — Sat, 10 Jan 2026 12:48:19 +0000

The term “meta-framework” is now a standard part of web development. We use it to describe full stack frameworks like Next.js, Nuxt, and SvelteKit. To understand this term properly, we must look at the word meta itself. In this context, it refers to a higher level of abstraction—a framework that sits on top of a library like React or Svelte and handles concerns such as routing, server-side rendering, and data fetching.

My work with these tools started early. I have used Svelte since the Sapper era (the predecessor of SvelteKit). Svelte was go to choice across many projects—from small pet projects to startups and large corporate systems. The backends I worked with varied greatly, ranging from Strapi, Nest, Fiber, Phoenix (Elixir), and .NET etc.

However, the current definition of a meta-framework is too narrow. A true meta framework should handle different languages and ecosystems. It should not be limited to TypeScript and JavaScript alone.

The Current State: Frontend as an Afterthought

Today, the frontend is often treated as an afterthought. It constantly chases changes made in the backend, leading to broken types, runtime mismatches, and data errors.

In an ideal world, the solution is a schema-first approach, where APIs are defined upfront and typed clients are generated using specifications like OpenAPI.

Modern JavaScript frameworks attempt to solve this with full type compatibility between frontend and backend. While this works well, it remains locked inside the JavaScript ecosystem.

The reality is different. The web runs on many languages:

PHP still powers over 70% of websites with a known server language.
Python continues to grow rapidly, especially in enterprise, data, and AI-driven systems.

A meta-framework must bridge these worlds instead of isolating itself within one. Seamless functional compatibility between different parts of the system, regardless of parts of the stack.

The Case for Inertia.js: The Closest Thing to a Real Meta Framework

Inertia.js is one of the strongest examples of what a meta-framework looks like today. It allows developers to build single-page applications while keeping classic backends like Laravel or Rails in control. Modern frontend libraries can still be used without turning the backend into a pure API.

That said, Inertia comes with trade-offs:

Limited flexibility compared to native frontend frameworks
Challenges with complex client-side state management when compared to something like SvelteKit

Even so, it demonstrates a direction that most meta-frameworks avoid.

SvelteKit as a Universal Bridge

For those new to SvelteKit, one of its strengths lies in its adapter system. Adapters allow projects to target different platforms:

Node
Bun
Static
Vercel
Cloudflare
and others

Two years ago, Rich Harris (the creator of Svelte) published the Svelte Tenets. In that discussion, I proposed an idea that looked roughly like this:

+page.server.go   (adapter/go)
+page.server.py   (adapter/python)
+page.server.rs   (adapter/rust)
+page.server.rb   (adapter/ruby)
+page.server.ex   (adapter/elixir)
+page.server.php  (adapter/php)

The idea was simple:
Adapters would allow SvelteKit to act as a frontend templating layer, while server-side functionality would be implemented in the language of choice.

Example Project Structure (Go Adapter)

src/
  hooks.server.go
  functions/
    posts.remote.go
  routes/
    +page.svelte
    +page.server.go
    api/
      +server.go

Community Experiments in Multi-Language SvelteKit

The community is already exploring this idea through several active projects:

Ruby on Svelte
Connecting Rails with the Svelte ecosystem
Golang on Svelte
Using Go for performance while keeping SvelteKit-style routing
PHP on Svelte
Projects like ZeeltePHP bridging PHP backends with Svelte
Python on Svelte
Tools such as SvelteKit-Modal enabling Python integrations

Svelte’s compiler-based approach makes this possible. It produces highly optimized output that can work with virtually any backend. This design places Svelte ahead of its time.

Challenges and Risks

This approach is not without difficulties:

Developer Experience
Maintaining type safety across multiple languages is hard.
Server-Side Rendering
Svelte still requires a JavaScript runtime to execute SSR.
Tooling
Most development tools assume a pure JavaScript stack. Expanding beyond that requires new workflows and mental models.

Notes

There is an option to add an /api folder in the root of the project and use serverless functions as go or python endpoints. However this depends on vendor of the platform and doesn't use full potential of interoperability.

Looking Forward

SvelteKit has the potential to become a backend language–agnostic framework—one that moves beyond the JavaScript silo.

Developers could choose:

Go for speed
Python for AI and data processing
Elixir for concurrency
PHP for mature and well known ecosystems

—all without sacrificing a modern frontend experience.

Community efforts show that the demand already exists. My hope is that the Svelte core team continues to consider this direction. With its compiler-first philosophy, Svelte can remain one of the most adaptable and forward-looking tools in the future of web development.

Writing a graphQL fullstack Svelte Web App with Sapper & Postgraphile

Denis Donici — Mon, 14 Jun 2021 14:01:26 +0000

Writing a graphQL fullstack Svelte Web App with Sapper & Postgraphile

Finally I've got some free time for writing, so today I would like to share with you a simple yet powerfull way to write full stack web apps using my favorite tools:

Sapper/Svelte
Postgres/SQL
Postgraphile/graphQL

A friend of mine asked me if I could help him with some boring paperwork stuff by creating a internal CRM for his medical office. I've decided to give it a shot. You can check the repo and see the internals if you don't have time for lenghy explanation or if you are intersted in details - read on. The project consists of a client list with personal data (like, dob, telephone etc.) and also a monthly medical intake data for each client like WBC, RBC, HBG, HCT etc.

Postgres

First thing first, we will start with creating a database in Postgres and defining tables for our usecase.

sudo -u postgres psql
CREATE USER admin WITH PASSWORD 'adminpassword';
CREATE DATABASE medical_db OWNER admin;
\c medical_db admin localhost 5432

CREATE TABLE clients (
    client_id SERIAL PRIMARY KEY,
    first_name text NOT NULL,
    last_name text NOT NULL,
    telephone text NOT NULL UNIQUE,
    gender varchar(6) NOT NULL CHECK (gender IN ('MALE', 'FEMALE')),
    active boolean NOT NULL DEFAULT TRUE,
    dob date NOT NULL
);

CREATE TABLE intake (
    intake_id SERIAL PRIMARY KEY,
    client_id INTEGER NOT NULL REFERENCES clients (client_id),
    weight decimal(4,1) NOT NULL,
    wbc decimal(4,1) NOT NULL,
    rbc decimal(4,1) NOT NULL,
    hbg decimal(4,1) NOT NULL,
    hct decimal(4,1) NOT NULL CHECK (hct >= 0 AND hct <= 100),
    intake_time timestamp DEFAULT now()
);

If you dont know SQL, it is a shame. Even though it might not seem to be as fancy or cool like modern day ORMs, don't be decieved, because SQL is very very powerfull language. The fact is, the ORMs are not even 20% close to all the capabilities of SQL. Learn it. It can do magic.

Setting up Sapper

Now let's move on and create the basis for our Sapper app.

npx degit "sveltejs/sapper-template#rollup" medical-app
cd medical-app
npm install

We have just set up the default project. It comes with some boilerplate stuff that we won't need.
Get rid of all the default styles in /static/src/global.css
Also, delete all the files that are in /src/routes and /src/components folders.

Now, we won't style the project ourself. Will let this little file do it for us

<link rel="stylesheet" href="https://unpkg.com/mvp.css">

Just ad this to the head of the /src/template.html file

MVP.css is a minimalist CSS framework no class names at all. I usually use it to save time for quick prototype styling. I like it for it's simplicity and elegant design.

Setting up Postgraphile

Great. Now here comes my favorite part, Postgraphile.
This thing is a beast in itself and I totally recommend checking it out. What Postgraphile actually does, it reads the definition of the tables that we have created previously, and creates automagicaly queries and mutations so we don't have to write them manualy ourselves. Isn't that cool? Besides that, it provides us with a frontend UI that we will use later to check our queries. It is battle tested piece of software and has a very welcoming and great team behind it.

Let's install Postgraphile

npm i postgraphile

For queries and mutations I use awesome @urql client for Svelte. It is light and intuitive to work with.

npm i -D @urql/svelte graphql

In order to make postgraphile work, import into the /src/server.js file

import { postgraphile } from 'postgraphile';

and add Postgraphile as middleware for polka

...
polka()
    .use(
    postgraphile(
               process.env.DATABASE_URL || "postgres://admin:adminpassword@localhost:5432/medical_db",
               "public",
               {
                 watchPg: true,
                 graphiql: true,
                 enhanceGraphiql: true,
               }
             ),
      compression({ threshold: 0 })
...

That's it.

Testing Postgraphile

Now if you start the server with

npm run dev

and visit the

localhost:3000/graphiql

route you sould be greeted with a graphiql, a web interface for queries and mutations that we talked about earlier.

Let's make sure queries and mutations are working properly.
We will fetch some non existent clients.

query MyQuery {
  allClients {
    nodes {
      firstName
      lastName
      clientId
      nodeId
      telephone
      dob
    }
  }
}

Abviously the result is an empty array since we haven't added any clients yet. Let's quickly add one.

Fetch it again and voila.

We got a graphql server working on Sapper with very little work. The only thing is left now is to create some interface so we can interact with our database using graphQL and lovely Svelte

Svelte & graphQL with @urql/svelte

We do not have any routes yet and no layout for them. So let's make some.

I have created the following routes:

index.svelte
/clients/newclient.svelte
/clients/[slug]/index.svelte
/clients/[slug]/intakes/newintake.svelte
/clients/[slug]/intakes/[slug].svelte

Also in the /src/routes folder we need a layout.svelte file with a slot wrapped in the main tags

<script>
  import Nav from "../components/Nav.svelte";
  import {  createClient, setClient, fetchExchange } from "@urql/svelte";

  const client = createClient({
    url: "http://localhost:3000/graphql",
    exchanges: [fetchExchange],
  });

  setClient(client);
</script>
<Nav />
<main>
    <slot></slot>
</main>

and the Nav.svelte in the components folder

<nav>
  <ul>
    <li>
      <a href="/">Clients</a>
    </li>
    <li>
      <a href="/clients/newclient">Add a client</a>
    </li>
    <li>
      <a href="graphiql">Postgraphile</a>
    </li>
  </ul>
</nav>

Notice that we have also initialized the @urql svelte client pointing to our Postgraphile graphql endpoint in the layout page, so we can access it from any route.

The main index.svelte

<script>
  import {
    operationStore,
    query,
  } from "@urql/svelte";

  import ClientsTable from "../components/ClientsTable.svelte";

  const clients = operationStore(
    `
    query MyQuery {
      allClients {
        nodes {
          clientId
          firstName
          lastName
          active
          telephone
          intakesByClientId {
            totalCount
          }
        }
      }
    }
    `,
    { requestPolicy: "cache-first" }
  );

  query(clients);

  const refresh = () => ($clients.context = { requestPolicy: "network-only" });
</script>

<svelte:head>
  <title>Postgraphile Clients</title>
</svelte:head>
<section>
  <header>
    <h1>Client List</h1>
    <button on:click={refresh}>refresh</button>
  </header>

  {#if $clients.fetching}
    <h2>Loading...</h2>
  {:else if $clients.error}
    <h2>Oh no... {$clients.error.message}</h2>
  {:else}
    <ClientsTable clients={$clients?.data?.allClients?.nodes} />
  {/if}
</section>

Creating a form for new client

In /clients/newclient.svelte lets import a component with a form for client creation

<script>
  import ClientForm from "../../components/ClientForm.svelte";
</script>

<ClientForm />

And here is the actual component

<script>
  import { mutation } from "@urql/svelte";
  import { onMount } from "svelte";
  import { goto } from "@sapper/app";

  const createClientMutation = mutation({
    query: `
      mutation MyMutationCreate(
          $firstName: String!, 
          $lastName: String!, 
          $telephone: String!, 
          $gender: String!, 
          $dob: Date!,
          $active: Boolean!
          ) {
            createClient(
                    input: {
                    client: {
                        firstName: $firstName
                        lastName: $lastName
                        telephone: $telephone
                        gender: $gender
                        dob: $dob,
                        active: $active
                    }
                    }
                ) {
                    client {
                    firstName
                    lastName
                    telephone
                    nodeId
                    clientId
                    active
                    }
            }
      }
    `,
  });

  const updateClientMutation = mutation({
    query: `
      mutation MyMutationUpdate(
          $id: Int!,
          $firstName: String, 
          $lastName: String, 
          $telephone: String, 
          $gender: String, 
          $dob: Date,
          $active: Boolean
          ) {
            updateClientByClientId(
                input: {
                clientPatch: {
                    active: $active
                    clientId: $id
                    dob: $dob
                    gender: $gender
                    firstName: $firstName
                    lastName: $lastName
                    telephone: $telephone
                }
                clientId: $id
                }
            ) {
                client {
                firstName
                lastName
                }
            }
      }
    `,
  });

  let clt = {
    firstName: "",
    lastName: "",
    telephone: "",
    dob: "",
    gender: "",
    active: true,
  };

  export let originalClient;

  const createNewClient = async () => {
    const responseCreate = await createClientMutation({
      ...clt,
      dob: new Date(clt.dob),
    });
    // console.log(responseCreate);
    if (responseUpdate.data) {
      goto("/");
    }
  };

  const updateClient = async () => {
    const responseUpdate = await updateClientMutation({
      ...clt,
      id: originalClient.clientId,
      dob: new Date(clt.dob),
    });
    // console.log(responseUpdate);
    if (responseUpdate.data) {
      goto("/");
    }
  };

  const handleClient = async () => {
    originalClient ? updateClient() : createNewClient();
  };

  onMount(() => {
    if (originalClient) {
      clt = Object.assign({}, originalClient);
    }
  });
</script>

<section>
    <form on:submit|preventDefault={handleClient}>
      <div class="grd">
          <label for="fistName"
            >First Name

            <input type="text" name="firstName" required bind:value={clt.firstName} />
          </label>
          <label for="lastName"
            >Last Name

            <input type="text" name="lastName" required bind:value={clt.lastName} />
          </label>
          <label for="telephone"
            >Telephone

            <input type="tel" name="telephone" required bind:value={clt.telephone} />
          </label>
          <label for="dob"
            >Date of Birth

            <input type="date" name="dob" required bind:value={clt.dob} />
          </label>
          <label for="gender"
            >Gender

            <select name="gender" required bind:value={clt.gender}>
              <option value="" disabled selected>-</option>
              <option value="MALE">Male</option>
              <option value="FEMALE">Female</option>
            </select>
          </label>
          <label for="active"
            >Active

            <input type="checkbox" bind:checked={clt.active} />
          </label>
      </div>
      <br />
      {#if originalClient}
        <button type="submit">Update client</button>
      {:else}
        <button type="submit">Add client</button>
      {/if}
    </form>
</section>

<style>
    .grd {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
</style>

If you pay attention we have here to mutaions, create and update client. This is because we are reusing the same form for both cases.

Add the table of clients

Here is ClientsTable.svelte component that we are importing in the main index.svelte. We are expecting an array of clients. We loop thru it via #each clients as client and display desired data

<script>
  export let clients = [];
</script>

<table>
  <tr>
    <th>Name</th>
    <th>Status</th>
    <th>Phone number</th>
    <th>Intakes</th>
    <th />
  </tr>
  {#each clients as client (client.clientId)}
    <tr>
      <td>{client?.firstName} {client?.lastName}</td>
      <td>{client?.active ? "ACTIVE" : "INACTIVE"}</td>
      <td><a href={`tel:${client?.telephone}`}>{client?.telephone}</a></td>
      <td>{client?.intakesByClientId?.totalCount}</td>
      <td><a href={`clients/${client.clientId}`}><button>More</button></a></td>
    </tr>
  {/each}
</table>

<style>
  table {
    margin: 0 auto;
  }
</style>

Edit/Slug page of a client

<script>
  import ClientForm from "../../../components/ClientForm.svelte";

  import { stores } from "@sapper/app";
  const { page } = stores();

  import { operationStore, query } from "@urql/svelte";
  import { onMount } from "svelte";
  import IntakeTable from "../../../components/IntakeTable.svelte";

  const client = operationStore(
    `
    query MyQuery($id: Int!) {
        clientByClientId(clientId: $id) {
            firstName
            lastName
            dob
            gender
            telephone
            active
            clientId
            intakesByClientId {
                nodes {
                    intakeId
                    intakeTime
                    rbc
                }
            }
        }
    }
    `,
    { id: parseInt($page.params.slug) },
    { requestPolicy: "cache-first" }
  );

  query(client);

  const refresh = () => ($client.context = { requestPolicy: "network-only" });

  onMount(() => {
    refresh();
  });

  $: clientIntakes = $client.data?.clientByClientId.intakesByClientId?.nodes
</script>

<div class="rght">
    <a href={`/clients/${$page.params.slug}/intakes/newintake`}
    ><button>New Intake</button></a
    >
</div>
{#if $client.fetching}
  <h2>Loading...</h2>
{:else if $client.error}
  <h2>Oh no... {$client.error.message}</h2>
{:else}
  <div class="flx">
    <ClientForm originalClient={$client.data?.clientByClientId} />
    <IntakeTable {clientIntakes} clientId={$page.params.slug}/>
  </div>
{/if}


<style>
    .rght {
        text-align: right;
    }
</style>

We are reusing the ClientForm for editing. Notice how we pass the slug into the client query as id.

New form for medical data input

In our newintake route we are adding IntakeForm.svelte component and pass to it the clientId from page.params.slug
here is the component itself

<script>
  import { mutation } from "@urql/svelte";
  import { goto } from "@sapper/app";

  export let clientId;

  let intakeData = {
    wbc: "",
    rbc: "",
    hbg: "",
    hct: "",
    weight: "",
  };

  const createIntakeMutation = mutation({
    query: `
        mutation MyMutation($id: Int!, $wbc: BigFloat!, $rbc: BigFloat!, $hbg: BigFloat!, $hct: BigFloat!, $weight: BigFloat!) {
        createIntake(
            input: {intake: {clientId: $id, wbc: $wbc, rbc: $rbc, hbg: $hbg, hct: $hct, weight: $weight}}
        ) {
            intake {
              intakeId
            }
        }
        }`,
  });
  const createNewIntake = async () => {
    const responseCreate = await createIntakeMutation({
      id: parseInt(clientId),
      ...intakeData,
    });
    // console.log(responseCreate);
    if (responseCreate.data) {
      goto(`/clients/${clientId}`);
    }
  };
</script>

<section>
  <h1>New Intake</h1>
  <form on:submit|preventDefault={createNewIntake}>
    <label for="wbc"
      >White blood cells
      <input type="number" name="wbc" step="0.1" required bind:value={intakeData.wbc} />
    </label>
    <label for="rbc"
      >Red blood cells
      <input type="number" name="rbc" step="0.1" required bind:value={intakeData.rbc} />
    </label>
    <label for="hbg"
      >HBG
      <input type="number" name="hbg" step="0.1" required bind:value={intakeData.hbg} />
    </label>
    <label for="hct"
      >HCT
      <input
        type="number"
        name="hct"
        required
        step="0.1" 
        bind:value={intakeData.hct}
        min="0"
        max="100"
      />
    </label>
    <label for="weight"
      >Weight
      <input type="number" step="0.1"  name="weight" bind:value={intakeData.weight} />
    </label>
    <button type="submit">Send</button>
  </form>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }
</style>

It is intersting to note that the mutation here for the variables is set to BigInt since we defined them in the intake schema as decimal. We have set the input to step="0.1"

And that is it. I hope you have learned something new. If you have any suggestions and know how to improve the code, please hit me up. I will be glad to hear from you. It was quite easy to make a complete, full stack app with Sapper. Postgraphile here does the whole magic under the hood. I would like to thank Bengie for it. Cheers!

Sveltekit & Tailwind CSS Combo

Denis Donici — Tue, 30 Mar 2021 06:27:20 +0000

Hi friends. I've decided to share my setup process for a perfect project with Svelte & Tailwind. Maybe some of you will find it useful. For those who are not familiar, the Svelte and Tailwind are a perfect match for quick and enjoyable web development. However, before, we had to manually configure everything in Rollup. Not anymore, with just a couple of simple commands, you get, IMHO, the best UX ever. Tailwind has just come out with JIT (just in time compiler) that makes it very quick. Add to this the new SvelteKit and Vite and you have an enjoyable web-dev process! Here are the commands:

We create a new folder and change the working directory to it

mkdir my-app
cd my-app

Initialize a new SvleteKit project in the folder

npm init svelte@next

Add the static adapter so we can build and export static files

npm i -D @sveltejs/adapter-static

Add Tailwind with JIT

npx svelte-add tailwindcss  --jit

Install all the dependencies

npm i

Run the development server

npm run dev

One thing to notice that in order to build static files we will need to modify a bit the svelte.config.cjs file in the root folder of the project.

Instead of

const node = require('@sveltejs/adapter-node');

We need to import this

const static = require('@sveltejs/adapter-static');

and also instead of the default node adapter

adapter: node(),

we will need to add the static adapter like this

adapter: {
 adapt: static
        },

After

npm run build

in build folder, you'll find the files that could be uploaded to your CDN of choice for free hosting, like Vercel, Surge or Cloudflare. I hope it helps, my friends! Happy development!

Installing Fedora 34 with GNOME 40

Denis Donici — Wed, 24 Mar 2021 17:17:12 +0000

Hi friends. Yesterday Fedora 34 Beta was released with the newest desktop interface GNOME 40. I would like to show you how you can easily install this beautiful and developer-friendly GNU/Linux distribution.

I assume that you have already downloaded the latest iso image file from here https://getfedora.org/en/workstation/download

Regardless of whether you would like just to test it out in Virtualbox or you want to install it on the real hardware, the installation process is the same. The only difference is that in the first case, you have to prepare a virtual machine in VirtualBox and in the latter case you have to burn the iso image onto a USB flash drive.

The whole installation process happens in two stages. The first stage is the actual installation on the hard drive, and the second is the post-installation setup.

First, we should boot the Fedora 34 iso image and we will be greeted with an option to try the distribution

Let's go ahead and click on Install to Hard Drive Be advised though, that if you are installing on real hardware, make sure you have backed-up all your personal data beforehand. After doing that you will be greeted with a language selection. Pick the language and click Continue button on the bottom right

After that, you will be warned with a pop-up that tells that the software is "unstable". This pop-up happens only with Beta releases. When the actual release will happen there won't be any warning.

Once clicking the I want to proceed button you'll be shown the main installation summary window.

As you can see the only thing left is the Installation destination under SYSTEM settings. Once we click that we can see that Fedora picked the disk automatically

We hit Done in the top left corner to get back to the installation summary.

Once everything is set up we are ready to proceed with the installation

Click Beggin Installation and the installation process will start.

After some time the installation will finish

Go ahead and click in the bottom right corner Finish Installation The first stage of installation is complete.

Now you have probably noticed that the installer didn't ask us to create a user and set a password. This is because all the Fedora installations now are OEM installations. This means that the user set up happens on the next bootup. This simple solution saves lot's of headache for those who wanted to install Fedora in OEM mode before. For example, five years ago, I made a Reddit post asking how to do it properly https://www.reddit.com/r/Fedora/comments/4bvgoy/how_to_install_oem_fedora_workstation/ All the solutions proposed where involved and required editing files. I'm not against it but this seems to be much more straightforward. Thanks, Fedora team!

Now let's reboot to begin the second stage

After bootup, we will be greeted with a friendly Setup window

Hit Start Setup to begin. The first step is the Privacy settings.

Set them to your liking and hit Next in the top right corner. The next set up is for Online Accounts You could set them now or do it anytime later.

Now on this step, we should set the username

After you're done, clock Next in the right top corner
And finally, the last step is the setting of the password.

And we are done!

With every release, Fedora pushes the envelope for quality and ease of use. It looks modern and less intimidating than other distributions. Totally recommend trying it.

Enjoy Fedora and make some awesome stuff with it!

Full-Stack Sapper & SQLite with Sequelize Pt.1

Denis Donici — Tue, 13 Oct 2020 11:01:35 +0000

There are plenty tutorials on the internet with MongoDB/Mongoose as a database for Express. I have decided to explore relational databases. The first thing that came into my mind was SQLite. And to my surprise, I couldn't find anything useful that works with Sapper.

This tutorial consists of two parts, first one is concerned about the Express backend, SQLite DB, controllers and all the jazz, and the second part guides the integration of Svelte frontend in Sapper.

Here is the final result of my integration of these two minimal yet powerful technologies https://github.com/gevera/sapper_sqlite_crud You can take it for a spin with

npx degit gevera/sapper_sqlite_crud
npm i
npm run dev

Make it from scratch

Create a default Sapper project, convert it to TypeScript and install needed dependencies

npx degit "sveltejs/sapper-template#rollup" sapper_sqlite
cd sapper_sqlite
node scripts/setupTypeScript.js
npm i

First of all, let's add to our dependencies, Express instead of default polka, and SQLite database and sequelize ORM.

npm i express sqlite3 sequelize
npm remove polka @types/polka

Let's also add types for them

npm i -D @types/express @types/node @types/sqlite3 @types/sequelize

Create a folder in src folder called db. And create a sqliteDb.ts file in it. Here we are importing sequelize and exporting sequelize itself and an async db function that initializes our database in ./src/db folder under the name database.sqlite We will use this function a bit later when we change up our server file.

import { Sequelize } from 'sequelize';

export const sequelize = new Sequelize({
    dialect: 'sqlite',
    storage: './src/db/database.sqlite',
});

export const db = async () => {
    try {
        await sequelize.authenticate();
        console.log('Connection to sqliteDB has been established successfully.');
    } catch (error) {
        console.error('Unable to connect to the database:', error);
    }
};

Next, we need to create a user model in User.ts in Models folder

import { UUIDV4, DataTypes } from "sequelize";
import { sequelize } from "../sqliteDb";

export const UserModel = sequelize.define("User", {
  id: {
    type: DataTypes.UUID,
    defaultValue: UUIDV4,
    primaryKey: true,
  },
  name: {
    type: DataTypes.STRING,
    allowNull: false,
    unique: true,
  },
  profession: {
    type: DataTypes.STRING,
    defaultValue: "programmer",
  },
});

Note we are importing UUIDV4 to create unique primary id's for each user. It is very similar to mongoose schema.

We need controllers to handle our request, so let's create a controllers directory in src and add a userControllers.ts file. Here is where all the magic happens between our server and database. I do like sequelize syntax more then mongoose for some reason. I think it is straightforward and clean.

import { UserModel } from '../db/Models/User';
import { sequelize } from '../db/sqliteDb';

export const getAllUsers = async (req, res, next) => {
    try {
        await sequelize.sync();
        const users = await UserModel.findAll();
        res.json({ success: true, data: users }).status(200);

    } catch (e) {
        console.log(e);
        res.json({ success: false, message: 'Failed to find users' }).status(500);
    }
}

export const createAUser = async (req, res, next) => {

    try {
        await sequelize.sync();
        const { name, profession } = req.body;
        const newUser = await UserModel.create({ name, profession });
        res.json({ success: true, data: newUser }).status(200);
    } catch (e) {
        console.log(e);
        res.json({ success: false, message: 'Failed to create a new user' }).status(500);
    }
}

export const getAUser = async (req, res, next) => {
    try {
        await sequelize.sync();
        const user = await UserModel.findAll({
            where: {
                id: req.params.id
            }
        });
        if (user.length) {
            res.json({ success: true, data: user }).status(200);
        } else {
            res.json({ success: false, message: 'Failed to find user' }).status(404);
        }

    } catch (e) {
        console.log(e);
        res.json({ success: false, message: 'Failed to find user' }).status(500);
    }
}

export const deleteAUser = async (req, res, next) => {
    try {
        await sequelize.sync();
        const user = await UserModel.destroy({
            where: {
                id: req.params.id
            }
        });
        if (user) {
            res.json({ success: true, message: 'User deleted!' }).status(204);
        } else {
            res.json({ success: false, message: 'Failed to find user' }).status(404);
        }

    } catch (e) {
        console.log(e);
        res.json({ success: false, message: 'Failed to delete user' }).status(500);
    }
}

export const updateAUser  = async (req, res, next) => {
    try {
        await sequelize.sync();
        const user = await UserModel.update({ ...req.body }, {
            where: {
                id: req.params.id
            }
        });
        if (user.length) {
            res.json({ success: true, message: 'User updated!', data: user }).status(204);
        } else {
            res.json({ success: false, message: 'Failed to find user' }).status(404);
        }
    } catch (e) {
        console.log(e);
        res.json({ success: false, message: 'Failed to update user' }).status(500);
    }
}

Finally, lets switch to server.ts file in our src directory.
Switch polka to express. Import our db function and execute it. And also we need to enable json and urlencoded so we can parse the body for post/put requests.
Get the controllers created earlier, and apply them to the corresponding routes.

import sirv from "sirv";
import express from "express";
import compression from "compression";
import * as sapper from "@sapper/server";
import { db } from "./db/sqliteDb";
import {
    getAllUsers,
    createAUser,
    getAUser,
    updateAUser,
    deleteAUser
} from './controllers/userControllers';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";

db();

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/api', getAllUsers);
app.post('/api', createAUser);
app.get('/api/:id', getAUser);
app.put('/api/:id', updateAUser);
app.delete('/api/:id', deleteAUser);

app
  .use(
    compression({ threshold: 0 }),
    sirv("static", { dev }),
    sapper.middleware()
  )
  .listen(PORT, () => {
    console.log("Express is up and running!");
  });

At the first run, the database.sqlite file will be created in db folder. If you hit the http://localhost:3000/api we will get

{
  "success": true,
  "data": []
}

Great Success! Our Sapper App has now a persistent database and a full CRUD working REST API.

Befriending Sapper and Spectre.css

Denis Donici — Tue, 25 Aug 2020 05:55:17 +0000

Today I would like to share how to add Spectre.css to Sapper the right way.

If you are reading this, then chances are that you have already heard of these frameworks or maybe you are just a curious person. Both are light, simple and straightforward tools that make web-development quick and easy. For those who don't know about them, head over to the links above and acquaint yourself with them. You might find them interesting as I did.

In short, I could describe Spectre.css as a light replacement for frameworks like Bootstrap or Bulma. Sane defaults for up-and-running projects with deadlines. No endless classes like in Tailwind (even though, I do enjoy Tailwind.css for its granular control).

So let's get started.

Create a new Sapper project

First of all, you will need to create a new Sapper project.
So open up your favourite terminal and get your default Sapper template

npx degit "sveltejs/sapper-template#rollup" sapper-spectrecss

Open up the newly created folder

cd sapper-spectrecss

Install the Sapper dependencies

npm i

Add Spectre.css dependencies

Now, of course, you could just link in the head of your template file /src/template.html the Spectre.css CDNs like so

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

However, that's not what we really want. Since we can't tweak Spectre.css pragmatically and create a custom version of it for our needs. So skip the previous step unless you want to check it out really quick.

Alright, now let's add the following npm packages.
Svelte preprocessor and SASS as development dependencies

npm i node-sass svelte-preprocess autoprefixer -D

And the actual Spectre.css

npm i spectre.css

Now your package.json file should look something like this

{
  "name": "sapper-spectrecss-template",
  "description": "A light and beautiful template for Sapper with Spectre.css",
  "version": "0.0.1",
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
  },
  "dependencies": {
    "compression": "^1.7.1",
    "polka": "next",
    "sirv": "^1.0.0",
    "spectre.css": "^0.5.9"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "autoprefixer": "^9.8.6",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^6.1.0",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3",
    "svelte-preprocess": "^4.1.1"
  }
}

Edit config files

Open your rollup.config.js and add the following right under your imports

import sveltePreprocess from 'svelte-preprocess';

const preprocess = sveltePreprocess({
    scss: {
      includePaths: ['src'],
    },
    postcss: {
      plugins: [require('autoprefixer')],
    },
});

Also, make sure that you add preprocess to your svelte plugins in client and server like so

svelte({
    dev,
    hydratable: true,
    emitCss: true,
    preprocess
 }),

Let's create a new file called svelte.config.js in the root of your project template. We will setup svelte-preprocess so it can work with autoprefixer


const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['src'],
    },
    postcss: {
      plugins: [require('autoprefixer')],
    },
  }),
};

Customize your styles

Finally, we can proceed and delete all the unnecessary css styling from the default Sapper template. Delete everything that is between <style></style> tags in every .svelte file that is located in /src/routes and in /src/components. You could empty out the contents of global.css file in /static folder as well.

While we are in static folder, let's create a new folder here, called styles

In newly created static create a file called global.scss

@import "./theme.scss";

And create the actual theme.scss where all the Spectre.css variables could be modified to our liking

// Define variables to override default ones
$primary-color: rgb(255,62,0);
$error-color: #c02020;
$font-size: 0.9rem;
$font-size-sm: .8rem;
$font-size-lg: 1rem;

// Import full Spectre source code
@import "../../node_modules/spectre.css/src/spectre";

Add this to your _layout.svelte

<style lang="scss" global>
     @import "../../static/styles/global.scss";
</style>

Get back to code

We are all set, we can start our project from its root folder by running

npm run dev

With a bit of tweaking, you should see a greeting on your localhost:3000

Here is a link to the final result in action.

Now if you are short on time you can just skip everything up until now. Clone the github repo and install the dependencies. That's it

git clone https://github.com/gevera/sapper-spectrecss-template
cd sapper-spectrecss-template
npm i
npm run dev

Hopefully, you found this tutorial useful.
Let me know in the comments below if you stumble upon issues integrating these awesome frameworks.

Oh, and I am just curious, what is your CSS framework to go and how easy is to integrate it with Sapper?

Cheers