DEV Community: Front-Commerce

Audits conducted in Front-Commerce for client projects

Paul van Dyk — Fri, 11 Aug 2023 10:44:44 +0000

When it comes to developing an e-commerce website, there are many different areas that require constant attention. Project teams may introduce performance issues or forget important features that could negatively impact the user experience. That's why audits are crucial to ensure that the website is meeting high standards and delivering a great user experience.

At Front-Commerce, we conduct thorough audits on our client projects and provide recommendations to improve website performance and user experience. In this blog post, we will discuss the key points we measure during our audits.

🚀 Performance

Performance is a critical factor in the success of an e-commerce store. A slow website can lead to frustrated customers and lost sales. During our audits, we measure the performance of our client's websites in two key areas: server and webperfs.

Server

During our audits, we check if the website's server is performing well. We make sure that things like cache and data loaders are implemented correctly to improve server performance. We also verify if the cache strategies are properly implemented to reduce the number of requests made to external services. Another thing we check is that the server-side rendering (SSR) is implemented properly to improve the TTFB. We also ensure that there are no memory leaks that can negatively impact the application's stability.

Webperfs

Another important part of our performance audit is the webperfs analysis. webperfs measures the website speed, responsiveness, and overall user experience. This includes checking if the website's fonts and images are optimized for the store and if the JavaScript bundle size is at an optimal level. We also check if important pages are preloaded to improve the perceived performance for end users.

🎨 Theme customization

We understand that every e-commerce store has unique branding requirements. During our audits, we check if the website's theme has been customized to match the client's branding guidelines. We also ensure that any customizations do not negatively impact the website's performance or user experience.

🦻 Accessibility

We believe that all websites should be accessible to everyone, regardless of their abilities. During our audits, we check if the website meets accessibility standards, such as having proper alt tags for images, keyboard navigation support, and proper contrast ratios.

🖌️ Styleguide

Consistency is key when it comes to creating a great user experience. During our audits, we check if the website's style guide is consistent throughout the website. We also ensure that the website's typography, colors, and spacing are in line with the client's branding guidelines.

📨 Links received by e-mail

A customer journey extends beyond the web UI and encompasses email interactions. That is why we also check the links that are received by email, as it ensures that customers can access the correct pages of the website, leading to a better overall user experience.

🔗 Audit broken links in the store

In a project, developers could have forgotten to update a hardcoded link, or content writers may have contributed unfinished content or made typos. That's why during our audits, we perform a thorough check for broken links and provide recommendations to fix them, ensuring that the website's user experience and SEO are not negatively impacted.

🔍 SEO

Having good SEO is crucial to driving traffic to the website. During our audits, we check for the following:

404 & redirections

We check for any 404 errors and ensure that the website has proper redirections in place. This is especially important when migrating to Front-Commerce from another platform, as the links may not be in the same format. This can cause 404 errors for any pages previously crawled by search engine robots, such as Google.

Robots.txt

We ensure that the website's robots.txt file is properly configured to allow search engines to crawl the website's pages.

Sitemap

We check if the website has a sitemap.xml file and that it is correctly generated. More information about this can be found here

Meta tags and microdata

We ensure that the website's meta tags and microdata are properly configured to improve the website's search engine rankings and visibility when sharing on social platforms.

📱 PWA (Progressive Web App)

We ensure that the store meets the standards for a PWA. We provide recommendations to improve the website's PWA capabilities.

📈 Analytics

During our audits, we check if the website has proper analytics tracking in place. This helps our clients to make data-driven decisions to improve their website's performance and user experience. More information about this can be found here.

🧑‍💻 Code quality audit

Auditing code quality in a project is essential for several reasons. Firstly, it helps identify and rectify potential bugs, vulnerabilities, and performance issues, ensuring a more stable and secure application (as mentioned above).
Secondly, it promotes maintainability and ensures that the project can be updated during its life. By adhering to Front-Commerce best practices, developers can upgrade to newer Front-Commerce versions more easily and with less risk of introducing bugs. Finally, our code quality audit encourages consistent coding standards and improves overall code readability. This leads to a more robust, efficient, and sustainable codebase.

🪄 Application stability

Application stability is a crucial aspect of a composable architecture, like the one used by Front-Commerce. It refers to the website's ability to remain resilient to external systems outages, such as server downtime or configuration
errors. Ensuring stability is essential for a front-end solution like Front-Commerce, as it directly impacts the user experience and the website's ability to drive sales. Front-Commerce conducts thorough audits to identify potential issues that could affect stability and provides recommendations to improve resilience and ensure a reliable website.

✨ Magic Button

We believe in going above and beyond for our clients. During our audits, we look for opportunities to add additional features to the website that will improve the contribution experience and improve the merchant’s team productivity. Our
Magic Button feature allows contributors to seamlessly improve the content on the website with direct links to the content source. We ensure that the contribution mode activation is secure and that any custom content is wrapped with the StorefrontContent component. More information about this can be foundhere.

☁️ Prod server & CI

We check if the website is properly deployed to the production server and if the continuous integration (CI) process is working correctly. This ensures that the website is always up-to-date and running smoothly.

🗒️ Audit logs

After conducting a thorough audit of the website, it's important to keep track of any bugs or issues that may arise once the site is live. While we analyze the codebase and test the application during the audit, we believe that analyzing
application logs and monitoring metrics is also crucial once the site is live. This allows us to detect any smaller bugs or performance issues that may have been missed during testing. We follow up on our audits with log analysis a few days after the project is live to ensure that everything is running smoothly and to address any issues that may arise. By addressing these smaller issues, we can improve the overall quality of the application.

☑️ Checklist before production

Before we proceed with the audit, we have a checklist that should ideally be done by integrators in the project. This checklist includes items such as verifying that the environment is properly configured, that the data has been
properly migrated, and that there are no broken links or missing assets. You can find a detailed checklist in our documentation here.

Conclusion

