Forem: Chris Bongers

I wrote 1000 articles, what’s next?

Chris Bongers — Thu, 22 Dec 2022 05:46:40 +0000

Most of you know me for my consistency, a golden arrow in my blog series.

I've written 1000 articles in 1008 days!
Almost an article a day, and my honeymoon was the only holiday I ever took.

I'm super proud of this achievement; it has been a fantastic journey.

But what's next?

And it took me a while to think about that.
Do I want to continue writing daily? Do I want to try out other things? What is the next big thing?

And before answering that, I need to open up about the fact that writing daily is super unique, and I loved it, but it was also quite draining towards the 1000th article.

And then something magical and exciting changed my whole thinking about everything.

We got pregnant!
So amazing, and I'm ready to become a dad.

What to expect

So alright, what to expect from me in the future?
I will never stop creating content as I enjoy it so much, but I decided to move away from daily content.

There are a couple of aspects I want to try to find the next best thing:

Youtube videos
Long-form articles
Ebooks

Between those, I'll dedicate more time per content piece and might even go deeper into some of the ones I already created.

Besides that, I have a few hobby projects and ideas I want to execute, so keep an eye out for those.

What about the site?

Well, I might drop an article irregularly as I see fit, but the truth is, I'm planning on selling the website.

It's been my baby for almost three years, and it has matured a lot to a point where I'd love to see someone take it over and keep providing unique content for new developers.

If that person is you, please do get in touch 🙏.

Some numbers

Many of you probably came here to see some numbers, right?
What do 1000 articles represent?

And here are some of them:

528704 words
1920 newsletter subscribers
160K+ page views every month
110+ #1 ranked google queries
an average of 100K impressions daily
5K clicks on search terms alone
And so much more

I couldn't be happier.
In the beginning, I'd never thought that would even be possible, yet I achieved it.

And that's not because of my writing, but because of all you amazing people motivating me and reading the articles.

So from the bottom of my heart:

Thank you for joining me on this journey.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure community and more

Chris Bongers — Wed, 21 Dec 2022 07:02:20 +0000

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool.

This shows in my previous explorations of Astro, Medusa, and now Vendure as well.

All these products thrive in a super open, welcoming, and helpful community.
To me, this is super amazing as it helps you use the product to the fullest.

Let me sketch some examples of the Vendure community.

Examples of the community

First of all, Vendure has an excellent slack channel where you can pop in and ask any questions.
Anyone is super helpful to help you get to solve your issues.

I even got a DM from a core member stating they saw my articles on Vendure and asking why I was looking into their product.
I love it when creators like to get feedback on those things.

Secondly, there is a healthy amount of help available online, as in people writing about Vendure, creating examples, and even products.

An excellent example of the latter is Pinelab, where the owner Martijn creates open-source Vendure plugins. Vendure saw this effort and made Pinelab a silver Vendure partner.
Small acknowledgments like that show how much they respect their community and how much they want it to be healthy.

Expectations

When it comes to communities, what would you be looking for?

As for me, it's mainly a matter of responsiveness, friendliness, and activeness.

To elaborate a bit on that, if there is no responsiveness, you will get frustrated and eventually give up on trying to solve the issue or question you might have.

The same with snarky comments or people being rude. It will deter you from being active in the community and again give up.

Or, in the last case, if there is nobody active actually to answer questions, it will naturally just die out.

These are my main three elements of a healthy community. My question to you is:
What's the most important thing for a community for you?

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Deploying Vendure

Chris Bongers — Tue, 20 Dec 2022 07:11:02 +0000

The cool part about Vendure is how easy it is to set up and how abstract each layer is.
Basically, we get the following elements:

External database
Server
Worker
Admin UI
Frontend

While this is amazing, it also brings a bit of complexity when it comes to hosting your Vendure shop.

At the time of writing, I'm still doing some research, and it seems Michael from Vendure is also working on an excellent guide for hosting. (Which I'll add here once it's done).

For my testing purpose, I decided to try out hosting to see what's possible and go with the following setup.

RailwayApp for the database, server, worker, and admin UI
Netlify for the storefront

I wouldn't change the front end, as Netlify works fine. However, Vercel or Cloudflare would work equally well.

As for the backend side, Railway works, but it's a bit slow on their free tier. (Still experimenting with a nice setup there).

