Blogging is excellent to let you share experiences, and Strapi is useful at helping you create your blog! So, I am pretty sure that you now understand what this post is about. Let’s learn how to create a blog with your favorite tech: Strapi and Svelte.

The goal here is to be able to create a blog website using Strapi as the backend, Svelte for the frontend, and Apollo for requesting the Strapi API with GraphQL

The source code is available on GitHub: https://github.com/heithemmoumni/strapi-starter-svelte-blog.

Prerequisites

you’ll need to have Strapi and Svelte installed on your computer, but don’t worry, we are…


https://gqless.dev/

qgless, it’s a tool that makes you generate the queries at runtime based upon the data your app consumes, which means converting the paths into GraphQL queries.

A GraphQL client without queries ✨

Step 1: App setup

So, let's start by installing NextJs:

npx create-next-app <app-name>

we need to install some dependencies

yarn add — dev @types/react @types/node

Then cd <app-name> and create a new file named tsconfig.json at the root of your project and run this command npm run dev to generate typescript config for Next.js.

Step 2: work with gqless

Install the gqless dependencies

Important: If using Typescript, ensure version is 3.7.0+

yarn add gqless yarn add…


Hasura

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

GraphQL

GraphQL gives you the ability to fetch the exact data you need for your UI and is great for building UIs with encapsulated data requirements.

You get exactly what you ask for!

Next.js

Next.js is an isomorphic react framework that that has server-side rendering, hot module replacement, automatic code-splitting, static page exporting and so much more.

Next.js + Hasura + next-apollo = SSR react apps with GraphQL!

Let’s start, by creating a next project

npx create-next-app <app-name>

we need to add…


Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Use Tailwind to increase your development speed

Installing Tailwind

Tailwind, like any other framework, is available on a CDN, but you can configure it yourself,

Simply by running this command

# Using npmnpm install --dev @symfony/webpack-encore autoprefixer postcss-loader tailwindcss# Using Yarn yarn add --dev @symfony/webpack-encore autoprefixer postcss-loader tailwindcss

Next, we need to generate the tailwind.config.js file:

npx tailwindcss init

Here you can add colors, edit font…

Heithem moumni

I am Heithem! PHP, JS specialist, JamStack/Go enthusiast, and more

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store