Forem: Rose Chege

The Best Strategies to Slim Docker Images: How to Reduce Docker Image Size

Rose Chege — Tue, 02 May 2023 12:49:15 +0000

Do YOU WANT to SLIM your Docker images? I wrote the following article, The Best Strategies to Slim Docker Images, using a Node.js application approach. *Give it a view and support my journey to becoming a technical article writer. *

Learn tips and How to Reduce Docker Image Size by roughly 90.37% of its initial size.

Let me know your comment about it. I will appreciate it.

Top 5 Cloud-Native Message Queues (MQs) with Node.js Support

Rose Chege — Tue, 13 Sep 2022 12:53:12 +0000

Message queues (MQs) allow you to run distributed services. This article will go over MQs in further detail. Then Discuss the benefits cloud-native has to provide for your application and why we need it for MQs. Finally, highlight the top five cloud native MQs that can be easily run with Node.js.

The Beginning: Synchronous

The application's scalability model is a tremendous consideration when rolling out your application. Take an example of a simple application using a request-response model. You have three major components to facilitate your services: a client, a server, and the database to process your system data.

Image Source

Using this approach, once the client sends the request to the server, it has to wait for the processing to finish before getting back a response. However, this itself being a problem, it doesn't pose any technical processing problems to a simple application with just a few random users. Here you are running a synchronous model that your database can comfortably handle.

What if your system starts to get popular? Your server will start handling time-consuming tasks to fit the demand of the growing user base. Imagine your synchronous model handling these requests each at a time. Your client, in this case, cannot proceed with any other operations. Once you open the http connection, you cannot close the connection until you get a response from the server.

The client will have to wait longer for a response as the server receives more and more requests. You will end up with a backlog of requests. Even when the client expects a simple success message as the response, it has to wait for the first request to get processed, as requests get expected in the order they are received. By the fact that 53% of mobile users abandon sites take over 3 seconds to respond, your system paradigm ends up creating a huge gap between user expectations and the application capabilities.

Introducing Asynchronous

One of the best ways to solve this problem is to create an asynchronous communication model. An asynchronous model will execute that first request and the rest of any received requests simultaneously.

Image Source

The beauty of this approach is that when the client sends a request to the server, it doesn't have to wait for the server to get any response. It can actually go ahead and do some other operations. Here your application is running to its full potential with no limitations on what it can do at any given time.

Getting a Message Queue: Asynchronous Approach

One of the best ways to achieve asynchronous communication is to use a message queue (MQ). A message queue enables the client to reduce the wait time for a task to finish and, as a result, execute other tasks during that time. Additionally, it allows a server to carry out tasks in the order it chooses.

Message queues are a service to service asynchronous communication used to build highly decoupled and reliable microservice applications. It allows one service to communicate with another service by sending messages to each other.

Message queuing uses a broker for centralized data management to ensure that the communication is delivered in a reliable fashion between the services.

This architecture uses messages as the data. The server, also known as the producer, creates the messages (the data) and sends them to the centralized message queuing manager (the broker). The client, also known as the consumer, retrieves the message from the queue and processes the data.

Image Source

This way, the producers can send any amount of data without worrying about consumer availability. The application can now manage multiple heavy scaling tasks using this microservice-based architecture. When the client requires data, it simply requests messages from the queue anytime.

Node.js for Message Queuing

You have decided to run your system asynchronously. Thanks to the message queuing architecture. But then again, you need to implement this architecture to leverage your system's capabilities. One of the best ways to implement messages queues is using Node.js (Typescript/NestJS).

Node.js is a popular technology that offers a wide range of features for your application. This include:

Asynchronous/Non-blocking thread execution. Node.js allows you to create Non-blocking servers/API. Every Node.js API is non-blocking. The subsequent tasks in the stack are continuously run while waiting for a response for something outside of the execution chain. Its single-threaded asynchronous capabilities make it well-suited to real-time communication processes. This is the exact architecture that you would desire to build your servers with. The fact that message queues are Asynchronous, your application performs at full potential.
Event-driven. A node.js server is Event-driven. It uses Event Loop to handle multiple clients simultaneously. It uses its multiple threads pool for concurrent executions. This way, each time a request is sent, a dedicated thread is created to handle that specific request. This, again, makes it easier for non-blocking executions.

Image Source
The above are a few advantages that Node.js offers. They make it easier and more scalable to build microservices applications. Adding the benefits of message queues, the combination allows you to create complex and high performant apps.

There are many message queues that you can use to run with Node.js. However, setting up one requires layers of infrastructure such as databases, networks, servers, OS, security, etc. Setting up all these elements to run your infrastructure can be challenging to maintain and monitor. Yet, it reduces your infrastructure portability. Downtime of one layer can hugely affect the whole application as the entire infrastructure is closely coupled to run all these layers together.

To overcome such challenges, we need modern solutions that exploit a modern infrastructure's flexibility, scalability, and resilience. A huge thanks to cloud native computing that allows you to run and host applications in the cloud to take advantage of the inherent characteristics of a cloud computing software delivery paradigm.

Going Serverless: Running Message Queues as a Service (Cloud Native)

As of right now, almost every IT tool or product is accessible as a service. A delivery model that allows you to run serverless architecture. And Message Queues haven't been left on the cloud bandwagon. Cloud-native is built to offer a serverless development strategy created specifically to properly exploit the cloud computing architecture.

Serverless architecture, a cloud-native development methodology, allows developers to create applications without provisioning servers or to handle scaling management. Instead, such tasks are abstracted and handled by the cloud provider. This allows developers to create vendor agnostic, auto-provisioning, and highly scalable applications with the faster release of production-ready and fault-tolerant models.

This is facilitated by the fact that:

Cloud natives are microservices centric - this way, your messages queues still run loosely coupled. Specific features can be updated without causing any downtime to your apps.
They are created with Continuous Integration/Continuous Delivery (CI/CD) pipelines in mind. This brings the concept of Accelerated Software Development Lifecycle (SDLC) to your team and members to collaborate at different levels, such as designing, development, and testing.
CI/CD is packed with automation. This allows you to make high-impact changes with minimal effort.
Cloud Native Architecture is container orchestrated. You don't have to be concerned about the platform, operating system, or runtime environments.

To sum up, cloud native apps principles are:

Image Source

Now imagine running your whole Message Queue architecture as a service. This is a huge step forward with a tone of benefits:

Automation opportunities allow you to focus on other pressing challenges.
Portability - message queues become vendor agnostic. Containers allow you to connect to different microservices components through port mapping. This way, you avoid vendor lock-in.
Increased Reliability. You have reduced downtime, and the failure of one component doesn't affect adjacent services.
Easy to manage and scale your architecture.
Language - cloud native message queues are built to work with modern languages and frameworks such as Node.js, Typescript, Go, Python, Rust, etc.

Since cloud native can be easily implemented with a wide range of frameworks and languages, choosing what you want to work with is easy. Node.js is an excellent candidate for message queueing. We have seen that Node.js compliments the message queuing architecture.

Top 5 Cloud-Native MQs with Node.js Support

Let's dive and learn about Node.js top cloud native message queues (MQs) that Node.js supports.

1. Memphis

Memphis is an open-source, real-time data processing platform with an embedded distributed messaging queue. It is made to eliminate the heavy-lifting tasks for in-app streaming use cases.

Memphis is cloud native. It thrives by offering a Real-Time Data Processing Platform for the producer-consumer paradigm.

What makes Memphis special

Memphis is a distributed message broker built for async communication
It supports numerous Cloud Deployment platforms.
Unlike other message brokers and queues that use topics and queues, Memphis uses stations.

A station provides easy-to-use messaging queues. It abstracts you from creating a never-ending stream of producers, consumers, orchestrations, manual scaling, and decentralized monitoring. A station handles all this for you. And that's what makes Memphis a unique platform. Check out how to create a station in just a few clicks.

Here is a basic example of Memphis station at work:

Memphis is great for cloud-native app development. It uses modern tools to create a development stack. These include:

Docker - Allows your application to leverage the virtualized containers and isolated resources and run microservices at scale.
Kubernetes - It offers orchestration services that let you decide how and where to run your containers.
Terraform - an IaC (Infrastructure as Code) tool that defines resources as code.
Node.js support. Node.js is a popular JavaScript runtime. It is great for creating real-time applications and microservices of any kind. Node.js allows you to create virtual servers and routes for connecting microservices.

Memphis has great support for Node.js and Typescript. Check out Memphis SDKs for Node.js and Typescript and start creating Producers/Consumers. Memphis also has support for other server-side languages such as Go and Python,

Have you deployed your Memphis message queue? Choose your preferred environment and run a Broker like never before. You can run Memphis on:

2. Rabbitmq

RabbitMQ is an open-source distributed message broker. Due to the rise of the microservice architecture, where every concern has its own run time that scales independently, RabbitMQ is a tool that allows these microservices to communicate asynchronously with a variety of different protocols to run large-scale applications.

RabbitMQ uses Advanced Message Queueing Protocol (AMQP). This allows middleware brokers such as RabbitMQ to conform with client applications and communicate effectively.

RabbitMQ uses Exchanges to manage messages. When a producer sends a message, it is not registered immediately to the queue. The message is quickly registered to RabbitMQ Exchange, which uses bindings and routing keys to determine which queue a message belongs to. Here is a basic example of RabbitMQ infrastructure:

Image Source

Check this guide and learn what RabbitMQ is, and the important concept around it.

RabbitMQ uses distributed deployment mechanism. You can set up instances in a highly available manner. Just like Memphis, RabbitMQ is cloud available. This allows you to run a highly available cluster on top of infrastructure such as kubernetes in the cloud.

Leveraging such features creates huge cross-language support for favourite programming languages suitable for developing scalable apps. You can run your cloud support RabbitMQ architecture with popular Node.js and take advantage of its features.

Here are RabbitMQ features that you can comfortably run with Node.js

Image Source

3. Kafka

Kafka is a distributed platform for pushing events for high-performance data pipelines. Over 80% of all Fortune 100 organizations use Kafka to run their infrastructure events.

These events are generated from different services. Kafka then streams and persists these events to other targets. Kafka is made to connect hundreds of event sources.

Image Source

Kafka is well known for her performance. As a distributed platform, building a message queuing system on top of Kafka becomes very easy. Check this A-Z Guide and learn about Apache Kafka Architecture and Its Components.

Image source

To build scale and speed streaming events, Kafka has five core functions. These are:

Publisher - This forms the data source that publishes streams of events to Kafka topics.
Consumer - forms a subscribed application that takes data from any subscribed Kafka topics.
Process - Kafka uses streams API as a processor. This allows Kafka to consume incoming events from different sources and produce the outgoing data stream to one or more topics.
Connect - Kafka Connect allows you to scale streaming data between Apache Kafka and other systems. This links Kafka topics to existing applications and brings data to the Kafka cluster and from other external sources.
Store - Kafka provides a major data storage tool for your events.

Image Source

So what makes Kafka popular?

Some advantages that make Kafka popular include:

Scalability
High Throughput
Low Latency
Fault Tolerance
Reliability
Durability

Despite its popularity and advantages, Kafka is a challenging infrastructure to set up, deploy, scale and manage for on-premises production.

To avoid such challenges, Kafka is now built and can be managed as a service in the cloud. This allows the cloud to perform hard tasks, such as complex cluster sizing and provisioning, building, and maintaining the Kafka infrastructure. Instead, you focus on building your application logic as the cloud handles the heavy lifting. This makes it easy to deploy Kafka without requiring specific Kafka infrastructure management expertise.