In summary, audits are essential for ensuring that e-commerce websites meet the high standards necessary to drive sales and provide an exceptional user experience. At Front-Commerce, we take great pride in conducting comprehensive audits and providing our clients with actionable recommendations to enhance their website's performance and user experience. By partnering with us, our clients can rest assured that their website is optimized for success and delivering the best possible experience for their customers.

Why do we check the number of external API calls in our audits?

Damien Pobel — Wed, 12 Jul 2023 07:27:19 +0000

On most of the projects built with Front-Commerce, we perform an audit. Without surprise, these audits are conducted on the basis of a checklist. The first part is devoted to performance and the very first criterion is to evaluate the number of external requests necessary to build the most visited pages when everything is cached. The point is to target zero external request to generate those pages. Maybe you wonder why we check that or why we give it so much importance.

This Performance section is introduced with the following sentence:

Performance is essential to improve user experience, but also to reduce server load and thus increase the site's traffic capacity.

So the point of the whole section is not only to increase the performances i.e. in that case, the time it takes to generate a page but also to increase the scalability of the application i.e. according to Wikipedia, the property of [the application] to handle a growing amount of work.

To measure the number of external requests, you can use one of our debug flags. For instance, here I'll use a very basic setup where Front-Commerce is connected only to a Magento2 instance, so I can add DEBUG=axios in the environment to have some information about external requests. Depending on your actual setup, you might need other values to also count requests to Prismic or any other external service.

Also, we are mainly interested in the most popular pages of the site. Commonly, the homepage is most visited page. By default, we also check the category and the product pages. Depending on your project, this list can be slightly different.

Number of external API calls versus performance

Note: Performance is a very wide topic. By performance here, we are looking at the time needed to generate a page server side. This is very easy to measure with a curl based command:

$ time curl -s http://example.com/my/url > /dev/null

On a Front-Commerce setup configured without cache and connected to a Magento2 instance, 27 requests to Magento2 APIs are needed to generate a category page. Each of these requests takes a significant amount of time, sometimes several hundred of milliseconds. While when caches are enabled, if everything is in cache, no external request is made.

Without surprise, the time needed to generate the page is completely different:

without cache, on my local setup, it took between 5 and 6 seconds;
with everything already cached, it took between 200 and 300 milliseconds.

It's 20 times faster! The example is a bit extreme, but I guess you get the point. Also, without external requests, the response time is somehow similar to any external API call. This means that if on a page you have one external API request left, getting rid of it might divide the response time by two. Worth a try, don't you think?

Number of external API calls versus scalability

Measuring the scalability is harder. It is done with load tests that involves running some scenarios to simulate traffic peaks (usually inspired by past events) in a production like environment. That's definitely not something you can do reliably on your local environment in 10 minutes. That being said, we always see a clear correlation between the number of external requests and the scalability of the application.

Commonly, the target of those external requests (the Magento2 instance in my previous example) becomes the bottleneck of the application especially if some popular pages requires several API requests to the same service i.e. one page generated by Front-Commerce entails n requests to one external service.

Depending on how Front-Commerce is hosted, it can also be the bottleneck because it will be busy waiting for some APIs to reply 😀.

The conclusion is simple: when it comes to external request, the less the better. After having said that, it remains the hard work of optimizing the application and the recipe is classic:

is the external request strictly needed ? In some case, it might be an opportunity to discover useless code or to discuss feature;
if it is strictly needed then you need to add more cache to the application either by leveraging the dataloader mechanism or by using the cache at resolver level if your project embeds content from Prismic.

VSCode Remote Development: Setup and usage

Gaetan Flament — Fri, 05 May 2023 08:05:00 +0000

Every developer has their own preferences for their setup, whether it be software or hardware. I’ve been a remote developer since 2018, and since then I’ve tried various ways to organize my workspace at home, that would fit both my work and personal times.

A typical remote developer kit will often include a laptop and one or more monitors. In my case, because I already had a multi-monitor setup for my personal desktop PC, all I needed was to come up with a way to homogenize and make it work with the company’s provided laptop.

My current setup: VS Code Remote Development

What is it ?

VS Code Remote Development is an extension pack for Microsoft’s widely used IDE VS Code. It allows developers to “use a container, remote machine, or the Windows Subsystem for Linux (WSL) as a full-featured development environment”. What it means, is that you will have your source code located on a single place, and you will be able to update it seamlessly from another system using VS Code.

Note: see our blog post on installing a WSL development environment if you're interested.

The requirements are:

For the client, pretty much anything capable of running VS Code (with special needs for containers for Microsoft Windows due to Docker’s own requirements)
For the host, a wide range of systems are supported. If you’re not using a “mainstream” OS or distribution, you might want to check the requirements section of the extension pack’s Marketplace page.

In this blog post, we’ll only talk about the SSH connections, so you will need to ensure that your host has an SSH Host set up. If you don’t, you can follow Microsoft’s guide on how to setup one.
For example, on Ubuntu, you can the command:

sudo apt-get install openssh-server

Installation

Note: At the time of writing, this guides uses screenshots and instructions for VS Code 1.78.0 and Remote Development 0.24.0.

That’s where this method shines.

The package installation on the client side is really simple: you’ll only have to install the Remote Development extension pack from Visual Studio Marketplace on your local machine’s VS Code. This will provide your IDE with all needed extensions to work on your remote
environment.

Once that’s done, you will notice two new icons

One in your Activity Bar (the vertical bar on the left of VS Code) which is the “Remote Explorer”. Clicking on it will reveal the explorer’s sidebar, in which where you will be able to see your different connections.

One in the left of your Status bar (the horizontal bar at the very bottom of VS Code’s window), which will display what host the current window is “attached” to.

In our case, we’ll create a new SSH connection by clicking on the icon in the Status bar, and select “Connect Current Window to Host…” in the popup that appears:

Then, select “Add New SSH Host…”, and type in the ssh command you’d normally use to connect to your host machine; typically:

ssh <my_user>@<my_host>