Setting up the backend

I'll still show you how to host Vendure for free but with limited resources for this guide.
You should be able to apply this process to another provider or potentially upgrade the railway subscription.

Create a new Railway account or login into your existing one, creating a new project.

The first thing I added was a PostgreSQL database. I then manually connected to it with TablePlus and imported the database I had locally.

You'll see the database connection string we'll need in a bit on the connection screen, so copy that to a safe spot.

The next thing we need to do is add a new service, a project, from GitHub. (Assuming you pushed your project to GitHub).
In Railway, you'll be able to right-click on the canvas and select the new service option.

Once you add the service, it should automatically add the Postgres variables.
Add optional variables you have set in your .env file.
You'll need to add the database options here, as Vendure uses an indirect connection.

Then we'll also need to define what command it should run in the settings.
And in the case of Vendure, we can set it to yarn run build.

It should then auto-build your application every single time you push new changes.

Note: I sometimes found you need to trigger re-deploy as it would timeout the first deployment manually.

Once it's running, you should already have access to your admin UI!

The URL should be something like this: https://your-name.up.railway.app/admin.

Hosting the storefront

Depending on which storefront option you choose, we have multiple options.
I chose Remix, so I found Netlify super easy.

Log in to Netlify and choose the project from your GitHub repos.
It will automatically recognize it's a Remix project and set all the configurations for us.

All we need to do here is set an environment variable for the VENDURE_API_URL. This should point to your Railway environment.

Then go ahead and deploy it, and it should be up and running.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Overwriting email templates

Chris Bongers — Mon, 19 Dec 2022 06:08:05 +0000

The previous article looked at customizing Vendure on a data and process level.
In this article, we'll look at customizing emails, as they are often a big part of a webshop system.

We'll be looking at two different layers of customization for customizing these emails.

Globals
New email flows

Changing email globals

We'll first have to add the email plugin, which we'll use to modify things.

npm install @vendure/email-plugin

Now we can open our vendure-config.ts file and load the plugin.

export const config: VendureConfig = {
  plugins: [
    EmailPlugin.init({
      handlers: defaultEmailHandlers,
      templatePath: path.join(__dirname, '../static/email/templates'),
      globalTemplateVars: {
        fromAddress: '"example" <noreply@example.com`>',
      },
      transport: {
        type: 'smtp',
        host: 'smtp.example.com',
        port: 587,
        auth: {
          user: 'username',
          pass: 'password',
        },
      },
    }),
  ],
};

From this config, you can change quite a few variables. For a complete list, check out the official documentation.

This config can change almost everything that has to do with the existing templates.
You can change the copy and format of each email by modifying them in static/email/templates.

New email flows

At one stage, I needed to support a brand-new email flow.
By default, this was the email being sent on payment to give you an order confirmation, but I needed it to be sent pre-payment as payment instructions were manual for this shop.

So to add a new flow, we can create custom email event handlers on specific actions in our system.

This is the example of the order placed handler.

const orderPlacedHandler = new EmailEventListener('order-placed')
    .on(OrderPlacedEvent)
    .loadData(async ({ event, injector }) => {
        transformOrderLineAssetUrls(event.ctx, event.order, injector);
        const shippingLines = await hydrateShippingLines(event.ctx, event.order, injector);
        return { shippingLines };
    })
    .setRecipient(event => event.order.customer!.emailAddress)
    .setSubject(`Order confirmation for #{{ order.code }}`)
    .setFrom(`{{ fromAddress }}`)
    .setTemplateVars(event => ({ order: event.order, shippingLines: event.data.shippingLines }));

And to use it, we return this handler in our config.

EmailPlugin.init({
        ...
    handlers: [orderPlacedHandler],
}),

When creating this new template, ensure that you add a new physical email in your template folder.
In this case, static/email/templates/order-placed/body.hbs.

Note: You can also subscribe to your own custom events.

Pretty cool, as it's straightforward to create and customize email flows within Vendure.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Customizing vendure

Chris Bongers — Sun, 18 Dec 2022 05:50:51 +0000

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case.

In this article, I'll take a high-level look at some elements we can customize within Vendure.

The cool part is that it mainly works via changing the one vendure-config.ts file.

Customizing models

The first thing one might want to do is add custom fields to any of the existing Entities.
I'm surprised by how easy this process is and how slick everything works.