To showcase your producers and consumers, Kafka supports various programming languages. Kafka cloud platforms, such as Confluent Cloud, allow you to build and consume Kafka using Node.js.

4. Strimzi

Given that many message queue technologies are leveraging dynamic technologies such as Kubernetes. We have seen it's easier to run your Kafka streams using a cloud-native platform. Strimzi provides deployment configurations for Kafka. Strimzi allows you to run Apache Kafka cluster on Kubernetes. This allows you to spread brokers across availability zones and dedicated nodes.

Strimzi is a Cloud Native Computing Foundation sandbox project. Basically, it bridges Kube-native management of Kafka's wide features such as cluster, topics, users, Kafka MirrorMaker and Kafka Connect. This way, you can expose Kafka outside Kubernetes using NodePort, OpenShift Routes, Ingress, and Load balancer.

Once Kafka runs on Kube-native support that Strimzi offers, you can now start utilizing Node.js to create your streams and use libraries such as KafkaJS, a modern Apache Kafka client for Node.js.

5. Redpanda

Kafka architecture uses Zookeeper to keep track of a cluster of Kafka brokers.

Image source

Redpanda is a streaming data platform that is Kafka-API compatible, ZooKeeper-free, and JVM-free. Kafka API is great. Redpanda is built to make Kafka fast. Redpanda allows you to pick the deployment option that best suits your needs.

This include:

Its capacity to utilize infrastructure such as Kubernetes allows you to run Kubernetes on Cloud and access Redpanda outside the Kubernetes network.

Redpanda allows you to create Kubernetes cluster and run your broker using cloud providers such as Google Kubernetes Engine, Amazon EKS, and DigitalOcean.

Redpanda, being Kafka API compatible, allows you leverage to the countless client libraries created for Kafka, such as KafkaJS client for Node.js.

Check this guide and learn how to use Node.js with Redpanda

Conclusion

There are many Message Queues that you can use. However, a message queue running as cloud-native outstands the rest. It gives you the capacity to run servers queuing with scalability at the core. This article helped you learn more about cloud-native MQs and the best choices you can use with Node.js.

5 enhancements that will boost your Node.js app

Rose Chege — Thu, 18 Aug 2022 10:13:00 +0000

During your application workflows, there are many aspects needed to ensure the code you write executes with efficiency at its best. Consider you have built a Node.js application. Upon production deployment, you realize your application is getting a lot slower and slower.

Well, at this point, the question running in your mind is what can you do to speed up and run your Node.js app faster? In this article, we will discuss tips and tools you need to massively scale and speed up the Node.js applications.

An overview

Node.js is an open-source cross-platform runtime environment for JavaScript. It is used for running server-side applications. Node.js is used to build applications of all levels that require a data-intensive model.

Node.js is dominant in the field of server-side web development. It ranks as one of the most popular Web frameworks and technologies. This Stack Overflow survey gives a transparent look at how Node.js contests with other server-side technologies such as Django, Laravel, Ruby on rails, and Flask.

ImageSource

There are justifications behind of tremendous popularity of Node.js. This includes:

Node.js is very easy to understand. Node.js is built with JavaScript bare bones, the commonly used programming language. Due to JavaScript's popularity, it becomes relatively easy to get you up and running with Node.js.
Node.js has a giant ecosystem, the Node Package Manager (NPM). NPM is a Node.js registry that allows the use and access of open source libraries that cover the entire Node.js web development pipeline. These libraries allow you to install code that you can use on the fly. This conclusively saves a lot of development time while still delivering light, scalable, and high-speed apps.
Node.js is blazingly light and fast, allowing developers to create high-performant applications. It is built on a high-performance V8 engine to compile and executes the JavaScript code.

As a developer, you want to exclusively exploit the Node.js capacity to build highly scalable applications. Nevertheless, you need different tools to ensure your Node.js applications run even faster. Let\'s discuss tips and tools developers can use to optimize and boost the already fast architecture that Node.js delivers.

How to boost your Node.js app?

1. Using a message broker

A message broker is a software that provides stable, reliable communication between two or more applications/subsets of an application. Basically, a message broker runs an architecture technique that allows you to break applications apart while still ensuring asynchronous communication.

In this case, a message is the piece of information that you want to get processed from one application to another. A broker acts as a medium where actual data payloads are transmitted between the applications. A message broker uses a queue system to hold. It manages queues with the order they are received and delivers them to the actual party.

Here is a general architecture of how a message broker works:

Now that we have an idea of what a message broker is. How does it enhance the scalability of an application? To answer this question, let\'s learn the higher-level advantages that a message broker offers:

Simplified Decoupling - A message broker eliminates the dependencies between applications. A message broker act as the middleman between a client and the server. It\'s the work of the server to send data to a broker. A server doesn\'t have to be in direct contact with its message recipient. When the client needs the data, it just gets the messages from the broker at any time. It is not essential to use a discovery methodology to identify the location of server instances. The message broker takes care of these situations.
Increased Architectural Reliability - The server can send messages whether or not the client is active and vice versa. The only component that must be running is a message broker. When a server sends messages, its job is done. It is now the work of the broker to deliver the messages to the appropriate recipients.
Asynchronous Processing - Assume you are running a Node.js full-scale API using the REST architecture. The server and client are tightly coupled together to make requests and responses and exchange data. The two communicate directly using designated endpoints based on the HTTP protocol. What happens here is if the client sends a request, it expects an immediate response from the server. A REST communication is synchronously designed. It works with pre-defined requests that must return a response. If the response fails, undesirable user experiences can happen, such as a timeout error. On the other side, message brokers are Asynchronous. No one has to wait. Timeout errors can never occur in such architectures.

How does this benefit your Node.js apps?