You might be asked to enter your host user’s password, and then VS Code will install all the necessary packages on your host machine (you will notice a notification stating “Setting up SSH Host on …”).

And that’s it! Hopefully once that is done, you'll already be set to develop on your host from your local machine. You’ll notice the icon in your Status bar is now showing the host you’re connected to, and you’ll be able to see the new connection in the Remote Explorer.

Password-less connection with VS Code Remote Development

One thing that might get tiring using VS Code Remote, is that you might need to type your password each time you open a new VS Code window or each time your it gets disconnected from your host, if your internet or local network connection has hiccups for example. To solve this issue, I configured the SSH connection so that is uses a RSA key I created for this purpose. Here’s how it is done:

Create a new key

You can use ssh-keygen to create one. it is available on most Linux subsystems, and on Windows Powershell.

ssh-keygen -q -b 2048  -f "./<myhost>_rsa" -t rsa

This will create two files: <myhost>_rsa (the private key) and
<myhost>_rsa.pub (the public key). The private key will stay on your client (typically in the ~/.ssh/ folder on Linux subsystems)

The public key will need to be copied onto your host. On Linux systems you will need to add the content of the public key to the end of the ~/.ssh/authorized_keys file. If the file doesn’t exist, copy your public key in ~/.ssh/, rename the file to authorized_keys and give it a permission of 600:

chmod 600 ~/.ssh/authorized_keys

Make VS Code use the key

On your client IDE, go to the Remote Explorer, and click the cog icon next to the SSH section, and then open the config file shown in the popup by clicking on it:

In this file, you’ll find the connection you set up and its configuration. In order to make VSCode use the key you created, add these lines to the configuration section:

Host <my_host>
  HostName <my_host>
  User <my_user>
  Port 22
  PreferredAuthentications publickey
  IdentityFile "~/.ssh/<my_host>_rsa"

After this, VS Code should not ask for your user's password again!

Pros and cons

Every method has its own advantages and disadvantages, and using this one certainly does not make any exception to this rule.

Pros

Ease of use

As stated in during the installation part, one of the most convenient points of this method is the ease of use. Installation is really easy and well documented on VS Code docs, and within VS Code itself. Configuring it on a brand new machine should not take more than a few minutes, and you will immediately have access to all of your host’s installed extension without needing to authenticate to your Microsoft of Visual Studio account.

Connectivity

Similarly, any terminal opened on the client will actually be an ssh connection on your host, and VS Code is (most of the time) able to analyze your local app’s log to automatically forward the right port on your local machine, which means you will be able still connect to localhost:XXXX on your local machine during development, without any server running locally. If VS Code does not detect the local port correctly, you will only have to add it quickly through the Command Palette "Forward a Port" command.

Portability

On the hardware side, my host (laptop, in my case) still stays as portable as ever, as I would only have to put in in my bag and I’ll still be able to develop on-the-go the same way I do on my desktop, without having to unplug anything (beside the laptop’s charger). And once I’m back, I can reuse my home setup.

Development and tests

Finally, having such a setup with two machines is also an advantage for development. Two machines means potentially two OSs, and it can become handy to test some code on two completely different, yet very “real” environments. In my case, My desktop runs on Windows and my laptop on Ubuntu, meaning I can easily test OS-specific features if the need arises (it used to be really useful for Internet Explorer, luckily gone are those days! 😅), while keeping the Linux CLI environment I prefer.

Cons

Here’s a catch though: two machines, also means two running machines, which in turn means more energy consumption as well. This is definitely not an environment friendly method!

During specific use cases, I sometimes encounter issues with port forwarding that force me to get back to my laptop’s keyboard, for example when using Docker with Traefik, VS Code is sometimes confused about what port to forward and where to forward it
to.

On the hardware side, this method renders your laptop (or host) a bit less useful, as most of the time you’ll work at home you won’t touch it much, besides turning it on or off. We will see in the next part other methods I tried that actually uses both machines actively.

On the management side, depending on how you manage your local machine, and how (if) you use it outside of work, you’ll have to take extra care of not mixing work and personal things, which can be extra tricky for some, especially if you’re pretty new to working at home.

Comparison with other methods I have tried

Why not use a dock ?

Most docks are really great at what they are meant to do. Unfortunately, this doesn’t include sharing peripherals between devices, which was my goal here. I still use my dock, however in my current setup, because I use the same keyboard / mouse for both my machines, it would mean plugging / unplugging those everyday
which is kind of painful.

Using both machine efficiently: Synergy / Barrier

This was by far my most preferred method. Synergy (and its open source clone Barrier) is a keyboard and mouse sharing software, that enable a single pair of peripherals to work on many different machines at the same time. Unlike VS Code remote (or SSH) only, using Synergy you are able to actually use every device’s UI as well, and coupled to VS Code Remote, you can basically use “any” number of machines the same way you’ll be using one.

Unfortunately, I had a bug on Ubuntu using Barrier that made me stop using this method some times ago as I couldn’t find a solution. If this issue was to be fixed however, I would hop in the Barrier train any day!

Another point of view: the Virtual Machine way, and Tmux

That’s a solution that requires a bit more setup, and isn’t really compatible with VS Code either, but might be interesting for Vi / Vim and terminal power users out there. Tmux is a terminal multiplexer, a software capable of running multiple terminal session in a single windows. This also allows terminal session to be “saved” and accessed from another device, meaning using terminal based editors, your could pickup your work right where you left it seamlessly, from pretty much any terminal on OSs supporting tmux (even from your phone!). Coupling Tmux with a Virtual-machine hosted source code, it would be one of the best method I can think of in terms of accessibility and portability (given you always have an internet connection where you go, which is not a hard requirement to satisfy in 2023).

However, because I’m not yet accustomed to terminal based IDEs, I only used this method for very small tasks and personal projects.

Conclusion

My current setup is not definitive, nor perfect. I keep updating and tweaking it as time goes on. For example, another solution I might look up in the future is KVMs, a physical interface that connect peripherals to devices, the same way as Synergy does on the software side. Those have been out for a while, but compatibility was not great for a long time.

