DEV Community: Heithem Moumni

Build a blog with Svelte, Strapi, and Apollo

Heithem Moumni — Tue, 12 May 2020 00:35:00 +0000

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 going to install these together!

Setup

Create a blog-strapi-svelte folder and get inside!

mkdir blog-strapi-svelte && cd blog-strapi-svelte

Let's create a new project using thecreate strapi-app package.

yarn create strapi-app backend --quickstart --no-run

Now, we need to install some plugins to enhance your app, let's install graphql plugin

yarn strapi install graphql

Once the installation is completed, you can finally run strapi dev and create your first Administrator

yarn start
// or
strapi dev

Nice! Now that Strapi is ready, you are going to create your Svelte application.

Create a Svelte frontend server by running the following command:

npx degit sveltejs/template-webpack frontend

Once the installation is over, you can start your frontend app to make sure everything went ok.

cd frontend && yarn start

Let's, install some dependencies like Apollo to query Strapi with GraphQL

Apollo setup

yarn add svelte-apollo graphql apollo-client apollo-link apollo-link-http 
apollo-cache-inmemory graphql-tag

Create a svelte-apollo.js file inside your src folder containing the following code:

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
const httpLink = createHttpLink({
    // You should use an absolute URL here
    uri: "http://localhost:1337/graphql",
});
// Cache implementation
const cache = new InMemoryCache();
// Create an Apollo client and pass it to all child components
// (uses svelte's built-in context)
const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
});
export default apolloClient;

Import SvelteApollo and the apolloClient you created in your Svlete app by adding the following code in your app.svelte:

<script>
import apolloClient from "./svelte-apollo";
import { setClient } from "svelte-apollo";


setClient(apolloClient);
// ...

Great, apollo is ready now!
Let's create a new component inside our App.svelte component called ArticlesList.svelte and display your articles from Strapi now!

<script>
import apolloClient from "./svelte-apollo";
import { setClient, getClient, query } from "svelte-apollo";
import { GET_ARTICLES } from "./query.js";
setClient(apolloClient);

Get the Apollo client from context

const client = getClient();

Then, execute the GET_ARTICLES graphql query using Apollo client, that returns a svelte store of promises that resolve as values come in

const articles = query(client, { query: GET_ARTICLES });

create a query GET_ARTICLES

import gql from "graphql-tag";

export const GET_ARTICLES = gql`
  {
    articles {
      id
      title
      content
      image {
        url
      }
    }
  }
`;

ArticlesList.svelte file containing the following code:
Here we are using $articles (note the "$"), to subscribe to query values

<script>
  import apolloClient from "./svelte-apollo";
  import { setClient, getClient, query } from "svelte-apollo";
  import { GET_ARTICLES } from "./query.js";

  setClient(apolloClient);

  const client = getClient();
  const articles = query(client, { query: GET_ARTICLES });

</script>