Improved system performance - Message brokers use message queues for asynchronous communication. High-demand processes can be isolated into independent processes. This ensures data transfer is optimized as no system component is ever held up while waiting for the other. That will help accelerate your application performance and enhance the user experience.
Scalability - The server and the client can all expand and contract in response to data demands. Components can keep adding entries to the queue even when demand peaks without fearing the system crash. Likewise, clients can be scaled up and workload distributed based on incoming data.

Great examples of message brokers can be found in this repo, and a new one I recently found is Memphis. It\'s a great fit for node.js/typescript/NestJS (Read more here [Memphis SDKs for Node.js/Typescript] https://docs.memphis.dev/memphis-new/sdks/node.js-typescript)) with a modern dev-first approach.

2. Build Node.js with gRPC

gRPC is an open-source remote procedure call (RPC) framework used to build scalable fast communication microservices. It helps you create a high-performant communication protocol between services. An RPC framework uses a client to directly invoke a function on the server. In simple terms, RPC is a protocol that allows a program to execute a procedure of another program located on another computer without explicitly coding the details of the network interaction. It\'s automatically handled by the underlying framework.

What makes the gRPC framework special?

It uses the HTTP/2 protocol. Architectures such as REST use the traditional HTPP 1.1 as the transfer protocol. This protocol is based on a request-response model using generic HTTP methods, such as GET, POST, PUT, and DELETE. If many clients submit requests, they are each accepted one at a time. HTTP/2 protocol supports a bidirectional communication model alongside the request-response model. It is possible to serve multiple requests and responses simultaneously. This creates a loose coupling between server and client, allowing you to build fast and efficient applications that support streaming with low latency.
It uses Protocol buffers (protobuf) as the message format. When exchanging data using a SOAP protocol, the exchange of information happens over XML. When using REST, the data are exchanged using JSON format. In gRPC, data is exchanged over protocol buffers. Protocol buffers are lightweight, faster, and efficient as compared to both XML and JSON. It has fewer payloads. Under the hood, it performs serialization of the structured data. The protobuf compiler turns the data structure into the protobuf binary format, which is used to describe the communication format between the client and the server.
Language agnostic - The majority of modern languages and frameworks largely support gRPC, such as Node.js, Python, Go Java, PHP, and C#. A client and the server can be built with different languages/frameworks. It is more flexible than conventional APIs since clients can use any function, not only the typical GET, POST, and DELETE methods.

How does running Node.js with gRPC benefit your application:

Faster communication - gRPC uses HTTP/2. This minimizes latency and network bandwidth usage to ensure a smoother user experience. At the same time, it is API-driven, which provides you flexibility in interface design.
Increased application performance - REST uses synchronous calls. This ensures that the server has returned a response before execution continues. However, gRPC Asynchronous queries return instantaneously, and the response is processed as an independent task.
Lightweight messages - Protocol buffers are considered smaller compared to JSON messages with a difference of up to 30 percent

gRPC and Message Brokers help you handle and manage your application messages. Check how gRPC compares to Message Broker.

3. Optimizing Node.js with clustering

Node.js is single-threaded. It uses only one CPU to execute an application by default. This means if you have 8 CPUs on your machine,Node.js threads are spawned to only utilize one CPU even when performing CPU-intensive operations. This hinders the application from utilizing the full power the underlying bare metals have which can lead to a server deadlock situation.

To solve this, Node.js uses clusters. A cluster is a group of node instances running on a computer. In this case, Node.js uses the main CPU as its master instance and other available CPUs as the worker instances.

Node.js clustering allows networked Node.js applications to be scaled across the number of available CPUs. Here is a basic example of node clustering.

Image Source

This computer has 4 processors. By default, Node.js's single-threaded nature will only utilize one the CPU. However, we can spawn tasks across the available CPUs using the Node.js cluster module under the hood. Node.js can run the child process and share the server ports while still being able to communicate with the parent Node process. Depending on the number of CPUs provided, it significantly boosts the performance, efficiency, and reliability of your application.

4. Load balancing

Let's assume you have a web app, an online shop to be specific. Users will access your shop using a domain name. This domain will communicate with the server to get things done on the user\'s end. However, when you have large traffic accessing your online shop, the demand for resources will increase.

You may be required to set up an additional server to distribute the traffic. A situation that will make you have multiple replicas of your application. But how do you instruct the users to use the resources from replica servers? If they all connect to the initial server, then you will run out of resources, leaving you with other instances servers unutilized.

At this point, what you need is to balance the traffic to access all servers. And what you are exactly doing is load balancing to distribute the traffic evenly. This gives an optimal performance of your application and ensures no node is getting overloaded.

Image Source

Load balancing is a process of distributing application tasks within a given set of resources to ensure efficient usability of overall resources. This way, all your client requests get evenly and equally distributed to the backend nodes managing your application.

It is essential to have a load balancer configured to your Node.js in order to scale your deployment based on the resources demand. One of the popular tools used to deploy Load Balancing in Node.js is NGINX. Nginx is an Open Source tool that allows you to configure HTTP and HTTPS Servers for the client traffic.

Image Source

By disrupting traffic, a load balancer can prevent application failure and increase performance and availability. How does building Node.js Distributed systems with a load balancer benefits your application?

Horizontal Scalability - Distributing your application instance allows it to manage a broader amount of incoming requests.
Reduced server downtime
Flexibility
Redundancy
Efficiency

5. Caching

Caching is the temporary storing of data that is likely to be accessed repetitively. This practice uses a memory buffer to temporarily save application lookups.

A cache streamlines service delivery by ensuring any repetitive task is not retrieved from the server but a memory buffer. This way, if a request is by the client, it will first check any lookups saved in the cache without hitting the server.

Image Source

When running a server that delivers frequently requested resources from the same request, it increases data delays to the clients. Serving such computations from a cache layer allows you to deliver data and respond to requests with minimum delays.

Image Source