I think every developer should invest a bit of their time to think about their setup from time to time. A lot of time is spend at our desks, and we now have all kind of tools, whether they be software or hardware, to make our lives better, so let’s take advantage of them!

I hope you enjoyed this quick tour of my own setup, and if you want to learn more about other topics related to development, please tune in for more blog posts!

Reduce friction by rediscovering your keyboard

Pierre Martin 💿 — Fri, 07 Apr 2023 03:27:00 +0000

Hey there! In this post, we'll talk about some awesome benefits that you can enjoy when you start using keyboard shortcuts and the terminal.

It can really help you navigate in an application or switch between different applications and contexts without any friction. We'll also illustrate the Unix philosophy, and provide tips for gradually adopting these practices.

I hope you find this helpful!

Why using your keyboard more?

As developers, we spend a lot of time typing on our keyboard. For typing code of course, but also for searching, documentation (issue tracker, wiki…) and communicating with others (Slack, Teams, Discord, emails…).

Now, think about how you switch context between different applications.

You’re writing code in a text editor, but want to ask a question to a teammate on Slack:

do you leave your keyboard to fetch your mouse (or trackpad)?
do you use “Alt + Tab”?
do you switch to a different virtual desktop? (using the keyboard)?

When on Slack:

do you use your mouse to select the person or channel you want to write to?
do you use “Ctrl + K” (or “Cmd + K) to navigate there?

Try both approaches: with your mouse, and with your keyboard.
How long does it take between the last character you typed in the editor and the first one you typed in Slack’s message input?

In this example, you might find that navigating to this new context without removing your fingers from the keyboard leads to a smoother experience. It removes friction.

When your brain thinks about asking on Slack, within a few keystrokes you’re ready to type your message, and a few keystrokes later you’re back in your text editor, ready to type the next line of code.
Context switching has been reduced to its minimum, helping you to focus on the task at hand.

This is just an example of context switching, but be aware of it and you’ll see that it happens all day long:

going back and forth between our code editor and our browser
searching for information on the internet
navigating in our emails or issue tracker
committing our code changes and pushing them to the repository to open a Pull Request
searching content in a file or a tree of files
switching to a different project, or directory
etc…

By rediscovering the keyboard shortcuts for each application you use, you can significantly reduce the time it takes to switch between contexts.

Most applications have a variety of keyboard shortcuts that allow you to navigate and perform actions quickly and efficiently.
By taking the time to learn these shortcuts and incorporating them into your workflow, you can streamline your work and reduce friction throughout your day.

Why using your terminal more?

I find it important to learn shortcuts for the applications you’re using the major part of your day.

For developers, these applications would be something like: a text editor, a browser, an instant messaging app and of course (don’t underestimate it) your operating system!

During your career, you’ll change the applications you use.
Your team could switch from Slack to Teams, you’ll move away from WebStorm to VSCode, you change job and the new company uses Linear instead of Jira, Outlook instead of Gmail…

Every time, it will mean that you will have to learn new shortcuts again. These changes don’t occur very often, so it is acceptable. After all, you spend most of your day using these applications so the investment on learning how to use them efficiently is worth it.

There are however a lot of tasks (you may not yet realize it) you can perform outside those applications.

What if I told you that you can invest time in learning how to reduce friction:

for your most common tasks
in a way that is gradually adoptable in your current workflow
with the ability to improve continuously without ever restarting from scratch
… for the rest of your career (and your life)

This is exactly what your terminal allows.

You’ll be able to achieve a wide range of tasks thanks to the ecosystem of tools embracing a simple yet powerful philosophy: the Unix philosophy!

The Unix philosophy

Write programs that do one thing and do it well.
Write programs to work together.
Write programs to handle text streams, because that is a universal interface.

The Unix philosophy is a set of guidelines that emphasizes simplicity, modularity, and the use of small, specialized tools that can be combined to perform complex tasks.
It encourages the use of plain text for data storage and communication, and favors the use of pipes and filters to process data.

It offers a number of benefits:

flexibility: text streams can be manipulated in many different ways. It removes the barrier of what you can do. You’ll be able to combine small simple programs together, in order to achieve exactly what you want to do, and make it more complex if needed. A “pipeline” of commands is also more resilient to changes: if data, source or process change you can adapt by changing only one “step”
improved efficiency: automate things or find information by typing a command in your terminal is often faster than navigating in an application and going through several screens and forms
greater control over your data: manipulating text allows you to interact with lots of systems and APIs, you’re not locked-in a specific vendor and can create bridges between most of your tools… as soon as you can get data in a textual format (i.e: output a list of files, get data from an API call, output Git history as text…)
portability: these tools are widely available on different systems. Your skills and knowledge are valid in different contexts: you can use them on servers, on your current laptop… and the next ones.

By focusing on small, specialized tools that can be combined in different ways, you can tailor your daily environment to your specific needs and preferences.

Over time, you’ll bring new tools or change some of them without having to learn everything again.

You’ll improve your environment and adapt practices incrementally and continuously, as you make complex tasks easier to perform or automate repetitive processes. Weeks after weeks, you’ll work more efficiently.

OK, I’m sold! What’s next?

Great! I’m glad that you want to reduce friction in your daily activities.
I suggest that you start now, with baby steps.

Be aware of your hand position at every time, and learn to detect when your fingers are about to leave your keyboard. That’s the trigger!

Whenever this trigger occurs, stop and start asking yourself:

what was I about to do?
is it possible to achieve this without leaving the keyboard?
- search in your application “Keyboard shortcuts” help page
- search on internet
- … or ask ChatGPT! Here is a prompt you can use as a base:
I want you to act like a Unix user, and explain each tool individually.