Open your vendure-config.ts file and add or modify the customFields section.
In my case, I'll add a custom field to the product entity. You can give it any name you'd like.

export const config: VendureConfig = {
  customFields: {
    Product: [{ name: 'myCustomField', type: 'string' }],
  },
};

Since this will introduce a database change, we'll need to generate a new migration.
Don't worry. Vendure will take care of all the heavy lifting.

npm run migration:generate customField

And now, we can run our server, and everything will work.
If we visit a product, we should see the custom field.

Customizing the order process

Besides customizing the fields, you might want to add additional steps in the order process.

For instance, you might want to validate some aspects of the order or the customer.
This could be customer should be a valid tax-related customer, or an order above a certain weight can't be shipped.

So let's take the first example as the Vendure docs describe this best.

Currently, we would have the following state:

AddingItems > ArrangingPayment

We want it to be:

AddingItems > ValidateCustomer > ArrangingPayment

The first thing we need to do is define a new state. This is a physical text and doesn't do anything yet.

Let's create a new file to separate things: validate-customer.ts.

import { CustomOrderProcess } from '@vendure/core';

export const validateCustomer: CustomOrderProcess<'ValidateCustomer'> = {
  transitions: {
    AddingItems: {
      to: ['ValidateCustomer'],
      merge strategy: 'replace',
    },
    ValidateCustomer: {
      to: ['ArrangingPayment', 'AddingItems'],
    },
  },
};

As you can see, this tells what transitions are valid to make.
We can then open our vendure-config.ts and load our new process.

export const config: VendureConfig = {
  orderOptions: {
    process: [validateCustomer],
  },
};

Now let's make sure this intercepts something. Go back to the validate-customer.ts file and add the following function.

export const validateCustomer: CustomOrderProcess<'ValidateCustomer'> = {
  // Transitions go here

  // The logic for enforcing our validation goes here
  async onTransitionStart(fromState, toState, data) {
    if (fromState === 'ValidateCustomer' && toState === 'ArrangingPayment') {
      const isValid = await validateTheActualCustomer(data.order.customer);
      if (!isValid) {
        // Returning a string is interpreted as an error message.
        // The state transition will fail.
        return `The customer is not valid`;
      }
    }
  },
};

This is simply a mockup, and you should create the actual validation function to evaluate the customer on specific fields.
If we return a string, it's handled as an error state, and the transition won't happen.

Generic modifiers

The above two are very common modifiers, but Vendure comes packed with more.

For instance, I needed to modify the stock level output in one of my shops.
By default, it only shows things as "low stock" and never the actual number.
On my webshop, it was needed to show the exact stock at hand.

To achieve that, we can open the vendure-config.ts and create a new function.

export class MyStockDisplayStrategy implements StockDisplayStrategy {
  getStockLevel(
    ctx: RequestContext,
    productVariant: ProductVariant,
    saleableStockLevel: number
  ): string {
    return saleableStockLevel.toString();
  }
}

This is a function to extend the default stock display strategy. In my case, I return the physical stock level as a string.
To ensure Vendure uses this value, we can modify the config to load that.

export const config: VendureConfig = {
  catalogOptions: {
    stockDisplayStrategy: new MyStockDisplayStrategy(),
  },
};

And now, the stock levels on the site will show the exact amount you have left in stock.

This is just one example, Vendure comes packed with small little hooks that we can use to customize our webshop and system.
I love that they made it easy and hassle-free to adjust the system to your needs.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Setting up facets

Chris Bongers — Sat, 17 Dec 2022 05:20:15 +0000

As mentioned in my very first article about Vendure, one of the most important things for me was the concept of facets.

In my use case, I needed custom elements for each product that the end users could filter.

For example, the beer shop I'm working on needs to have quite a lot of global fields:

Brewery
Type of brew
Alcohol percentage
And so on

Luckily for us, Vendure supported this out of the box, and in this article, I'll show you how to set it up.

Note: This involves more graphical interaction over development.

Manually creating facets

You can spool up your Vendure server and visit the admin UI at http://localhost:3000/admin/.

Move to Facets in the left sidebar menu; if you opt for the demo products, you'll see some already created facets.

In the top right, you'll have the option to create new facets containing a name and optional code.
Once you've chosen a name, you'll be able to add facet values. These are all the unique values for that facet.