The first time a request is sent and a call made to the server is called a cache miss. The output will be saved in the cache before returning the data to the user.

Image Source

If the requested data is found in the cache memory, It\'s called a cache hit. The result will be returned from the cache store and the complex data query doesn\'t need to be processed again.

Image Source

It is important to always check the cache hit rates and polish the caching strategy accordingly. A cache layer is not infinite. Therefore, you need effective cache management. For example:

Invalidate a cache after a certain period.
Removing cache to ensure caching hit ratio remains high.
Invalidate a cache below certain usage thresholds.

Distributed systems need to complete many API calls to match a single response payload. Running such calls with a cache drastically reduces the cost of data aggregation. Running such Node.js tasks caching can:

Greatly reduce the data query response time.
Improve the scalability of an application.
Reduced server load which greatly increases server performance.
Caching improves database performance. A cached request doesn't have to hit the server, meaning the data request query doesn't have to access your database layer.

Node.js caching tools include:

Redis Cache. Redis uses an in-memory database to store the entire data set, reducing the extra cost of a lookup.
Using caching reverse proxy, such as Varnish Cache. Vanish is an HTTP accelerator tool that allows you to save your server-side requests and responses to reduce the loading times of your Node.js server.
Using Node.js App server HTTP Cache Middleware. It allows you to add a Cache Middleware that connects with the Node.js HTTP to reduce API latency.
Using Nginx for content caching. Nginx caches content of application servers, both static and dynamic, to streamline the client delivery and reduce server load.

Other practices to power up your Node.js app

There are many practices that you can use and ensure Node.js scales your
application. Other practices and tools include:

Practicing asynchronous executions.
Logging and monitoring your application performance.
Writing light and compact code and ensuring you eliminate lines of codes and unused library components.
Practicing memory optimization
Running Node.js using SSL/TLS, HTTPS and HTTP/2.
Enhancing data handling techniques, for example, GraphQL vs. REST designs.
Making use of Web Sockets to improve server communication.
Use the Node.js Deflate and Gzip compression middleware to compress server requests and responses.

Conclusion

Building an application is the first step to connecting with your users. Your application requires day-to-day maintenance to maintain a steady experience for these users. This guide helped you learn some of the common strategies and enhancement tools that you can use to boost your Node.js apps.

Commerce platform for Vue Storefront: Use Medusa with Vue Storefront UI

Rose Chege — Mon, 04 Jul 2022 16:49:50 +0000

Medusa is a rising ecommerce platform that fits all businesses. Medusa is an open source composable ecommerce platform with easy customizations and integrations. Medusa comes with a lot of ecommerce features that provide flexibility to both merchants and developers.

Having a headless architecture, Medusa’s frontend and backend are decoupled. This gives developers the freedom to choose what frontend framework or tool they use to build their storefront.

One option is using the Vue Storefront UI. It provides out-of-the-box customizable and performance-oriented components. You can use them in a Nuxt.js project to build stunning modern online stores.

In this article, you’ll learn how to use Vue Storefront UI to build a storefront for your Medusa server. You can find the full code of the storefront on this GitHub repository.

Prerequisites

To follow along with this guide, it's essential to have Node.js installed on your machine with at least version 14.

Set Up the Medusa Server

To create the Medusa server, you need the Medusa CLI tool. Run the following command to install it:

npm install @medusajs/medusa-cli -g

Then, run the following command to create the Medusa server:

medusa new local-medusa-server --seed

The --seed command populates an SQLite database with some test data once the setup is done.

Then, change to the newly created directory and start your medusa server:

cd local-medusa-server && medusa develop

To test if the server is working, open http://localhost:9000/store/products in your browser. You should get a similar response as below:

Finally, it’s recommended to install a storage plugin to add products. You can use MinIO, S3, or Spaces.

Install Medusa Admin

Medusa provides a prebuilt admin dashboard that assists you in configuring and managing the products you have in your store. However, this is a complete optionally set up that you can choose to use in this tutorial.

To install the Medusa admin, open a new directory and run the following command:

git clone https://github.com/medusajs/admin medusa-admin

Once the installation process is done, change to the newly created directory medusa-admin and install the dependencies with NPM:

cd medusa-admin && npm install

Make sure the Medusa server is still running. Then, run the Medusa admin with the following command:

npm start

You can now access Medusa admin on http://localhost:7000/. If you seeded your database with demo data using the --seed option when you created your Medusa admin, you can log in using the email admin@medusa-test.com and password supersecret. Otherwise, you can use the [user command provided by the Medusa CLI tool](https://docs.medusajs.com/cli/reference#user).

After logging in, navigate to the Products menu. You can add a few products from here by clicking on “New Product” at the top right.

In the form, you can specify many information related to the product such as name, handle, description, weight, and more.

To learn more about the features in the Medusa admin, check out the documentation.

Setting up the Nuxt.js Storefront

In a different directory than the previous directories, run the following command to create a Nuxt.js website:

npx create-nuxt-app nuxtjs-storefront

You’ll be asked a few questions. You can answer as instructed in the image below:

Feel free to change the package manager to either NPM or Yarn based on your preference.

When the installation process is done, proceed to the newly created folder:

cd nuxtjs-storefront

Connect the Vue Storefront to the Medusa Server

To start off, you need to install the Axios package. Axios is an HTTP package for making requests. Axios will process the requests between the Medusa server and the Storefront.

Run the following command to install it in the nuxtjs-storefront directory:

npm i -s axios

After the installation is done, you need to configure the Nuxt.js storefront to use the 8000 port. This is because the Medusa server uses CORS to ensure only defined hosts access the server and the default port expected for the storefront is 8000. You can learn more about it in Medusa’s documentation.

Add the following line after the ssr key in the nuxt.config.js file:

export default {
  ssr: false,
  server: {
    port: 8000
  },
    //...
}

Next, you need to add the URL to the Medusa server as an environment variable.