Q: how would you get the content from a JSON URL (https://dummyjson.com/users) and filter the first five "names" starting with a "S", sorting them alphabetically and outputting them as uppercased text in a file in the /tmp directory.

A: let's think step by step

After a few trial/errors you could end up with this one-liner:
```
curl https://dummyjson.com/users | jq -r '.users[] | select(.lastName | startswith("S")) | .lastName' | sort | tr '[:lower:]' '[:upper:]' > /tmp/names.txt
```
try to do it with a shortcut or a command, and note it down to try to remember it next time. You can also use cheat sheets (I personally started with physically printed cheat sheets on my desk!).

You’ll be surprised to see how many shortcuts exist in the tools you already use, and you will start discovering terminal commands or new programs

This article is already long enough. In a future article I’ll go through some of the shortcuts and commands I use on a daily (hourly?) basis.

Follow this space!

Set up a WSL development environment.

Paul van Dyk — Mon, 03 Apr 2023 12:50:39 +0000

Looking to take your Windows development environment to the next level? Look no further than Windows Subsystem for Linux (WSL)! With this powerful tool, you can quickly and easily set up a Linux-based development environment on your Windows machine. This guide has everything you need to get started, from installing WSL to updating packages and setting up Windows Terminal. Plus, we'll show you how to install Node.js and Git, and give you tips for using Visual Studio Code, Zsh, and Oh My Zsh.

You have two options for installation: you can either follow the full installation guide, or you can refer to the best practices for setup, which includes a step-by-step setup guide and explains important concepts such as File Storage.

Prerequisites

To set up WSL in Windows, virtualization should be enabled, commonly referred to as SVM mode. Ensure that it is enabled in your BIOS, you can follow this guide to locate it (it will differ depending on your motherboard). Once enabled, proceed to Install WSL in Windows.

Install WSL (📑docs)

ℹ️ If you have already followed the full install guide, you can skip this step.

To install Ubuntu, open PowerShell or Windows Command Prompt in administrator mode by right-clicking and selecting "Run as administrator", then enter the wsl --install command.

After running the WSL install command and restarting, Ubuntu will be installed by default. You may change the distribution name by passing in a new name with the -d flag: wsl --install -d <Distribution Name>.

However, I suggest staying with Ubuntu. 🙂

Update and upgrade packages (📑docs)

When starting a new development project, updating your packages is always a good idea. After setting up your Unix account, you can simply run this one-liner to update the package manager:



sudo apt update && sudo apt upgrade

⚠️ Resolving common connection errors

If you receive an error message saying Temporary failure resolving ‘archive.ubuntu.com’, it is usually due to an invalid nameserver on the WSL installation. This can cause the WSL instance to be unable to connect to the internet.
To confirm if this is the case, try to ping www.google.com. If it cannot be pinged, this should confirm that the nameserver configuration is the issue. You can update your configurations to the following:
$ cat /etc/wsl.conf
  [network]
  generateResolvConf = false # disables auto generation of resolv config
  generateHosts = false # disables auto generation of hosts /etc/hosts
$ cat /etc/resolv.conf
  nameserver 1.1.1.1
Finally, as a last step, you can protect the resolv.conf file by forcing the overwrite to be disabled.
sudo chattr -f +i /etc/resolv.conf

Set up Windows Terminal (📑docs)

You can install any terminal, but personally, I prefer using the Preview build because it ships features much faster than the normal version. For example, the GUI feature only arrived around a year later on the standard version, and I have never found it to be really stable.

To install, visit the Microsoft Store Apps for either:

And as mentioned above, GUI is supported! That means you can run Linux GUI apps on WSL 😇

File storage (📑docs)

To open your WSL project in Windows File Explorer, enter: explorer.exe . Be sure to add the period at the end of the command to open the current directory.

💡 TIP

For the fastest performance, store your project files on the same operating system as the tools you plan to use. If you are working with Linux tools in a Linux command line (Ubuntu, OpenSUSE, etc), store your files in the WSL file system. If you're working with Windows tools in a Windows command line (PowerShell, Command Prompt), store your files in the Windows file system. Files can be accessed across operating systems, but doing so may significantly slow down performance.

Install Node.js on WSL (📑docs)

We will be using Node Version Manager (nvm). Follow these steps to install it on Ubuntu (or a similar distribution):

Open your command line.
Install cURL using the following command: sudo apt-get install curl. cURL is a tool used for downloading content from the internet in the command-line.
Go to the nvm repository and find the latest release.
Install nvm using the following command: ```bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

---

## **Setting up your shell ([Zsh](https://www.zsh.org/) + [Oh My Zsh](https://ohmyz.sh/))**

This step is optional, but you may want to use Zsh and Oh My Zsh if you are looking for a more customizable and powerful shell experience.

### Installing zsh

To install zsh, open the Ubuntu app installed from the App Store and run the following command in the terminal:

```bash


sudo apt-get install zsh

Once it's installed, type zsh in the terminal. It will prompt you to choose some configuration options. We will do this later on while installing oh-my-zsh, so choose option 0 to create the config file and prevent this message from showing again.

Installing oh-my-zsh

Before anything else, you need to have git installed on your system. You can install it by running the following command in a terminal:



sudo apt-get install git

After installing git, you can then use curl to install oh-my-zsh.



sh -c "$(curl -fsSL <https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh>)"

This command will clone the repository and replace the existing ~/.zshrc file with a template from oh-my-zsh.

Installing OhMyZsh Plugins

We can supercharge our command line by adding some oh-my-zsh plugins. First, open the zsh config by running vim ~/.zshrc. Next, find the line plugins= and add the desired plugins.



plugins=(git nvm history zsh-autosuggestions jsontools command-not-found zsh-syntax-highlighting)

I have listed my favorite plugins here, but feel free to use your own set based on your needs. You can find a list of plugins
here. Additionally, I use 3rd party plugins that must be pulled separately:

Enable NVM autoload in zsh

Enabling the nvm autoload plugin allows you to use the appropriate node version based on the specifications in a .nvmrc file in any of your projects. This feature is especially helpful when working on multiple projects with different node versions, as it eliminates the need to switch between incompatible versions. With nvm autoload, you can easily switch between projects while ensuring you are using the correct node version.



zstyle ':omz:plugins:nvm' autoload yes

Useful gists for aliases

To create an .aliases file in your home directory, run the command touch ~/.aliases. Then, ensure that it is sourced in your .zshrc file by adding source ~/.aliases to it.

Next, you can add the aliases and configurations used in the terminal by following the instructions in this link.

You will notice that there is an alias for npm. This is to detect which package manager to use by searching for the nearest lock file. An alternative to this is ni, which is highly recommended.

Git Credential Manager setup (📑docs)

The credential manager can assist with any HTTPS authentication, utilizing the Windows Credential Manager.

To download the latest version, visit the repository at
https://github.com/GitCredentialManager/git-credential-manager/releases.

After installation and configuration, you should also add it to your Linux shell.



git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager-core.exe"

VSCode (📑docs)

To get started, download and install VSCode. Then, add the remote development extension.

That's it you should be ready to start developing in WSL.

💡 Tip

If your WSL container resolves the code path to an Ubuntu installation of VSCode, it can cause issues when you try to open a folder using a command like code ./my-folder. If Git extensions crash at startup, create an alias for the code command to point to your Windows installation of VSCode. Run which code
to detect which VSCode installation is being used.

Solution:
Add an alias for the code command that points to your Windows installation by including it in your .aliases file.
alias code="/mnt/c/Users/%userprofile%/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"

Microsoft PowerToys: Utilities to customize Windows (📑docs)

As you're setting up your Windows development environment, you might be interested in exploring some of the additional tools available to you. One of my personal favorites are the Microsoft PowerToys, a set of utilities designed to help streamline and customize your Windows experience for greater productivity. Install Microsoft PowerToys to keep tweaking Windows!

Here are a few PowerToys features that I find particularly useful:

FancyZones

If you want to easily manage the position of each application window on your Windows desktop, check out FancyZones. This tool allows you to customize the size and positioning of your snapping grid with efficient layouts that suit your needs.

Keyboard Manager

With the PowerToys Keyboard Manager, you can redefine keys and shortcut combinations on your keyboard. For instance, you can swap the A key for the B key. You can also swap Ctrl + C for ⊞ Win + C. This will copy text when ⊞ Win + C is pressed. If no specific application is targeted in the PowerToys Keyboard Manager, the changes will apply globally across Windows.

File Explorer Preview Pane

The Preview Pane is an existing feature in Windows File Explorer that lets you see a preview of a file's contents in the view's reading pane. PowerToys enhances this feature by adding support for multiple file extensions, including Markdown, SVG, PDF, and G-code. It also adds support for source code files with more than 150 file extensions.

ColorPicker

This Windows color picker is a must-have tool for designers and themers. It allows you to easily select colors from any application and customize them to your liking. The interface is user-friendly and you can copy colors to your clipboard in different formats, including hexadecimal, RGB, and HSL. This tool simplifies color palette management and is lightweight. Download it today to improve your design work!

Text Extractor utility

Text Extractor allows you to copy text from anywhere on your screen, including
inside images or videos.

To activate the capture feature, use the shortcut (default: ⊞ Win + Shift +T). This will display an overlay on your screen. Click and hold your primary mouse button, then drag to capture the text. The captured text will be saved to your clipboard.

Run Utility

PowerToys Run is a quick launcher for power users that includes additional features without sacrificing performance. It is open source and modular, allowing for additional plugins to be added.

To use PowerToys Run, simply press Alt + Space and start typing!

Enable ‘God Mode’

God Mode will give you access to all of Windows’ control panels from one folder. To enable it right-click on the desktop and select New > Folder. Re-name the new folder with this bit of code:



GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}

