DEV Community: Fortune Ikechi

Live Loading Content is Now Available for Gatsby SDK v6.1.1! 🚀

Fortune Ikechi — Fri, 04 Aug 2023 14:10:37 +0000

We’re thrilled to share that the Live Loading Content feature for Gatsby SDK has been unleashed, elevating it from version v6.0.2 to v6.1.1. Prepare for an exceptional content experience with real-time updates as you edit and publish within Storyblok. Bid farewell to manual refreshes – your Gatsby site effortlessly stays current!

Advantages:

Real-time Updates 🔄
Enhanced Efficiency ⚡
Enhanced User Experience 📈
Instant Error Handling 🛡️
Unmatched Customization Flexibility 🎨

Known Limitations:

Cache forces to load the previous content by only hitting a save button on the visual editor. To solve it, after hitting a save button, hit the reload 🔃 button on the visual editor to load the most updated content.

Ready to elevate your content management? Dive into the upgraded version today! For intricate specifics, peruse our refreshed documentation.
Here’s to exhilarating Gatsby-ing with Storyblok! 🎉

Storyblok Gatsby SDK Now Supports React Server Components and Gatsby 5! 🚀

Fortune Ikechi — Fri, 14 Jul 2023 14:33:27 +0000

We have some exciting news to share! The latest release of Storyblok's React SDK (version 2.1.0) brings two major updates that will take your web development experience to new heights. Here's what's new:

1️⃣ React Server Components (RSC) Support: We're thrilled to introduce support for React Server Components in the Storyblok React SDK. Now, you can seamlessly integrate Storyblok into your apps created with the latest Gatsby 5 and lower versions of Gatsby. With RSC, you can enhance website performance.

2️⃣ Gatsby 5 Support with Partial Hydration: We're delighted to announce that our Storyblok Gatsby SDK now supports Gatsby version 5, complete with Partial Hydration. This update brings many new features and improvements, such as an option to enable RSC and select client components to load minimal JavaScript to allow you to build better performance websites with dynamic content. Experience the power of Gatsby 5 and unleash the performance gains Partial Hydration offers.

3️⃣ Included useStoryblokState into <StoryblokStory /> to keep the state for stories behind the scenes. It uses StoryblokComponent to render the components dynamically, using the list of components loaded during the initialization inside the storyblokInit function.

src/pages/index.tsx

import * as React from "react"
import { graphql } from "gatsby"

import { StoryblokStory } from "gatsby-source-storyblok"

import Layout from "../components/layout"

