Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering Adobe Commerce Frontend

You're reading from   Mastering Adobe Commerce Frontend Build optimized, user-centric e-commerce sites with tailored theme design and enhanced interactivity

Arrow left icon
Product type Paperback
Published in Mar 2024
Publisher Packt
ISBN-13 9781837637072
Length 402 pages
Edition 1st Edition
Languages
Concepts
Arrow right icon
Author (1):
Arrow left icon
Jakub Winkler Jakub Winkler
Author Profile Icon Jakub Winkler
Jakub Winkler
Arrow right icon
View More author details
Toc

Table of Contents (18) Chapters Close

Preface 1. Chapter 1: Setting Up the Local Environment FREE CHAPTER 2. Chapter 2: Installing the Magento/Adobe Commerce Application 3. Chapter 3: Introduction to Adobe Commerce Theming 4. Chapter 4: The Layout System 5. Chapter 5: Working with Templates 6. Chapter 6: Styling an Adobe Commerce Theme 7. Chapter 7: Customizing Emails 8. Chapter 8: Introduction to JavaScript Libraries and Frameworks 9. Chapter 9: RequireJS and jQuery 10. Chapter 10: Knockout.js and UI Components 11. Chapter 11: Commonly Used Libraries Bundled with Adobe Commerce 12. Chapter 12: Storefront-Related Configuration in the Admin Panel 13. Chapter 13: Working with Magento CMS 14. Chapter 14: Frontend Optimization Techniques 15. Chapter 15: Common Tools that Help with Local Development 16. Index 17. Other Books You May Enjoy

Preparing the technology stack for AC

Now that we know what services we will need locally (or on a remote server) to run AC, let’s proceed with installing each of them manually, step by step. Just kidding! If you are a backend developer, I encourage you to do that by yourself, but frontend developers should not waste time on this. I mean, we are building a restaurant, or a workshop – a frontend development forge that produces pure gold. An alchemist’s laboratory!

You can skip the next few sections of this chapter in the following cases:

  • You have enabled virtualization on your Windows 11 (Windows 10) PC and installed Windows Subsystem for Linux 2.0 (WSL 2) on your Windows machine
  • You have Docker Engine installed and working on other projects
  • You’ve worked with Docker-based environments before

If not, please follow along.

Developing AC on Windows

In my opinion, I believe that Linux and macOS systems are much better for any development. Well, maybe except for ASP/C#, but Magento/AC is based on PHP, so it is much better to run or use a UNIX-based operating system.

Lately, by working with large enterprise class projects, I’ve seen a lot of developers, who work on Windows systems, switch from WSL/WSL 2 to a VirtualBox-based environment with Linux (Ubuntu, as it’s the easiest to run) installed as its virtualized and main system.

You can use the same approach (VirtualBox-based) on macOS as well. The purpose of this is to avoid time-consuming file sync between your local drive and a virtual machine drive, which runs very, very slow and AC has a lot of files… like, A LOT!

However, for this book, we will cover the Windows WSL 2-based environment setup step by step.

Installing WSL 2 on Windows

Before we proceed with WSL, we need to enable (or check if it’s already enabled) virtualization in our Windows operating system. To do this, follow these steps:

  1. Click on the Windows icon.
  2. Search for Turn Windows features on or off.
  3. Enable Hyper-V:
Figure 1.1 – Enabling Windows Hyper-V

Figure 1.1 – Enabling Windows Hyper-V

Once you’ve done this, restart your PC.

Installing WSL 2 has been simplified and only requires you to do two things:

  1. Open Command Prompt as an administrator.
  2. Type the following command in Command Prompt:
    wsl --install
  3. Restart your computer.

If you have an older version of the Windows operating system, or you have not installed the required packages, you can proceed with this simple guide:

  1. Click on the Windows icon.
  2. Search for Turn Windows features on or off:
Figure 1.2 – Searching for Turn Windows features on or off

Figure 1.2 – Searching for Turn Windows features on or off

  1. Click/enable Windows Subsystem For Linux:
Figure 1.3 – Installing Windows Subsystem for Linux

Figure 1.3 – Installing Windows Subsystem for Linux

  1. Click OK and wait for Windows to install WSL.
  2. Restart your computer.

This section covered all the steps you need to complete on Windows before you can proceed. Once you’ve done this, you can start with the Linux installation. Yes, we will be running Linux on Windows! As crazy as it seems, we are getting close to our goal: a great local environment for AC projects.