Sharing SSH keys between Windows and WSL 2 (📑docs)

If you have setup ssh in windows you can copy it to your linux



   cp -r /mnt/c/Users/<username>/.ssh ~/.ssh

Fix the permissions



   chmod 600 ~/.ssh/id_rsa

Add keychain to linux



   sudo apt install keychain

Run the keychain every time you start a shell instance, you can append this to the top of your .zshrc file.



   eval ``keychain  --quiet --eval --agents ssh id_ed25519
   command clear # this is why we add it to the top so that we can still se other outputs, I have not yet found a better way of silencing the keychain export messages
   ```

---

## Conclusion

You have just learned how to set up WSL on your Windows machine and create a powerful and efficient development environment. By following this guide, you have installed WSL and updated packages, set up Windows Terminal and installed Node.js and Git. These tools will help you code faster, easier, and more securely.

🥳 Congratulations on completing this guide! We hope you enjoyed it and found it useful. If you want to learn more about other topics related to development, stay tuned as our blog will be growing!

Some challenges of being the editor of a software intended to be integrated

Damien Pobel — Fri, 24 Mar 2023 08:00:00 +0000

Essentially, Front-Commerce is a software meant to be integrated by developers so that a merchant can sell products to its customers in its own online store and even without having to completely change an existing e-commerce stack. While this is probably the simplest definition of Front-Commerce (more or less the one I use to describe my job to my family and friends 😉), it hides some challenges we face every day.

Three targets: developers, merchants and customers

The first challenge is not really technical. As stated in the introduction, we try to address three main personas:

the developers integrating our solution to create an online store for…
a merchant willing to sell something to…
a customer seeking a product.

Anybody having at least a small experience as a software editor knows that properly addressing one persona can already be challenging, so you can guess what it is like with three, even if they don’t necessarily want opposing features, more targets mean more constraints.

Let’s take a deliberately extreme example 😃 They all want a performant store.

The customer:

I want a performant and great shopping experience even in the middle of nowhere with a low to average 3G connection.

The merchant:

Can I have a great shopping experience for my customers? And also, I want to put very high quality photos and videos online. In addition, I want my pages to be always highly up to date with customer specific and very dynamic content. And next Friday is Black Friday! The website needs to scale, it’s the biggest selling event of the year.

The developers:

The merchant wants a performant and scalable website. Is your software doing that out of the box or can it be done by turning on a setting?

I guess you get the idea, each target adds a set of constraints. It’s no surprise that pleasing everyone is difficult but it’s also a stimulating challenge.

Extensibility

As a software meant to be integrated by developers, Front-Commerce needs to be extensible so that it can serve different use cases. The most obvious reason is that each merchant wants its own customized store implementing a dedicated shopping experience.

In addition, each project needs a specific set of features and while we try to support as many as possible out of the box, having an extensible architecture allows the developers to fill the gaps. As far as I’m concerned, it’s always a pleasure to see very unexpected or specific features nicely implemented even if I would never have imagined it could exist.

It’s also worth mentioning that in the world of composable architectures and headless commerce, extensibility is a key feature.

Backwards compatibility and upgradability

Being able to implement a project is nice but that’s only the very beginning of the story. At some point, new features and fixes for bugs will be needed. The challenge here is to be able to deliver those without breaking anything.

On a practical level, that means we try to follow semantic
versioning by regularly providing patch releases containing only bug fixes and every six weeks, we release a minor version with new features. Those minor versions always have a migration guide to make the upgrade process as frictionless as possible. And what about a major version? In the last couple of years, we have not released any, but I’ve heard that something is cooking 😇

In the code, this has a quite deep impact. When changing code, we have to keep in mind both existing projects using our software and new ones. We also have to think about how APIs are being used before we can make any changes to them. This forces us to carefully encapsulate our API’s to reduce their surface as much as possible. This has a tendency to limit the extensibility and the versatility so as usual when it comes to code, the key is to find the right trade-off.

Anything else?

Oh yeah, I could have approached the support, the documentation, the developer experience or the dependency management to name a few. This will probably be the subject of another post…

In any case, all this is a part of the context in which we build Front-Commerce and where we try find the best solutions or trade-off. As usual when it comes to our product, we are always seeking feedback, so don’t hesitate to contact us if you have any remarks or comments. This can only make the product better.

Front-Commerce is getting a Remix

Pierre Martin 💿 — Tue, 21 Mar 2023 10:24:00 +0000

We are thrilled to announce that we’re Remixing Front-Commerce!

As you may already know, our goal for 2023 is to significantly enhance the developer experience and web performance of Front-Commerce projects. We aim to improve the Core Web Vitals of every storefront built with Front-Commerce and achieve the best performance in the market. This will benefit both merchants and their customers.

To achieve this, we have decided to adopt new foundations for our product. These foundations will be based on Remix.

We are excited about the possibilities this new version brings, and we hope you will love using it!

What is Remix?

Let’s start with the Remix homepage description:

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

Remix is an open source framework created by Ryan Florence and Michael Jackson, well known in the React ecosystem for maintaining React Router, the most widely used routing library for React.

The company supporting the Remix core team’s activities was acquired in October 2022 by Shopify, and Remix is now used as foundations for Shopify’s Hydrogen framework. This acquisition and actions taken since the merger makes us confident in Remix’s open source future. We’re glad to be part of this community and contribute to the project too!

As we write this announcement, Remix is only compatible with React. Based on React Router primitives, Remix adds support for everything involving a network request between a client and a server: SSR, client side navigation, forms, sessions, cookies…

It also provides a compiler and a development server aiming to provide a top-notch Developer Experience, fast builds and optimized production bundles.

Why Remix?

We have been closely following the space of JS full-stack frameworks since our first version in 2016, and Front-Commerce's primitives were inspired by several of them. While Next.js has become the most widely used framework, we found that Remix is a simple yet efficient framework that aligns perfectly with our vision for web applications. Let me explain its most important features.

Web standards and progressive enhancement

Remix is focused on web standards. It doesn’t reinvent them.

This is a Progressive Web Application’s essence: to deliver a web application that works and leverage Web APIs to improve the user experience by making it reliable and more capable.
Remix adheres to these principles and progressively enhances applications with JavaScript, while ensuring that idiomatic Remix applications can also work without any JavaScript executed in the browser!
Front-Commerce will remain a SPA for now, but a side effect of using Remix is the ability to allow MPA use cases (without client-side Javascript) in the future.

Our vision with Front-Commerce is to ensure your frontend will last. Web APIs don’t change. Being based on standard Web APIs means that we’re writing code that could last for decades. Even if Remix disappears, having APIs designed around standards ensures greater portability.

We also believe that it improves the developer experience. The industry (cloud providers, frameworks, libraries) is moving towards shared primitives based on these standards. We are confident that, in the next few years, more and more people will be accustomed to the use of these standard APIs.
Developers will thus more easily understand how to use Front-Commerce and could leverage a wider ecosystem of libraries in their applications.

Ultimately, another benefit of this approach is that it leads to less code being shipped in the browser which greatly improves performance!

Simplicity

One can learn Remix within a few hours. Its API is small, and already influenced several frameworks in our industry. We believe that most frontend developers will be familiar with the concept of routes, loaders and actions in the future. With a better knowledge of web standards too, developers will feel at home when using Front-Commerce.

We really hope that Remixing Front-Commerce will make it a more natural and pleasant tool to use on a daily basis to build eCommerce projects. We’re also taking this as an opportunity to rework some of our own APIs to embrace the Remix philosophy, and have simpler primitives where possible.

Using Remix means that we can remove a lot of code from our codebase! With less code to maintain, and less stuff to document, we will have more time to focus on our core value proposition: enabling developers to build fully customized, composable storefronts leveraging every feature from best-of-breed technologies.

Edge-first

Another advantage of Remix is that it is edge-first, yet server-agnostic.

Front-Commerce has always been a node/express application, and Front-Commerce Remixed will remain focused on this environment in its first version.

The web platform evolves, and so does the hosting ecosystem. Edge computing is gaining popularity for good reasons, and you can be sure that we’ll keep an eye (and more) on this. We’re excited to be able to investigate new deployment targets such as Deno Deploy, Architect, Cloudflare, Fastly, Netlify, Vercel, Fly.io among others.

Using Remix as our new foundation will allow us to explore this area without breaking changes!

A (far) future without React?

Remixing Front-Commerce allows us to remove many external dependencies from the client-side bundle. We were able to replace Formsy with Remix’s Form, Apollo Client with Remix’s loaders/actions and many more.

React is now the main external JS dependency of our bundle (in terms of size), and in our mission to provide the best web performance on the market we know that it could be our next bottleneck.

Choosing Remix and betting on web standards allows us to reduce our dependency on React. While we still think that JSX is a good abstraction and are happy with the React library, we're also excited about innovations in frontend frameworks over the past few years.

In a near future, Remix will very likely be compatible with Preact (a smaller and faster React alternative) and you can be sure that we’ll be one of the first to play with this.

We aim for Front-Commerce projects to outlast frontend libraries. While it's impossible to predict which library will become "the next React", we see many promising technologies emerging, such as Qwik, Solid, Million, Lit, and WebC (among others). These technologies are challenging the current status quo.

By choosing Remix as our new foundation, we can reduce our dependency on React (while Next.js is becoming even more tied to this library). This is a first step towards a possible future without React that is accessible to all Front-Commerce projects, without the need to throw years of work away!

A growing community

Remix is an open source framework with a community of developers who are dedicated to web standards and simplicity.

This community is friendly and supportive, and we want to contribute as much as we can to it. We’ll be happy to participate in conferences, make code contributions, engage with the community on Discord, and more. If you are part of this community, don’t hesitate to get in touch with us!

The popularity of Remix is growing, with more and more developers using it to build their projects. We’re doing our best to ensure that Front-Commerce is an idiomatic Remix app that will make developers feel at home, and could also help to learn how to structure bigger apps with Remix.

We also had discussions with our partners and teams interested in Front-Commerce over the past few months, and we have found that most (if not all) of them are excited about Remix and our choice.

What else does this new version bring?

We will not go into too much detail in this article and will be publishing dedicated articles in the next few weeks about these topics.

The key information to keep in mind is:

Front-Commerce specific concepts (and code) remain unchanged.
This version is focused only on technical aspects (such as "plumbing", Remix, better primitives...), and has feature parity (it won't add new features or remove any).
We’ve taken this opportunity to remove code that has been deprecated since our latest major version (4 years ago!).

GraphQL on the server

Remix will replace Front-Commerce's "middle stack," including routing, server-side rendering (SSR), and HTTP interactions. This means that GraphQL queries and mutations will now take place only on the server, respectively in Remix's loaders and actions.

This is great for web performance because it allows the removal of a major frontend dependency from the bundle: Apollo Client. By default, Front-Commerce will not use any client-side GraphQL queries and will instead use Remix loaders, actions, and fetchers.

However, this does not mean we are giving up on GraphQL. In fact, GraphQL is great for composable commerce because it allows a unified view of all your data, independent of the platform or service used. This enables progressive migration use cases and ensures that a Front-Commerce project can outlive many replatformings.

Front-Commerce still allows you to expose your GraphQL API to the web if desired. Although it is not the default, it could be useful if you have other applications using it or want to migrate some parts of your application progressively at your own pace.

Full-stack typing with TypeScript

Over the past few years, the JavaScript ecosystem has adopted TypeScript, and many tools have added first-class TypeScript support. This has led to massive improvements in developer experience (DX).

In the Front-Commerce core, we have gradually introduced typing over the years (with JSDoc for backwards compatibility). With this new version, we are taking this to a whole new level.

Front-Commerce combines Remix, GraphQL Code Generator, and your custom GraphQL schema to provide a perfect setup that improves both the DX and safety of your applications.

TypeScript has become a core component of a Front-Commerce project, but we want to ensure that it can be incrementally adopted. You can keep using *.js (or *.jsx) files or rename/create *.ts (or *.tsx) files to leverage this new feature.

Composability with a New Extension API

Front-Commerce projects are modular by nature. Integrators can create applications by combining different features and integrations provided by Front-Commerce, allowing them to quickly get up to speed.

Since 2016, we have consistently increased our feature coverage and supported services. We have added many extension points based on real use cases from our customers.

Front-Commerce enhances Remix by providing a consolidated API that can be used to register extensions, which can improve your eCommerce project in many different ways:

GraphQL modules that extend or customize the GraphQL schema
New routes, themes, and overrides
Payment methods and components
Analytics plugins
...and many more

We are also turning our core repository into a Monorepo and using this Extension API ourselves to distribute every @front-commerce/* package as a Front-Commerce extension that can be added to a standard Remix app!

What About Existing Front-Commerce Projects?

When we say that a Front-Commerce project will last, we are serious about it. The first Front-Commerce projects went live in 2018 and are regularly updated to our latest version. We want to keep it that way.

We are not throwing away all of our codebase (or yours). We are only changing the foundations that we have maintained for you over the years.

For this reason, the new version includes specific features that target existing Front-Commerce projects to ensure a smooth migration path:

Codemods that will automatically convert your code to remove most of the tedious work (new import paths, etc.)
A @front-commerce/compat extension that you can use if you have highly customized React components or pages that you do not want to rework immediately
Dedicated documentation with a migration guide that will contain all the details

Remixing your Front-Commerce application should take days, not weeks. We are accepting the challenge!

Is it ready?

We have been diligently iterating on this remix over the past few months. We are now excited to share it with you as early as possible so that we can improve this new version based on feedback from the field.

The first alpha versions will be released very soon, and the first Front-Commerce Remixed projects will go into production in a few months.

Your next Front-Commerce project can start with this new version, and you will be able to migrate your existing projects in production later this year.

We are thrilled to embark on this new journey with Remix! We invite all Front-Commerce developers to embrace this change with us and welcome new teams aboard.

As always, we are available to discuss this further and will share more details with you over the next few months. Happy remixing!