Start by installing the dotenv module:

npm install @nuxtjs/dotenv

Then, register the installed dotenv module innuxt.config.js file in the buildModules array:

buildModules: [
    '@nuxtjs/dotenv'
],

Finally, create a .env file at the root of your project directory and add your server URL as an environment variable:

baseUrl=http://localhost:9000

Install Vue Storefront UI

This tutorial uses Vue Storefront UI. This means you don’t have to create components from scratch and can use the ready-made components provided by Vue Storefront UI.

In the nuxtjs-storefront directory, run the following command to install Vue Storefront UI:

npm install --save @storefront-ui/vue

Set up components and layout

The Vue app will have the following components:

Navbar: Used to display the logo and links in the header of the website
ProductCard: Used to display short information about the product.
Footer: Used to display helpful links to customers.

Create the Navbar component

To create the Navbar component, create a file at components/App/Navbar.vue with the following content:

<template>
  <SfHeader :logo="shopLogo" :title="shopName" active-icon="account">
    <template #navigation>
      <SfHeaderNavigationItemv v-for="(category, key) in navbarLinks" :key="`sf-header-navigation-item-${key}`"
        :link="`${category.link}`" :label="category.title" />
    </template>
  </SfHeader>
</template>
<script>
  import {
    SfHeader
  } from "@storefront-ui/vue";
  export default {
    name: "Default",
    components: {
      SfHeader,
    },
    data() {
      return {
        shopName: "My Storefront App",
                shopLogo: "/logo.svg",
        navbarLinks: [{
          title: "Products",
          link: "/",
        }, ],
      };
    },
  };

</script>

This is a basic component that defines the navigation of your page. The Vue Storefront UI provides a SfHeader component. Inside that component, you can add other internal navigation components such as SfHeaderNavigation and SfHeaderNavigationItem.

You can also pass the component props to customize it such as the title, logo, or icons in the navigation bar.

Make sure you add the logo.svg file to be displayed in the navigation bar. The logo should be added to the static folder. If your logo has a different name, ensure you change that in the shopLogo property in the data function.

Create the Footer component

Next, create the components/App/Footer.vue file with the following content:

<template>
  <SfFooter>
    <SfFooterColumn v-for="(column, key) in footerColumns" :key="key" :title="column.title">
      <SfList>
        <SfListItem v-for="(menuItem, index) in column.items" :key="index">
          <SfMenuItem :label="menuItem" />
        </SfListItem>
      </SfList>
    </SfFooterColumn>
  </SfFooter>
</template>
<script>
  import {
    SfFooter,
    SfList,
    SfMenuItem
  } from "@storefront-ui/vue";
  export default {
    name: "Default",
    components: {
      SfFooter,
      SfList,
      SfMenuItem,
    },
    data() {
      return {
        footerColumns: [{
            title: "About us",
            items: ["Who we are", "Quality in the details", "Customer Reviews"],
          },
          {
            title: "Departments",
            items: ["Women fashion", "Men fashion", "Kidswear", "Home"],
          },
          {
            title: "Help",
            items: ["Customer service", "Size guide", "Contact us"],
          },
          {
            title: "Payment & delivery",
            items: ["Purchase terms", "Guarantee"],
          },
        ],
      };
    },
  };

</script>

The Footer component just includes helpful links for your customer. The Vue Storefront UI library provides a predefined UI for footers using the SfFooter component.

Create the ProductCard component

Create the components/ProductCard.vue file with the following content:

<template>
  <SfProductCard :image="item.thumbnail" :imageWidth="216" :imageHeight="326" badgeLabel="" badgeColor=""
    :title="item.title" :link="this.url" :linkTag="item.id" :scoreRating="4" :reviewsCount="7" :maxRating="5"
    :regularPrice="this.highestPrice.amount" :specialPrice="this.lowestPrice.amount" wishlistIcon="heart"
    isInWishlistIcon="heart_fill" :isInWishlist="false" showAddToCartButton :isAddedToCart="false"
    :addToCartDisabled="false" />
</template>

The product card uses the SfProductCard component provided by Vue Storefront UI to display a short summary of a product’s information including the title, price, and thumbnail.

Then, in the same file, add the following at the end of the file:

<script>
import { SfProductCard } from "@storefront-ui/vue"; // Import the components
export default {
    name:"ProductCard",
    components:{
        SfProductCard
    },
    props: {
        item: {
            type: Object,
        }
    },
    computed:{
        url(){
            return `/products/${this.item.id}`; // Product page
        },
        lowestPrice() {
        // Get the lowest price from the list of prices.
        const lowestPrice = this.item.variants.reduce(
            (acc, curr) => {
            return curr.prices.reduce((lowest, current) => {
                if (lowest.amount > current.amount) {
                return current;
                }
                return lowest;
            });
            },
            { amount: 0 }
        );
        // Format the amount and also add currency
        return {
            amount:
            lowestPrice.amount > 0
                ? (lowestPrice.amount / 100).toLocaleString("en-US", {
                    style: "currency",
                    currency: "USD",
                })
                : 0,
            currency_code: "USD",
        };
        },
        highestPrice() {
        // Get the highest price from the list of prices
        const highestPrice = this.item.variants.reduce(
            (acc, curr) => {
            return curr.prices.reduce((highest, current) => {
                if (highest.amount < current.amount) {
                return current;
                }
                return highest;
            });
            },
            { amount: 0 }
        );

        // Format the amount and also add currency
        return {
            amount:
            highestPrice.amount > 0
                ? (highestPrice.amount / 100).toLocaleString("en-US", {
                    style: "currency",
                    currency: "USD",
                })
                : 0,
            currency_code: "USD",
        };
        },
    }

}
</script>

This script prepares the data to be displayed by the template. That includes formatting the price and URL of the component.

Create the Storefront Layout