I've created a Test facet with foo and bar values in the example below.

This is all great and well, but it doesn't do much. So we must move to one of our products to leverage these facets.

When you open a product, you should see on the right side there is a button to add facets.
The important part to note here is that it searches based on the values, not the name.

I'm trying to add the Foo value in this case.

Importing facets

As mentioned in the Vendure import article, we can use an import to manage many products.

It's good to note that this also supports the import of facets!

How it works is that you define variantFacets as a column, and inside, you can column deliminate all the values like so:

test:Foo|test:Bar

This would add both the Foo and the Bar value.
The test part is the code of the facet that we created.

This is super helpful in creating an excellent structured database with all my products organized with custom facets.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Assets to an S3 bucket

Chris Bongers — Fri, 16 Dec 2022 05:45:29 +0000

As my webshop serves a lot of images, I wanted to leverage a good CDN and quickly found a neat integration with S3 available for Vendure.

In this article, I'll show you how you can connect and leverage an S3 bucket as your asset storage.

Setting up Amazon

The first thing you'll need is an AWS account, which can be tedious. (Mainly quite long)

Head over to AWS and create your account.

Create AWS account

Once you are set up and ready to go, it's time to create a new bucket.
The steps for creating a bucket are extensive and might change over time, so it's best to follow Amazon's docs on this.

Eventually, your bucket should be ready like this:

You'll also need to add new access credentials.
Head to AWS's IAM section and create a new user.

You can give it a name that represents the tool you will use and also choose to make it an Access key.

On the next screen, you'll need to attach the permissions. In our case, we can choose to connect them manually.
Search for AmazonS3FullAccess.

You can press next until you get to the actual keys in the next couple of steps.
Copy the key and secret to a secure place.

Setting the bucket as storage

Now it's time to add some code.
First of all, we need to install the aws-sdk package.

npm install aws-sdk

I save my secrets in a .ENV file for maximum protection, so go ahead and add the following two keys.

AWS_ACCESS_KEY_ID={YOUR_KEY}
AWS_SECRET_ACCESS_KEY={YOUR_SECRET}

Next, we need to modify the vendure-config.ts file to use a new asset plugin.

Start by importing the S3 one.

import {
  AssetServerPlugin,
  configureS3AssetStorage,
} from '@vendure/asset-server-plugin';

And inside the config, add a new plugin.

export const config: VendureConfig = {
    # Your other config here
    plugins: [
        AssetServerPlugin.init({
            route: 'assets',
            storageStrategyFactory: configureS3AssetStorage({
                bucket: 'vendure',
                credentials: {
                    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
                    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
                },
            }),
        }),
    ],
};

It's essential to change the bucket name to your bucket.

And now, any assets you upload via the admin UI or the import will be stored in the S3 bucket!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Importing data

Chris Bongers — Thu, 15 Dec 2022 06:33:33 +0000

Product imports are an essential element that I found great when working with Vendure.
It was super important to me to be able to import products and their data.

Many people might have the exact needs as they often already have a webshop or system to keep track of these things.

In this article, we'll look at how we can use the data import feature of Vendure.

Importing products

When importing products, Vendure accepts a flat .csv format, and it can hold products, assets, variants, and even custom fields.
These elements will be created during the import, which is excellent.

You can find an example of the CSV format on the Vendure docs

The are multiple ways of doing the import, and I decided I wanted to be able to run it manually, so I created my script for it.

I called the script populate-server.ts.
It's important to note that this uses the Vendure core populate function, which takes two parameters, the first being the initial data and the second your import.

My complete file looks like this.

// populate-server.ts
import { bootstrap } from '@vendure/core';
import { populate } from '@vendure/core/cli';
import path from 'path';

import { config } from './src/vendure-config';
import { initialData } from './my-initial-data';

const productsCsvFile = path.join(__dirname, 'import.csv');

populate(() => bootstrap(config), initialData, productsCsvFile)
  .then((app) => {
    return app.close();
  })
  .then(
    () => process.exit(0),
    (err) => {
      console.log(err);
      process.exit(1);
    }
  );

Let's go ahead and also create this my-initial-data.ts file.
This file can be used to set up the admin section of your Vendure server.

In my case, I limited quite a bit of the setup, and my file looks like this.

import { InitialData, LanguageCode } from '@vendure/core';