Installing Linux

Now that Windows has been configured and WSL 2 has been installed, let’s install one of the Linux distributions; I’m using Ubuntu and I recommend that you use it as well. Proceed with the following steps:

  1. Open the Microsoft Store app.
  2. Search for Ubuntu.
  3. Select Ubuntu 22.04.
Figure 1.4 – Ubuntu 22.04

Figure 1.4 – Ubuntu 22.04

  1. Click GET to proceed with the installation. It might take a few minutes.

We are not done yet. Now that Linux has been downloaded, we need to run it and configure it.

Configuring Linux

We need to launch it for the first time and create a user account.

Make sure you remember the password you configure in the next few steps. We are almost done with the system setup, so this is a final to-do list for you:

  1. Click the Windows button and type Ubuntu to find your installed Linux operating system.
  2. This will launch the initial configuration for Ubuntu 22.04; it might take a moment to install:
Figure 1.5 – Starting the installation

Figure 1.5 – Starting the installation

  1. Create your user account:
Figure 1.6 – Finishing up the Ubuntu installation

Figure 1.6 – Finishing up the Ubuntu installation

  1. Set your password. Note that you won’t see the characters you type:
Figure 1.7 – Setting up a user password

Figure 1.7 – Setting up a user password

  1. If all goes well, you will see the green Linux shell active:
Figure 1.8 – Linux is ready

Figure 1.8 – Linux is ready

So far, you’ve made the required configuration changes on your Windows machine, after which you downloaded, installed, and configured Linux. With that, your Windows operating system is fully ready, which means you can proceed with the next steps and set up your local development environment.

If you are curious, check out the next few pages to learn how to work with VirtualBox. I don’t follow this approach, but I know developers who work this way, hence why I’ve described it.

If not, please jump to the Time for virtualization – Docker section of this chapter.

Installing Ubuntu on VirtualBox

As I mentioned earlier, this solution has become much more popular across multiple developers and is becoming widely used by people who like to use Windows (or macOS in some cases) as their main system. This is a very simple guide, so just follow the next few steps:

  1. Download and install the latest version of Oracle VirtualBox.
  2. Download the latest Ubuntu 22.04 image from the official Ubuntu site: https://ubuntu.com/download/desktop.
  3. Open VirtualBox.
  4. Create a new machine in VirtualBox.
  5. Select the downloaded Ubuntu file under ISO Image:
Figure 1.9 – Creating a virtual machine

Figure 1.9 – Creating a virtual machine

  1. Assign RAM/CPUs for Ubuntu – the more the better. However, to safely run Adobe eCommerce without any issues, I recommend the following:
    • 8 GB of RAM (you can use 4 GB of RAM, but at least 8 is recommended). You need to make sure you won’t use your entire available memory.
    • At least four CPU cores:
Figure 1.10 – Assigning hardware

Figure 1.10 – Assigning hardware

  1. Select your disk size. This depends on the project you will be working on.
  2. Run your virtual machine by clicking the Start button.

To install Ubuntu on your virtual machine. follow these steps:

  1. Once you’ve restarted the virtual machine, you need to install Guest Additions for VirtualBox.

    Guest Additions for VirtualBox is a set of drivers and utilities that can be installed on a virtual machine running on VirtualBox. It includes improved video support, better mouse and keyboard integration, seamless window integration, and many other useful features. For us, it simply means that Linux will run faster and we will be able to integrate with our Windows operating system with our shared folder.

    To install this, turn on your virtual machine and start a terminal (we will be using it a lot from now on).

  2. Mount the Guest Additions ISO image:
Figure 1.11 – Mounting the Guest Additions ISO image

Figure 1.11 – Mounting the Guest Additions ISO image

  1. Open a CD drive folder on your virtual machine, find a file named XXX, right-click it, and select Run as Program. This will install Guest Additions.
  2. Reboot Ubuntu Virtual Machine.

If you decide to go with the VirtualBox solution for your local development environment, that is perfectly fine. It is not the best solution but it works and is an acceptable way of doing development.

From now on, all the operations we will be doing will require a Linux subsystem, Virtualized Linux (via VirtualBox), or macOS system, or Linux as your system of choice.

You have been reading a chapter from
Mastering Adobe Commerce Frontend
Published in: Mar 2024
Publisher: Packt
ISBN-13: 9781837637072
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image