To set up the layout, create the file layouts/default.vue with the following content:

<template>
  <div>
    <app-navbar />
    <main>
      <div class="container">
        <Nuxt />
      </div>
    </main>
    <app-footer />
  </div>
</template>
<script>
  import "@storefront-ui/vue/styles.scss"; // vuestorefront UI styles.
  export default {
    name: 'DefaultLayout'
  }
</script>

This will display the page with the default Vue Storefront UI layout.

Create Home Page

Under the pages directory, edit the index.vue file to the following:

<template>
  <div>
    <div class="row">
      <div class="col-md-12">
                <SfHero class="hero" :slider-options="{ autoplay: false }">
          <SfHeroItem
            v-for="(img, index) in heroes"
            :key="index"
            :title="img.title"
            :subtitle="img.subtitle"
            :button-text="img.buttonText"
            :background="img.background"
            :class="img.className"
          />
        </SfHero>
      </div>
            <div class="col-md-12">
        <h4 class="text-center mt-5 mb-5">All Products</h4>
      </div>
    </div>
    <div v-if="products.length">
      <div class="row">
        <ProductCard v-for="product in products" :key="product.id" :item="product" />
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
import { SfHero } from "@storefront-ui/vue";
export default {
name: 'ProductsIndex',
components: {
    SfHero,
  },
    data () {
    return {
    products: [],
        heroes: [
        {
          title: "Colorful T-shirts already in store",
          subtitle: "JUNE COLLECTION 2022",
          buttonText: "Learn more",
          background: "rgb(236, 239, 241)",
        },
        {
          title: "Colorful Sweatshirts already in store",
          subtitle: "JUNE COLLECTION 2022",
          buttonText: "Learn more",
          background: "rgb(239, 235, 233)",
        },
        {
          title: "Colorful Sweatpants already in store",
          subtitle: "JUNE COLLECTION 2022",
          buttonText: "Learn more",
          background: "rgb(236, 239, 241)",
        },
      ],
    }
},
async fetch(){ // Fetching the products from Medusa server
        try{
        const {data:{products}} = await Axios.get(`${process.env.baseUrl}/store/products`);
        this.products = products
        }catch(e){
        console.log('An error occured', e)
        }
    }
}
</script>

This fetches products from the Medusa server using Axios and displays them using the ProductCard component you created earlier.

You also add a carousel using the SfHero component. It shows an automatic slider with buttons and text. Each slide is defined as a SfHeroItem component.

Test Home Page

To test out the home page, make sure the Medusa server is running and start the Nuxt.js development server:

npm run dev

Then, open http://localhost:8000 in a browser, you should see the home page with a carousel, products, and a footer.

Create a Single Product Page

In this section, you’ll create a single product page to display more details of a product.

To create a single product page, Create the file pages/products/_id.vue with the following content:

<template>
  <div id="product">
    <SfBreadcrumbs class="breadcrumbs desktop-only" :breadcrumbs="breadcrumbs" />

        <p v-if="$fetchState.pending">Fetching Data...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>

    <div v-else class="product">
      <SfGallery :images="this.getImages" class="product__gallery" :image-width="422" :image-height="664"
        :thumb-width="160" :thumb-height="160" :enableZoom="true"/>
      <div class="product__info">
        <div class="product__header">
          <SfHeading :title="product.title" :level="1" class="sf-heading--no-underline sf-heading--left" />
          <SfIcon icon="drag" size="42px" color="#E0E0E1" class="product__drag-icon smartphone-only" />
        </div>
        <div class="product__price-and-rating">
          <SfPrice :regular="this.lowestPrice.amount" />
        </div>
        <div>
          <p class="product__description desktop-only">{{ this.product.description }}
          </p>
          <SfAddToCart v-model="qty" class="product__add-to-cart" @click="addToCart" />
        </div>
      </div>
    </div>
    <transition name="slide">
      <SfNotification class="notification desktop-only" type="success" :visible="isOpenNotification"
        :message="`${qty} ${product.title} has been added to CART`" @click:close="isOpenNotification = true">
        <template #icon>
          <span></span></template></SfNotification>
    </transition>
  </div>
</template>

This page displays the following components from the Vue Storefront UI library:

SfBreadcrumbs - Displays the path to the current product.
SfGallery - Arranges product images that users can browse through with zoom-in functionality. Alternatively, you can use Carousel navigation to organize your product images.
SfHeading - Displays product titles and can have an optional description.
SfPrice - Display the product’s price.
SfAddToCart - Displays Add to Cart button with quantity options.
SfNotification - Displays notification at the bottom of the page that indicates the items are added to the cart. This component is only used to simulate adding a product to the cart but this is not covered in this tutorial.

Next, add the following at the end of the same file:

<script>
  import { // UI components
    SfGallery,
    SfHeading,
    SfPrice,
    SfIcon,
    SfAddToCart,
    SfBreadcrumbs,
    SfNotification,
  } from "@storefront-ui/vue";
  import Axios from "axios";
  export default {
    name: "Product",
    components: {
      SfGallery,
      SfHeading,
      SfPrice,
      SfIcon,
      SfAddToCart,
      SfBreadcrumbs,
      SfNotification,
    },
    data() { // default data
      return {
        current: 1,
        qty: 1,
        selected: false,
        product: {
          name: "",
          title: "",
          description: "",
          images: [],
          price: {
            regular: 0,
          },
        },
        breadcrumbs: [{
          text: "Home",
          link: "/",
        }, ],
        isOpenNotification: false,
      };
    },
    computed: {
      getImages() { // Format Product images in a way that the component understands.
        return this.product ?
          this.product.images.map((image) => {
            return {
              mobile: {
                url: image.url,
              },
              desktop: {
                url: image.url,
              },
              big: {
                url: image.url,
              },
              alt: this.product?.title,
              name: this.product?.title,
            };
          }) :
          [];
      },
      lowestPrice() {
        // Get the least price
        const lowestPrice = this.product.variants ?
          this.product.variants.reduce(
            (acc, curr) => {
              return curr.prices.reduce((lowest, current) => {
                if (lowest.amount > current.amount) {
                  return current;
                }
                return lowest;
              });
            }, {
              amount: 0
            }
          ) :
         {
            amount: 0
          };
        // Format the amount and append the currency.
        return {
          amount: lowestPrice.amount > 0 ?
            (lowestPrice.amount / 100).toLocaleString("en-US", {
              style: "currency",
              currency: "USD",
            }) :
            0,
          currency: "USD",
        };
      },
    },
    methods: {
      addToCart() {
        this.isOpenNotification = true; // show notification
        setTimeout(() => {
          this.isOpenNotification = false; // hide notification
        }, 3000);
      },
    },
    async fetch() {
      // Fetch the product based on the id.
      try {
        const {
          data: {
            product
          },
        } = await Axios.get(
          `${process.env.baseUrl}/store/products/${this.$route.params.id}`);
        this.product = product;
      } catch (e) {
        // eslint-disable-next-line no-console
        console.log("The server is not responding");
      }
    },
  };
</script>

This just imports the components used in the template, fetches the product’s information from the Medusa server, and formats the product’s information such as the price or URL before displaying them in the template.

Finally, add the following styling at the end of the same file:

<style lang="scss" scoped>
@import "~@storefront-ui/vue/styles";
#product {
box-sizing: border-box;
@include for-desktop {
    max-width: 1272px;
    padding: 0 var(--spacer-sm);
    margin: 0 auto;
}
}
.product {
    margin-bottom:20px;
    @include for-desktop {
        display: flex;
    }
    &__info {
        margin: var(--spacer-xs) auto;
        @include for-desktop {
        max-width: 32.625rem;
        margin: 0 0 0 7.5rem;
        }
    }
    &__header {
        --heading-title-color: var(--c-link);
        --heading-title-font-weight: var(--font-weight--bold);
        --heading-title-font-size: var(--h3-font-size);
        --heading-padding: 0;
        margin: 0 var(--spacer-sm);
        display: flex;
        justify-content: space-between;
        @include for-desktop {
        --heading-title-font-weight: var(--font-weight--semibold);
        margin: 0 auto;
        }
    }
    &__drag-icon {
        animation: moveicon 1s ease-in-out infinite;
    }
    &__price-and-rating {
        margin: 0 var(--spacer-sm) var(--spacer-base);
        align-items: center;
        @include for-desktop {
        display: flex;
        justify-content: space-between;
        margin: var(--spacer-sm) 0 var(--spacer-lg) 0;
        }
    }
    &__count {
        @include font(
        --count-font,
        var(--font-weight--normal),
        var(--font-size--sm),
        1.4,
        var(--font-family--secondary)
        );
        color: var(--c-text);
        text-decoration: none;
        margin: 0 0 0 var(--spacer-xs);
    }
    &__description {
        color: var(--c-link);
        @include font(
        --product-description-font,
        var(--font-weight--light),
        var(--font-size--base),
        1.6,
        var(--font-family--primary)
        );
    }
    &__add-to-cart {
        margin: var(--spacer-base) var(--spacer-sm) 0;
        @include for-desktop {
        margin-top: var(--spacer-2xl);
        }
    }
    &__guide,
    &__compare,
    &__save {
        display: block;
        margin: var(--spacer-xl) 0 var(--spacer-base) auto;
    }
    &__compare {
        margin-top: 0;
    }
    &__property {
        margin: var(--spacer-base) 0;
        &__button {
        --button-font-size: var(--font-size--base);
        }
    }
    &__additional-info {
        color: var(--c-link);
        @include font(
        --additional-info-font,
        var(--font-weight--light),
        var(--font-size--sm),
        1.6,
        var(--font-family--primary)
        );
        &__title {
        font-weight: var(--font-weight--normal);
        font-size: var(--font-size--base);
        margin: 0 0 var(--spacer-sm);
        &:not(:first-child) {
            margin-top: 3.5rem;
        }
        }
        &__paragraph {
        margin: 0;
        }
    }
    &__gallery {
        flex: 1;
    }
}
.breadcrumbs {
margin: var(--spacer-base) auto var(--spacer-lg);
}
.notification {
position: fixed;
bottom: 0;
left: 0;
right: 0;
--notification-border-radius: 0;
--notification-max-width: 100%;
--notification-font-size: var(--font-size--lg);
--notification-font-family: var(--font-family--primary);
--notification-font-weight: var(--font-weight--normal);
--notification-padding: var(--spacer-base) var(--spacer-lg);
}

.slide-enter-active,
.slide-leave-active {
transition: all 0.3s;
}

.slide-enter {
transform: translateY(40px);
}

.slide-leave-to {
transform: translateY(-80px);
}
@keyframes moveicon {
0% {
    transform: translate3d(0, 0, 0);
}
50% {
    transform: translate3d(0, 30%, 0);
}
100% {
    transform: translate3d(0, 0, 0);
}
}
</style>

Test Single Product Page

Make sure that both your Medusa server and Nuxt.js development servers are running. Then, go to localhost:8000 and click on a product on the home page. You’ll be redirected to the product’s page with more information about it.

If you click the Add to Cart button, you’ll see a notification at the bottom of the page indicating you added the product to the cart. As mentioned earlier, this is only used for simulation and does not actually add the product to the cart.

Conclusion

This tutorial only scratches the surface of what you can do with Medusa and Vue Storefront UI.

With Medusa, you can implement other ecommerce features in your storefront such:

Cart functionalities and features. You can use Vue Storefront UI’s Cart component.
Add Payment integrations with Stripe.
Checkout flow. You can use Vue Storefront’s Checkout and Order Summary components.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.