export const initialData: InitialData = {
  paymentMethods: [],
  defaultLanguage: LanguageCode.en,
  countries: [],
  defaultZone: 'SA',
  taxRates: [],
  shippingMethods: [],
  collections: [],
};

You can find the complete object you can construct on the Vendure docs.

Note: Every time you run your import, these will be executed, so running it more than once will result in duplicates.

To run the actual import, we can use the following command:

yarn ts-node populate-server.ts

Depending on the number of products, it can take some time to finish.

I often ran the script for testing purposes to get the proper import set.
You might have to play around with your CSV format if importing many custom fields this way.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Storefronts

Chris Bongers — Wed, 14 Dec 2022 06:09:47 +0000

When setting up a commerce website, you'll likely need a storefront. This will be what the end users will use to order your products.

In the case of Vendure, we are open to creating our own, but luckily for us, they have some fantastic starters already set up.

At the time of writing, they have official starters for:

Remix
Vue Storefront
Next.js
Angular

Since I started a series on Remix, I have been eager to try that.

Installing the Remix Storefront

To install the Storefront, we can clone the Git repo and install it.

git clone git@github.com:vendure-ecommerce/storefront-remix-starter.git

cd storefront-remix-starter

npm install

Then, create a .env file in the root and point it to our local Vendure server.

VENDURE_API_URL=http://localhost:3001/shop-api

Now go ahead and run the Storefront with: npm run dev.

Note: Make sure your Vendure server is running.

And visit the Storefront on http://localhost:3000/.

Play around with it and try to order some products. You'll see it's blazing fast!

Other options

As mentioned, you can use some other supported Storefronts, which you can find on the Vendure website.

And if you want to use something together, you can take inspiration from any of the existing integrations and create your own new integration.

Since, in the end, they query the API and have no concrete direct implementations in place.

I'm super stoked to see this freedom of front-end in a (headless) commerce system being so well demoed out.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure - Quick setup

Chris Bongers — Tue, 13 Dec 2022 06:30:28 +0000

In the previous article, we talked about Vendure, what it is, and why I find it an exciting commerce solution.

In this article, we'll get started and see how easy it is to set up.

Note: For these articles, I mainly use Vendure's documentation, which is comprehensive.

Vendure quick start

The easiest way to start with Vendure is to run their create command. This will set up everything you need to get started.

Out of the box, we get:

Admin GraphQL API
Shop GraphQL API
Admin UI

All you need to have is node (with npx) npm 5.2 and higher installed.
With that, you can run the following command.

npx @vendure/create my-app

Where my-app is the actual name of your application.

In the installation process, you'll be asked which type of database you want to proceed with. You can pick whichever one works best for your system.
It will also give you the option to populate with sample data.

To get started quickly, the SQLite option is very nice to get started with.

Once the script is done, you can navigate to your folder and run the application.

cd my-app
yarn dev

It will spool up all your available resources. Once healthy, you should see the following in your terminal.

Exploring the APIs

As mentioned, we get access to the Vendure APIs, split into two categories.

An admin API and a Shop API.
Administrators can use the admin API to manage products, orders, and more.
The shop API is public-facing and can be used for our eventual storefront, mobile app, etc.

Let's take a quick look at how we can reach them.
For the following examples, I'm using Insomnia, but any API tool will work.

Let's start with the shop API. To access it, we can use the following URL http://localhost:3000/shop-api.

The API uses GraphQL as its layer of communication.
For instance, we can use the following graphQL query to get a list of products.

query products {
  products {
    items {
      name
    }
  }
}

Which results in a list of all our product names:

Another fantastic element of Vendure is that it gets shipped with a GraphQL explorer built in, so we can visit the API URL and query from there.
Visit http://localhost:3000/shop-api and execute your queries.

The same goes for the admin API. However, we should use the following URL http://localhost:3000/admin-api.

Exploring the admin UI

Besides these fantastic APIs, we also get access to a default admin UI.
Visit the following URL: http://localhost:3000/admin/, and you can explore the admin interface.

It's an excellent place to start exploring how things are linked together.
If you choose the population of data, you'll even be able to see some advanced linking and facets.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Vendure headless commerce - part 1

Chris Bongers — Mon, 12 Dec 2022 06:16:30 +0000