const IndexPage = ({ data }) => {
  if (typeof data.storyblokEntry.content === "string") data.storyblokEntry.content = JSON.parse(data.storyblokEntry.content);

  return (
    <Layout>
      <StoryblokStory story={data.storyblokEntry} />{/* ⬅️ */}
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query HomeQuery {
    storyblokEntry(full_slug: { eq: "home" }) {
      content
      name
      full_slug
      uuid
      id
      internalId
    }
  }
`

src/components/layout.jsx

"use client";
import React, { useEffect } from "react"
import PropTypes from "prop-types"
import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
import Teaser from './Teaser'
import Grid from './Grid'
import Page from './Page'// ⬅️
import Feature from './Feature'
import configuration from '../../gatsby-config'

const sbConfig = configuration.plugins.find((item) => item.resolve === 'gatsby-source-storyblok')

storyblokInit({
  accessToken: sbConfig.options.accessToken,
  use: [apiPlugin],
  components: {
    teaser: Teaser,
    grid: Grid,
    feature: Feature,
    page: Page// ⬅️
  }
});

const Layout = ({ children }) => {
  return (
    <div>
      <main>{children}</main>
    </div>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

To get started, you can get started by following the steps below:

Install gatsby-source-storyblok
Config gatsby-config file with Partial Hydration flag
Update src/pages/index.tsx
Import <StoryblokStory />
Parse content
Call <StoryblokStory /> in JSX scope
Update layout.jsx
Set “use client”
Import Page component (content-type)
Add Page component inside of components to initialize
Create Page component file

Ready to get started? ⚡

Want to go straight to action? Clone this Gatsby starter and start playing around with the latest version of Gatsby!
Or alternatively, you can refer to the example from one of our playgrounds. See our example here.

You can read all the details on what we’ve updated for Gatsby version 5 here in the readme.

Words of appreciation

We sincerely thank Arisa (@arisa_dev) and Alex Jover (@alexjoverm) for their dedicated work investigating and experimenting with different approaches to bring you these flexible solutions.

Building Select Components with React and Fauna

Fortune Ikechi — Wed, 06 Oct 2021 13:43:49 +0000

Introduction

Building select elements is one of the most important factors when working on web applications. There is a lot that goes into building select elements and that includes focus on the user interface and experience. Some properties such as One has to consider features such as on-focus, styling select elements, fetching data from a remote source and the list goes on. A library solving this is React-select.

What is react-select?

Jed Watson created a project called react-select. There were several limitations with version one of react-select, which gave birth to v2. In this article, We’ll be looking at building select components with React-select and Fauna.

Installation and basic usage of react-select

Prerequisites

Yarn/npm installed
create react app CLI tool installed
A basic understanding of React JS

Installing react-select

For this tutorial, we will use the create-react-app CLI tool provided by Facebook, run the command below on your terminal to create a React application:

$ yarn create react-app react

After that is done, we’ll install the react-select and fauna package from npm:

$ yarn add react-select

Next, let’s create our Fauna database, to do this, first create an account on Fauna, and after that navigate to your Fauna dashboard here and create a database, it should look similar to the image below

Next, we will create our contacts and phone_number collections, you will find this after we create our database similar to the image below:

Post this, let’s create indexes for our contacts, to do this click on the index tab on the side bar and fill in with the details below

To complete our database, click on the Security tab and click to reveal your Fauna access keys, copy it and add it to your applications .env file.

Building Our React Select Component

Let’s navigate back to our React application, inside our App.js and import our packages below

    import React from 'react';
    import Select from 'react-select';

In the code block above, we imported our react-select and also create a functional App omponent, let’s create our values as options below

    const options = [
      { value: 'blues', label: 'Blues' },
      { value: 'rock', label: 'Rock' },
      { value: 'jazz', label: 'Jazz' },
      { value: 'orchestra' label: 'Orchestra' } 
    ];

    const App = () = {
       return (
        <div className="wrapper">
    ```



With those two packages imported, we will be able to have access to the react-select ( <Select />) and also extend the `React.Component` class.

//App.js

//Import React and Select 

const options = [
  { value: 'blues', label: 'Blues' },
  { value: 'rock', label: 'Rock' },
  { value: 'jazz', label: 'Jazz' },
  { value: 'orchestra' label: 'Orchestra' } 
];

class App extends React.Component {
  render(){
    return (
      <Select options = {options} />
    );
  }
}

export default App;




Our application should look like the image below if done correctly, 

![display options react-select](https://blog.logrocket.com/wp-content/uploads/2019/06/reactselect2.png)

In the image above we were able to set the background of a selected option to green and change the text color to yellow. This was made possible by extending its default styling by spreading it into the provided variable `…provided`

## Custom components

Under styles and states, we discussed two custom components (option and control) which we used to extend the select styling. In this section, we’ll take a look at another custom component called the `Custom SingleValue` . This custom component does what our regular select component does but we’re going to add a little bit of finesse. In our `App.js` file, we’ll import the `React` and `Select` packages from `react` and `react-select` respectively like so:

//App.js
import React, { type ElementConfig } from 'react';
import Select, { components } from 'react-select';
...




By the time we are done, we have a finished product that looks something like this:

![hello](https://paper-attachments.dropbox.com/s_F9F0BEA2606EC0FEDAC450A16F9976CC05FBD81BB424031DAF1E91C33340520A_1555501514723_select-colour.gif)


In the code block below, we define our custom component `SingleValue` as a method which extends the base component in the `react-select` package. In our App class, we have a couple of props and functions which contribute to the functionality (as shown in the image above) such as:
handleChange: This method is triggered by a state manager prop called the `onChange` . This method is responsible for storing the value of the selected option in our state object called `selectedOption`
styles: In this prop, we extend the style modifier method `singleValue` where we modify the styling already accessible to us by default by spreading default styles into the base object. The line responsible for adding a background color to each selected option is the `background: this.state.selectedOption.value` where we get the current option selected from the state and use it to update the background
components: In the component prop we pass in the SingleValue component, the primary function of the component is to display in the input for a single select.
options: The options prop that we all know by now is how we pass in our array object of select items which in this case are colors like so.
className: In this prop is where we add our bootstrap styling to position our select component away from the top margin as well as centralize our select component nicely.

//App.js

const SingleValue = ({ children, ...props }) => (

{children}

);

 class App extends React.Component {
   state = {};
   state = {
     selectedOption: null,
   }
   handleChange = (selectedOption) => {
     this.setState({ selectedOption });
   }
   render() {
     return (
       <Select
           className="mt-4 col-md-6 col-offset-4"
           onChange={this.handleChange}
           styles={{ singleValue: (base) => ({ ...base, padding: 5, borderRadius: 5, background: this.state.selectedOption.value, color: 'white', display: 'flex' }) }}
           components={{ SingleValue }}
           options={colourOptions}
         />
     );
   }
 }
 export default App;




## Concluding our Application

To conclude our application, we will create an `.env` file and inside it we will add our Fauna access keys, by doing this newly created select component will come from our Fauna database collections. 

## Conclusion
In this post, we have learned some common use cases for reac-selec component, how to get started and. There are a plethora of functionalities built into the react-select package, some of which will fit your needs, some of which you’ll need to customize to fit your use case. Here’s a link to the official documentation to get your hands dirty. We also added our component to Fauna, loading the components and selector from our Fauna database. 

Written in connection with the Write with Fauna Program.

How to Manage Secrets with GitHub Actions using Doppler.

Fortune Ikechi — Tue, 28 Sep 2021 04:12:31 +0000

How to Manage Secrets with GitHub Actions using Doppler.

Summary

Managing access and private keys with GitHub Actions is vital in managing continuous deployment and integration in building applications. Over time, there have been several inventions on how best to do this, but there’s always a risk of issues with workflows and mismanaging secrets for software developers and teams.
For this, Doppler has provided a better and easier way of managing secrets when managing application CI/CD with GitHub Actions. Throughout this tutorial, we’ll focus on using Doppler as an effective secret manager for managing our Node.js and React application with GitHub Actions.

Goals

In this post, you will learn how to build a simple Notes application with Node.js and React.js, connect it to GitHub actions for running CI/CD. We’ll then set up our project with Doppler to store our application’s secret keys instead of on GitHub Actions or even native .env files. At the end of this tutorial, you will learn how to use Doppler for managing secrets with Github Actions.

Introduction to Managing Secrets with GitHub Actions

One of the issues DevOps and Software Engineers have when running continuous integration and deployment with GitHub Actions is handing secret keys and tokens required for authenticating the application against them. For GitHub Actions, logging your application’s secret can be very lengthy and stressful; any mistake in logging an application’s secrets can result in a developer getting terminated and even cause the company to lose millions.

Intro To Doppler Secret Management

Doppler is a universal secret manager that aims to reduce the stress and issues associated with managing secrets with GitHub Actions. With Doppler, there is no need for teams to share and handle application secrets on GitHubActions. Doppler provides a CLI that gives developers a central environment of their application environment. Doppler also allows DevOps Teams and Engineers to access secrets from a single, and easy to use platform.
It’s also important to point out that Doppler supports all languages and tech stacks and is built to support all kinds of application types. One of such integrations is GitHub Actions for DevOps teams and Engineers. In our next section, we will look at managing our application’s secrets with Doppler on GitHub Actions.

Setup a MERN Stack App With Doppler Using GitHub Actions

In this section, we will learn how to manage application secrets on GitHub Actions with Doppler. In our application, we connected a Node.js powered backend in sending images and as a database for storing data from our application.
We also added the ability of users to choose which category of photos to select. Users will also be able to get random images from our API. All these will involve many API keys that our application’s front end will utilize. For our application’s env file, Doppler will be used to secure our application’s secrets.

In the image above, we have our application file structure, but our focus here will be our project’s .env file which contains all the secrets for our application to connect our server and image API. Inside our env file, we have:

REACT_APP_UNSPLASH_ACCESS_KEY=x_x4KNbXEt0xxxxxxxxxxxxxxxxxxx  REACT_APP_UNSPLASH_SECRET_KEY=NFOWuGDXZxxxxxxxxxxxxxxxxxxxxx

Setting Up Doppler

In order to use Doppler, first, we will create an account here. After creating an account, you’re prompted to create a workspace that can be any name you choose. Doppler also provides user-friendly prompts explaining your functionalities and which ones are optional and necessary.

Create a MERN Stack Project

To create a project on Doppler, we will navigate to the build to create a project after creating our Doppler workspace. Next, we will add our project details such as project name and project description, and if done correctly, our dashboard should look like the image below:

After we’ve created our application, we will see a dashboard with our application environments dev, staging and production as shown in the image below:

If we notice, our application doesn’t have a staging, dev or production environment, so we will create a new environment that we will call GitHub. You can create a unique, environment by clicking on the hamburger menu like the image below:

Authorising Doppler in GitHub Actions

After creating our environment variables as we did above next is o connect Doppler to our GitHub repositories. To do this, click on the integrations button on the right side of our Doppler dashboard and select GitHub from the options as shown below:

After we’ve selected GitHub for our integration, we will click on Set Up Integration and let Doppler complete our secrets setup. With workspace built this, every time we change or remove a secret in Doppler, it automatically reflects on our GitHub Actions page.

Now we have our project set up on the Doppler website, let’s set our project our local environment using the Doppler CLI
First, let’s proceed to install the Doppler CLI, which will help us in the development stage of our application.

    # Install pre-reqs
    sudo apt-get update && sudo apt-get install -y apt-transport-https ca-certificates curl gnupg
    # Add Doppler's GPG key
    curl -sLf --retry 3 --tlsv1.2 --proto "=https" 'https://packages.doppler.com/public/cli/gpg.DE2A7741A397C129.key' | sudo apt-key add -
    # Add Doppler's apt repo
    echo "deb https://packages.doppler.com/public/cli/deb/debian any-version main" | sudo tee /etc/apt/sources.list.d/doppler-cli.list
    # Fetch and install the latest doppler cli
    sudo apt-get update && sudo apt-get install doppler

Now, we’ve finished configuring and installing Doppler CLI on our local machine, run the following code to confirm that it was installed successfully.

    doppler  --version
    # v3.32.0

Next, let’s authenticate our local development with the remote development environment as they need to be in sync.

    doppler login
    ? Open the authorization page in your browser? Yes
    Your auth code is:
    XXXXh_XXXX_cybele_hour_XXXXo_XXXXmonica
    Waiting...

This opens the browser to log into your account and authenticate your local environment. Fill in your email or login with Google, then copy and paste the auth token displayed on the terminal to authenticate Doppler.
Run the doppler setup command inside the root and select the right option to configure your local environment. Now let’s return to our remote project on the website and click on the dev section of the project. Then click on the Add Secret to add a new secret as below:

kaycodev@kaycodev:~$ doppler setup 
    Selected only available project: daisy-ui-app
    ? Select a config: daisyui
    ┌─────────┬──────────────┬────────────────┐
    │ NAME    │ VALUE        │ SCOPE          │
    ├─────────┼──────────────┼────────────────┤
    │ config  │ daisyui      │ /home/kaycodev │
    │ project │ daisy-ui-app │ /home/kaycodev │
    ig  │ daisyui      │ /home/kaycodev │
    │ project │ daisy-ui-app │ /home/kaycodev │
    └─────────┴──────────────┴────────────────┘

Next, let’s return to our small project and click on the dev section of our project. Then click on the Add Secret. Return back to your terminal and run the code block below to confirm that your secret key is in sync with your remote environment. Your private address is shown in the image below:

Now, let’s start our application by running yarn start on our terminal, if done correctly, our browser tab will look like the image below:

Conclusion

We’ve successfully set up Doppler for a MERN stack application to secure and manage our application’s secret keys. We eliminated the need to have a .env file. Using Doppler, we can now manage these secret keys amongst a development team, giving access to a particular project or workspace on our Doppler dashboard. We can also add Doppler to any native JavaScript application. You can find the code used in this tutorial on GitHub. You. If can learn more about Doppler here.