<style>
// ..
</style>

  <h1>Strapi Blog</h1>
  <div>
    {#await $articles}
      <div>Loading...</div>
    {:then result}
      {#each result.data.articles as article (article.id)}
        <div>
          <img src={article.image.url} alt="" height="100" />
          <div>{article.title}</div>
          <p id="title" class="uk-text-large">{article.content}</p>
        </div>
      {:else}
        <div>No articles found</div>
      {/each}
    {:catch error}
      <div>Error loading articles: {error}</div>
    {/await}
  </div>

We are using the api_url in order to display images from Strapi

Conclusion

huge congratulations, you are finished this article! thank you!

Building a Book app with NextJs, Hasura & gqless

Heithem Moumni — Tue, 05 May 2020 23:12:52 +0000

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 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 @gqless/cli -D

Create a new file named .gqlessrs.json at the root of your project, with the following contents (follow the instructions here to set up codegen and generate all the types from your schema):

{
    "url": "http://localhost:4000", // For the url, use your Hasura GraphQL endpoint
    "outputDir": "graphql",
    "headers": {}
}

Next, add a generate script to your package.json:

"scripts": {
    "generate": "gqless generate"
}

After you run the generate command, you should see a new folder in your app where you specified the outputDir.

In your component import the Books query

import React, { Suspense } from 'react'
import { query, books } from "../graphql";
import { graphql } from "@gqless/react";

That’s all you need. You should now have your Hasura endpoint and your application making a query to view the data which you can now display in your template.

const Books = graphql(() => {
    return (
    <div>
      {query.books.map(book => {
          return <div key={book.id}>{book.title}</div>;
      })}
    </div>
  );
});
export default function Home() {
    return (
    <div>
      <Suspense fallback="loading">
        <Books />
      </Suspense>
    </div>
  );
}

You can find the demo app here on GitHub.

TailwindCSS with Webpack Encore

Heithem Moumni — Tue, 05 May 2020 22:10:23 +0000

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 npm
npm 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 stack, and much more
Use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

I use Symfony for most of my projects, so for compiling my assets I always use Webpack. Here’s how you would set up Tailwind with webpack-encore:

You’ll want to add Tailwind as a PostCSS plugin in your build chain.

Generally, this means adding Tailwind as a plugin in your postcss.config.js file:

module.exports = {   
     plugins: [     
          require('tailwindcss'),   
     ] 
}

and in webpack.encore.js we need to enable the PostCSS loader

// ...
.enablePostCssLoader()
// ...

You can also pass options into the PostCSS loader by passing a callback, as per the Encore PostCSS docs:

Encore.enablePostCssLoader(function(options) { 
  options.config = {     
     path: 'postcss.config.js'   
  } 
})

That’s it. Now you can just run it as always.

npm run watch

In conclusion

Tailwind provides a great developer experience and with webpack-encore it is especially easy to set up.

Getting data from Hasura onto your Next.js app

Heithem Moumni — Tue, 05 May 2020 21:56:24 +0000

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 some dependencies

yarn add next-apollo apollo-boost graphql graphql-tag next-apollo react-apollo

then, add this code and remember to replace the endpoint with the endpoint you get from Hasura

// config.js
import { withData } from 'next-apollo'
import { HttpLink } from 'apollo-link-http'

const GRAPHQL_URL = 'http://localhost:8080/v1/graphql' // url from Hasura 

export default withData({
    link: new HttpLink({ uri: GRAPGQL_API }),
});

In your component import the Books query

import gql from 'graphql-tag'

const BOOKS_QUERY = gql`
    query Books {
        books {
            id
            title
            author{
                id
                name
            }
        }
    }
`

export default BOOKS_QUERY

That’s all you need. You should now have your Hasura endpoint and your application making a query to view the data which you can now display in your template.

<Query query={BOOKS_QUERY}>
  {({loading, data, error}) => {
    if (error) {
      return <div>Error {JSON.stringify(error)}</div>
    }
    if (loading) {
      return <div>Loading..</div>
    }
    return (
      <ul>
        {data.books.map((book) => {
          return (
            <li key={`book__${book.id}`}>
              <h3>{book.title}</h3> <small>{book.author.name}</small>
            </li>
          )
        })}
      </ul>
    )
  }}
</Query>

That’s it! Now run the server by running the following command:

npm run start

In conclusion

Using Hasura to increase your development speed, you don't need to spend time setting up your GraphQL server.

why on Kubernetes for the short name (k8s) they replace ubernete by 8?

Heithem Moumni — Mon, 03 Feb 2020 10:29:39 +0000

What do you think about the future of PHP in general?

Heithem Moumni — Tue, 29 Jan 2019 10:40:44 +0000

Bugs can hibernate?

Heithem Moumni — Sat, 12 Jan 2019 18:15:50 +0000

When will Artificial Intelligence replace frontend developers?

Heithem Moumni — Wed, 31 Oct 2018 08:37:17 +0000

Hello world :D, I need more practice for competitive programming skills, any suggestions?

Heithem Moumni — Mon, 08 Oct 2018 21:21:08 +0000

how to create a php continuous integration with jenkins?

Heithem Moumni — Wed, 12 Sep 2018 21:49:31 +0000

to be multi-skilled or master only one technology?

Heithem Moumni — Tue, 11 Sep 2018 07:14:31 +0000

Now, I'm thinking is there anything that can't be done by JS?

Heithem Moumni — Thu, 30 Aug 2018 19:24:37 +0000