A while ago, we started looking at Medusa as an alternative for a WooCommerce webshop, I'm still busy with this project, but in the meantime began looking at Vendure too.

At first, the website was a little bit of a letdown, and Medusa seemed to do a more appealing job at marketing itself.
However, I quickly came back to this after giving it a try.

A big shoutout to the Vendure team, as they have been super helpful with all my requests and taking the time to help me set up.

In a couple of articles, we'll be looking at Vendure and how we can set up a headless commerce system and link it to some storefronts.

What exactly is headless commerce?

You might be wondering, what is this headless commerce system?

It's an e-commerce system, but it's not tied to any specific frontend solution.
In the case of Vendure, it's focused on developers who love the modern web, and we see familiar names such as TypeScript, GraphQL, and NodeJS.

We get an out-of-the-box solid system that we can extend and modify to work with our other systems.

This benefit is that a developer can choose whatever frontend stack they want to work in, giving a lot of freedom.
We can quickly hook up multiple solutions and languages to work with, even on the admin side.

What makes Vendure so great?

I started looking at Vendure because of how flexible their setup was. We get a lot of hooks we can use and a pretty large open-source community that is super helpful.

One of my main selling points was that they provide product variants with facets.
I was particularly struggling with this on Medusa, and it worked great out of the box from Vendure.

The other real benefit was the number of storefronts we could hook into. I liked the Remix storefront a lot as I was exploring Remix in general (so this is very biased).

It also comes with many great options that need little to no modifications to make things change, and more in future articles.

What to expect

You might be interested in this process, so let's discuss what to expect from the following articles.

We'll set up the system with the admin interface
We'll create a storefront
Importing data
Setting up products and facets
Attaching a CDN
Customizing Vendure
Deploying

If you are keen on any of the above topics, subscribe to my newsletter and get the latest articles as they are launched.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Conditional wrapping in React

Chris Bongers — Sun, 11 Dec 2022 05:54:45 +0000

This is something you do not always need, but I wrote this article for those looking for it.

Sometimes we might have a generic element, a specific component that renders inside a modal.
When a specific flag is set, the component should get a parent wrapper to display it in a different variant.

We could use an if...else statement, but it looks messy.

Conditional wrapping in React

Let's say we got specific service cards to make it a bit easier to follow. In some cases, they explain a service, but in others, they need to link to a detail page.

The component might look like this.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>{description}</p>
      <img src={image} alt={title} />
    </section>
  );
};

As mentioned, what happens if we need to wrap this whole thing in a link element when the URL exists?
We could use the if...else loop.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      {url ? (
        <a href={url}>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </a>
      ) : (
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </>
      )}
    </section>
  );
};

But this shows duplicate code, so it's a bit silly. If we need to style each element, we must modify it in two places.

So how can we better wrap this conditionally?

We can create a generic component that handles this for us, the component will be named ConditionalWrapper, and it will take a condition, the wrapper, and the children it should wrap.

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

With that in place, we can use it on our existing component to clean it up.

const ServiceCard = ({title, description, image, url}) => {
    return (
        <section>
            <ConditionalWrapper
                condition={url}
                wrapper={children => <a href={url}>{children}</a>}
            >
                <>
                    <h2>{title}</h2>
                    <p>{description}</p>
                    <img src={image} alt={title} />
                </>
            </ConditionalWrapper>
        </section>
    )
}

And now, if we use our component, depending on whether we pass the URL. It will render with or without the href. And the best part is that we have no duplication in our elements.

For example, the following use case:

<ServiceCard title='test' description='foo bar' img='img1.jpg' />

It would return the following HTML output:

<section>
  <h2>test</h2>
  <p>foo bar</p>
  <img src="img1.jpg" alt="test" />
</section>

We will get the following output if we put the URL in the element.

<section>
  <a href="url">
    <h2>test</h2>
    <p>foo bar</p>
    <img src="img1.jpg" alt="test" />
  </a>
</section>

Pretty cool, right?

The main magic, of course, happens in the ConditionalWrapper component and, to be precise, the wrapper argument.

Since we pass the children (which is a React default prop), we can see that the use case of our function as in wrapper={children => <a href={url}>{children}</a>} states.

If the condition is met
Wrap the children in this specific element

There will only be a handful of times when you might need this function, but it can be a huge lifesaver.

Note: big thanks to Olivier for the original idea!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter