Poorly performing web applications can delay the opening of pages, and hence annoy the end-users. For instance, while purchasing an item on the app if a user faces a delay or a glitch at the checkout, it may refrain a consumer from using the app. Any website that offers more delayed time, slow loading of pages and runtime errors, tends to lose consumers. In order to avoid such issues one must improve application performance and reduce the load time of apps. 

There are some methods to fix, speed & performance issues of the application. We can follow certain tips and techniques to overcome speed and performance issues of an app.

After completing the application build process, we can check the performance and speed with the help of a google GT Metrix website.

 

There are good default features in Angular CLI so we can do required optimizations to the sites while developing. 

Mentioned below are some of the best methods which are useful for speeding up the web sites and reducing the load timing. All these methods can in turn speed up the website performance. The methods which we are going to elaborate further in this blog include-

• AOT (Ahead -of-Time Compilation)
• Lazy Loading
• Minification
• Optimize Images
• Enable Gzip Compression
• Leverage Browser Caching

1. AOT (Ahead-of-Time Compilation)

Before running the code, AOT Compiler will convert your Angular HTML and Typescript code to the efficient Javascript Code. By using Ahead of Time Compiler, compilation only happens once, while you build your project.

The purpose of using AOT Compiler.

It can minimize the size of the application. The browser doesn't need to compile the code in run time, it can directly render the application immediately without waiting to compile the app first. So it provides immediate component rendering. The Ahead of time compiler will detect any of the template errors before time. It detects and reports template binding errors during the build steps itself before users can see them.
You can compile using CLI commands with the -- AOT switch to take advantage of AOT optimizations:

2. Lazy Loading

The main purpose of using Lazy Loading is to reduce the load time. Lazy Loading allows loading JavaScript components when a specific route is activated. It will improve application load time speed by splitting the application into many bundles. When the user navigates by the app, bundles are loaded as needed. Lazy loading helps to keep the bundle size small. It loads JavaScript components asynchronously when a specific route is activated.

3. Minification

Minification will reduce our code's file size and allow us to code without impacting load time. It removes all unwanted whitespace and Comments Unwanted Variables from the file in order to make our files as small as possible. It can be helpful in reducing the js files for faster downloading. 

Example:

Before Minification:

var app = angular. Module ('mainApp', []);    
app.Controller ('First Controller', function ($scope) {
    $scope. Name= 'Hello World!';});

After Minification:

Var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World!'})

4. Optimize Images

Optimizing images could be the main source for improving site speed. Before uploading images on site, maximum tries to upload the images in KB size rather than uploading it in MB. It’s always preferable to convert a large file into a smaller size. It is also one of the best techniques for reducing the load time of applications.

5. Enable Gzip Compression

According to Google statistics if the page load time increases from one to three seconds, then website bounce rate will be above 30%. By using the Gzip compression process, we can reduce the big file sizes into small sizes. In a simple way we can say it is the lossless data compression method on the web. It will reduce the size of your site’s HTML pages, stylesheets, and scripts.

6. Leverage Browser Caching

The leverage caching mechanism will keep users' website data information for specific time intervals. The most important cache mechanism for page speed is browser caching. Most of the static files that are used on web pages can be saved on the computer for future access. For Example, if a user visits the same website multiple times these files will be accessed from your computer instead of getting from the server-side. It is a good technique for speeding up the page load timing. 

There are a few more techniques for increasing your website speed and performance, which include:

    1. Use a Content Delivery Network (CDN) to minimize the distance between the visitors and your website’s server. A CDN stores a cached version of its content in multiple geographical locations.
    2. Reduce the number of HTTP requests if possible.
    3. Remove Unwanted/ Unused Plug-ins and try to reduce the use of Third-party plugins.
    4. Specify a character set in the HTTP headers so that the browser will know which character set you are using and doesn't spend extra time.
    5. Remove all unwanted code and commented code.
    6. Remove unwanted files from the library.

Conclusion:

While developing the application it’s not necessary to utilize all techniques together. Depending upon your application requirement you can implement the technique that best suits you. So these are some of the best techniques you can follow while developing the sites to reduce loading time of your website and to increase the website performance. 

In this blog, we are going to learn how to add a launcher icon to react native apps. Launcher icon or app icon is used to represent apps. This icon will appear in your phone’s home screen app list.

There are multiple ways to do it like using android studio or manually adding the images in the src folder. In this blog we will focus on the method that uses android studio.

Prerequisites : -

• React-native setup
• Android studio

Here is your step by step guide to add icon to react native app: -

 

Method 1 : (Using Android Studio)

Step 1 :- (You can skip this step if you are working on an existing project)

Create new React Native Project by following the below steps -

• Open terminal
• Change the directory/folder where you want to create your project.

• Run command :

  npx react-native init my_first_rn_app

  

After installation, the new React Native project will look like the image shown below.

Step 2 : - 

(a) Open android studio
(b) Open android folder of newly created project in android studio

(c) Wait till completion of Gradle build
(d) Open Image asset : - 

• Open app folder
• Right click on res folder
• Click on new
• Click on Image Asset
  

Image Asset will look like below image

(e) Configure Image asset
There are multiple options to configure image asset but we are going with the default configuration.

• Choose your icon image path and click next (After path selection, you can see your icon preview in different shapes)
• Click finish ( It will generate a drawable folder in src. It contains xml file)
  

Step 3: -
(a) Open project in VS code (or in any editor)
(b) Open terminal
(c) Start project
Command : -

npx react-native run-android

(d) Now you can see Icon in your app

Method 2 : (Without Android Studio)

Step 1 :-

• Choose any icon which you want to add.
  For this blog, we are choosing the icon shown in the screenshot below-
  
• Open Below Url and Upload your Icon.
  Launcher Icon generator
  
  
• Download the zip folder and extract it. You can customize your icon from left toolbar.
  
  
  

Step 2 :-

• Copy all mipmap folder from the extracted zip file
  

• Now open scr folder of your react-native project. Follow below path

  Your_project  -> android -> app -> src -> main -> res

• Paste the copied file in res folder
  

Step 3 :-

Run your Project and you will be able to see the newly added icon on the screen.

The aforementioned methods can be used effectively to add an icon to the app using android studio. At first we created a react-native app. We opened the android folder of our project in android studio, and finally configured the image asset for the icon where we are able to see icons in different shapes. In the final step, you may check the icon in the running app.

Creating a Custom Form in Drupal 9
 

Forms can be used in collecting data through any source, for example, site or application. They are based on the structure of nested arrays. Drupal 9 Form API is used to create and process forms in custom modules. They are similar to the Form APIs of Drupal 7 and Drupal 8. There are two types of forms:-

1. Config Forms - They can be defined as administrator forms.
2. Custom Forms - It allows us to create custom fields and methods.

“\Drupal\Core\Form\FormInterface” is implemented by form classes. Form API workflow is dependent on four main methods i.e. getFormId, buildForm, validateForm, and submitForm. While requesting any form, we can define it using a nested array “$form” which is easily renderable. We can use different abstract classes to provide a base class to form. Those classes are: FormBase, ConfigFormBase, and ConfirmFormBase.

Understanding Drupal Form API

The Drupal Form API (FAPI) is a structured framework for building and managing Drupal forms programmatically. Instead of writing raw HTML, developers define form elements, validation rules, and submission handlers using render arrays. This ensures security, consistency, and scalability across projects.

Drupal form architecture follows three main phases: build, validate, and submit. During the build phase, the structure of the Drupal custom form is defined. In the validation phase, user inputs are checked for accuracy and security. Finally, the submission phase processes or stores the data. This lifecycle makes Drupal forms reliable and easy to maintain.

A Drupal form module organizes form functionality, including routing, permissions, and dependencies. Best practice is to create forms inside a Drupal custom module, which keeps business logic modular, reusable, and scalable. Using a custom module ensures clean architecture, easier maintenance, and better integration within a Drupal 9 project.

Where Custom Forms Fit in Drupal Projects

A Drupal custom form is ideal for handling unique business logic, complex workflows, or integrations with third-party APIs. When you need precise control over validation, submission handling, or data processing, it is better to create a form in Drupal using a custom approach.

In many enterprise projects, developers prefer to create a form in Drupal inside a Drupal custom module to maintain clean architecture and scalability. This ensures that the form logic remains separate from themes and core functionality.

Custom forms can also be displayed through a custom block in Drupal, embedded within layouts, or exposed as standalone pages via routing. Whether it’s a registration workflow, internal data collection tool, or custom admin interface, a properly structured Drupal form module ensures flexibility, maintainability, and long-term project stability.

Key Components of a Drupal 9 Custom Form

Core PHP Class Components

The main class file of a Drupal custom form is usually located in src/Form/ within your custom module. It includes the following essential methods:

getFormId()
This method returns a unique string identifier for the form. Drupal uses this ID to track and manage the Drupal form during its lifecycle.

buildForm()
This method defines the structure of the form using a Form API render array ($form). All fields such as textfields, checkboxes, and submit buttons are declared here along with their properties.

validateForm() (Optional but recommended)
This method contains custom validation logic beyond default Form API checks. It ensures user input meets specific business requirements and sets error messages if validation fails.

submitForm()
After successful validation, this method processes the form data. It may save data, send emails, or redirect users.

Essential Module Files

A Drupal form module depends on additional configuration files:

.info.yml file
Defines metadata such as module name, description, type, and Drupal core compatibility.

.routing.yml file
Specifies the URL path for the form and maps it to the _form key, referencing the fully-qualified class name.

.permissions.yml file (if required)
Defines custom permissions when form access needs restriction, ensuring proper security within the Drupal custom module.

Steps to Create a Custom Form in Drupal 9

To learn how to create a custom form in Drupal 9, we would create a custom module exposing a custom form that is used as a student registration form.

Step 1: Creating a custom module in the custom folder.

Follow path “\web\modules\custom”. “student_registration” is the module name here.

Step 2: Creating an info.yml file followed by a .module file.

In our case, it will be “student_registration.info.yml” and “student_registration.module”.

After adding info and module file, the folder structure will look like the following snapshot:

Step 3: Creating a routing.yml file

For learning process, In this blog we would create, “student_registration.routing.yml”.

A route can be defined as a path where we return some content. A routing file contains the path by which our module can be accessed. A route path can also be called a path alias. Using the path alias defined in the routing file we can execute the callback function.

A routing file is divided into four basic parts:-

1. {name} - It is a path parameter or element which is used as $name in the controller. Here, “student_registration.form”.
2. {path_name} - It is an alias that is used to access the page. Here, “/student-registration”.
3. {title} - It can be defined as the title of the page. Here, “Student Registration Form”.
4. {module_name} - It is the name of a custom module. Here, “student_registration”.

Step 4: Creating Form folder in custom module. Follow the folder structure shown in the snapshot below.

Step 5: Creating Custom Form “RegistrationForm” and adding namespace along with use cases in custom form.

A “namespace” is used to organize form classes into virtual folders and make sure that these classes do not conflict with one another.

A “use” is used to bring the dependency of core classes to our custom class.

Step 6: Implementing getFormId() to define a unique id for the form.

Step 7: Implementing buildForm() to build and process the form using a given unique id.

Step 8: Implementing validateForm() to validate the values of the form via the controller.

Step 9: Implementing submitForm() to process the form submission, only if the form has passed all validation checks.

A complete form will look like this:

Step 10: Enabling our custom module in the Drupal 9 site.

Step 11: Visit the path we have defined in the routing file to access our form. Here it shall be “/student-registration”.

Fill the form and hit “Register”.

Step 12: After submitting the form we can view the result as a message.

By evolving through Drupal 7, Drupal 8, and now to Drupal 9, we learned how we left some hooks [hook_menu()] behind and got a replacement in the form of controllers, routes/aliases defined in yml or yaml files. We can use Form API to build forms with extended inputs, complex forms, and so on using minimal code.

FORM ASSISTANCE – DRUPAL 9 EXPIRES SOON
 

How to Enhance a Drupal Custom Form

Enhancing a Drupal custom form goes beyond basic structure. By leveraging Drupal Form API (FAPI), contributed modules, and theming techniques, you can significantly improve usability, functionality, and performance within your Drupal custom module.

1. Improve User Experience (UX)

Break up long forms: Use multi-step forms to reduce form fatigue and make complex data collection easier for users.

Conditional logic: Use the FAPI #states property to dynamically show or hide fields based on user input, creating a responsive Drupal form experience.

Use appropriate widgets: Enhance autocomplete fields with Tagify. Improve dropdown usability using Select2 or Chosen integrations available via modules like Webform.
Add help text and tooltips: Use the #description property for field guidance or integrate jQuery UI Tooltips to provide additional clarity.

2. Add Functionality and Validation

Server-side validation: Implement custom validation inside validateForm() to ensure data integrity and prevent invalid submissions.

Attach libraries (JS/CSS): Use the #attached property in buildForm() to include custom JavaScript and CSS for improved interaction and styling.

Leverage contributed modules: Modules like Webform can extend your Drupal form module with advanced features such as conditional logic, file uploads, and submission tracking.

3. Customize Appearance

Theming with Twig
Override form.html.twig or create specific templates like form--FORM-ID.html.twig for granular design control.

Apply custom CSS
Define a custom library in your_module.libraries.yml and attach it to maintain brand consistency.

Use form alteration hooks
Implement hook_form_alter() or hook_form_FORM_ID_alter() in your module file to modify existing Drupal core or contributed forms, ensuring flexibility within your Drupal custom module architecture.

Best Practices for Drupal 9 Custom Forms

Following best practices ensures your Drupal 9 custom form remains scalable, secure, and maintainable within a professional project structure.

Development Best Practices

Follow Drupal Coding Standards: Always adhere to official Drupal coding standards. This improves consistency, readability, and collaboration when building a Drupal custom form inside a team environment.

Use Dependency Injection (DI): Avoid static service calls like \Drupal::messenger() or \Drupal::database() directly inside your Drupal form class. Instead, inject required services through the constructor. Dependency Injection makes your Drupal custom module more modular, reusable, and easier to test.

Separate Business Logic: Keep business logic outside buildForm() and submitForm(). Instead, define complex operations such as database interactions or workflow triggers inside a dedicated service class. Your Drupal form module should only handle form-related responsibilities.

Leverage Drupal Form API (FAPI): Use structured render arrays ($form) to define elements. This ensures seamless integration with Drupal’s processing and theming layers.

Use the Right Base Class: Extend FormBase for general forms, ConfigFormBase for settings forms, or use the Entity API when managing content entities. Choosing the correct base class strengthens your Drupal 9 module architecture.

Migrating Custom Forms from Drupal 8 to Drupal 9

Migrating custom forms from Drupal 8 to Drupal 9 is generally straightforward because Drupal 9 maintains backward compatibility with most Drupal 8 APIs. However, careful review and updates are still required to ensure long-term stability and performance.

The first step is checking deprecated APIs. Drupal 9 removed several functions that were marked as deprecated in Drupal 8. If your form inside a custom module Drupal 9 still uses deprecated methods, they must be replaced with updated service-based implementations.

Next, review dependencies and contributed modules. Ensure all modules supporting your form are Drupal 9 compatible. Update the .info.yml file to reflect Drupal 9 core requirements.

It is also important to verify routing, permissions, and service definitions. If your form uses Dependency Injection, confirm that service declarations in services.yml follow current standards.

Finally, thoroughly test validation logic, submission handlers, and integrations. Proper testing ensures your custom module Drupal 9 environment runs smoothly without functional or security issues.
 

 

I started working on React Native recently. The very first roadblock I came across was configuring React Native on my machine. Since I had minimal working knowledge of Android studio as well as Node JS it took me a few days to figure this out. I am sharing my learning in this blog post to help you fast track your initial setup.

There are multiple ways to set up a react native environment, such as using Expo CLI or React native CLI. However, this blog gives a glimpse into setting up  React native CLI. The development operating system that we shall be using is Windows; meanwhile the Target Operating System will be Android.



For this we need a Code editor like VS code and dependencies (JDK, Node, React native command line interface and android studio).

Here’s your step-by-step guide to set up React Native in Windows using Android Studio and Node.

Step 1:

(a) Install Java JDK 15

Use the below link to download Windows x64 installer-

https://www.oracle.com/java/technologies/javase/jdk15-archive-downloads.html

Here’s a screenshot of how this may appear.

(b) Install downloaded JDK by following instructions.

(c) Next we are going to set environmental variable. Press windows key and search “Edit environment variables,” and open it.

(d) In the User variable section, click new, as shown in the screenshot below.

After clicking New, You will get screen like this-

Fill variable name as ‘JAVA_HOME’ (Without single quote).For Variable value, open your C drive -> Program files -> Java -> jdk-15.0.2  and copy that path as shown below.

Variable value : - ‘C:\Program Files\Java\jdk-15.0.2’ (Without Single quote)

Once you press OK, you can see your variable in the user variable section (Refer to the image shown below).

Step 2 : 

(a) Install NodeJs (if not already installed)

Use the link given below to download the LTS version of Node(Recommended).

https://nodejs.org/en/

(b) Install downloaded NodeJs by following instructions.

 

Step 3:

(a) Install React Native CLI

To do so, follow the below mentioned set of instructions-

• Open Windows Terminal
• Run command : - node -v
• Check whether node is installed correctly or not by running command : - node -v 
  
  
  
  
  
   
• Run Command : - npm install -g react-native-cli (To install React native CLI)
  
  
  
  
  
   
• Close the terminal

 

Step 4:

(a) Install Android studio

Use the link given below to download Android Studio-

https://developer.android.com/studio

 

(b) Install android studio by following below mentioned set of instructions:

• Open android studio and click ‘tools’
  
  
  
  
  
   
• Now click on SDK Manager
  
  
  
  
  
   
• Install your required android version
  
  
  
  
  
   
• Again click on Tools and open AVD  Manager
  
  
  
  
• Click on ‘Create Virtual Device’
• Choose Device definition and click next
• Choose system image and click next
• Verify configuration and click finish.

Once you’re done with the installation, you will be able to see your device in Android Virtual Device Manager as shown in the image below.

In the next step,  we are going to set environmental variable. For that, press windows key and search “Edit environment variables” and open it.

Follow the below set of instructions to continue further: In the User variable section, click new as shown in the screenshot below.

After you’ve clicked  New, a screen like the image shown below appears on your screen.

• Fill variable name as ‘ANDROID_HOME’ (Without single quote)
• For Variable value, open your C drive -> Users -> {Your_pc_name} -> AppData -> Local -> Android -> Sdk  and copy that path.
• Variable value shall be - ‘C:\Users\HP\AppData\Local\Android\Sdk’ (Without Single quote)
  
  
  
  
• After you click Ok, you shall be able to see your variable in the user variable section.
  
  

 

Step 5:

(a) Create new React Native Project

Follow the steps as mentioned below-

• Open terminal
• Change the directory/folder where you want to create your project.
• Run command : npx react-native init my_first_rn_app
  
  Note: - my_first_rn_app is the project name. You can give any name.
  
  
  
  

After installation, the new React Native project will look like the image shown below.

The Project structure will look like below image (Open project in VS code)

 

Step 6 :

(a) Start Emulator

Following steps must be followed for this process.

• Open Terminal at location : -
  
  C:\Users\HP\AppData\Local\Android\Sdk\emulator
  
  
  
  
• Run Command :   emulator -list-avds
  
  It will show the list of devices (emulator)
  
  
  
  
  
   
• Copy emulator name.
• Run command: emulator -avd Pixel_3a_API_29 to start Emulator
  
  Note : - Pixel_3a_API_29 is the emulator name
  
  
  
  
  
   
• Now our running emulator will look like the below image
  
  
  
  

 

Step 7:

After we’ve followed all the aforementioned steps, we’re almost ready to run  our first app.

• Open terminal in vs code (after opening the project in vs code)
• Run command : npx react-native run-android
  
  
  
  
  
   
• It will start metro and emulator as well.
  
  Note: - Do not close opened window by run-android command
  
   
• Emulator output looks like the below image
  
  
  
  

 

And we’ve finally completed the process of React Native setup in Windows using Android studio and Node. We have successfully created an  up and running react native environment. We started with downloading jdk and setting environmental variable for it. We Installed Node js, react native CLI, android studio and android SDK; and finally set up the environmental variable for android sdk to create a fresh react native project.



 

 

Did you find our guide on "How to Set Up React Native in Windows using Android Studio and NodeJS" useful? Are you ready to develop your first React Native application? Now that you're all set up, your journey into the world of React Native has only just begun. Keep exploring, keep coding, and remember, we're here to help if you hit any roadblocks along the way. Have any questions or feedback? Let us know in the comments section below! Happy Coding!





 

The web is progressing and it has become quite intense for interaction between clients and websites or apps, multiple sites, databases and devices. For that the internet was demanding a new technology. One such technology which can handle this type of interaction is REST.

Before creating our own custom REST API in Drupal, we need to know what REST API actually is? It is an application programming interface (API or web API) that allows interaction with RESTful web services. Where, REST is known as REpresentational State Transfer, which was defined by Computer Scientist “Roy Fielding”.

While designing APIs, there is always a need to specify which HTTP method will be used for performing CRUD operations on data. Here, it can be made possible by using several HTTP requests like POST (Create the data), GET (Retrieve/Read the data), DELETE (Delete the data) or PATCH/PUT (Update the data). To learn how to create custom web services, we would create a custom module exposing RESTful API which can display a list of taxonomy terms from our Drupal 9 site.

Step 1: Create a custom module in the “\web\modules\custom” folder.

 

Step 2: Create an info.yml file as “sample_rest_resource.info.yml” along with a blank module file as "sample_rest_resource.module"

Now the folder structure will look like this:

We are now moving forward towards implementation of a rest resource using the GET method. By GET method, we need to fetch the list of taxonomy term “vb”.

Step 3: Create a folder structure in the custom module as “src\Plugin\rest\resource”.

The folder structure will look like this:

Step 4: We will implement our resource file. For that, create a php file as “SampleGetRestResource.php” and place the file in the “resource” folder.

We’re using the “GET” method in the template, in which we define our logic in the form of code to define what output is required. As an example- we require all the existing terms title with their respective IDs for “vb (machine name of Vb Test)” taxonomy for currently logged user.

Step 5: We have created a “Vb Test” taxonomy and added two terms in that.

Step 6: Now let's first enable Drupal REST API which is provided by core itself.

Our module will be dependent upon the Rest and Rest UI module. The Rest UI module can be installed using this command:

“composer require 'drupal/restui:^1.20'”

After installing the RestUI module, enable both the modules and follow the snapshots attached to configure REST API.

Step 7: Let’s enable our custom module now.

Step 8: After enabling the custom module, enable custom rest resource.

For enabling custom rest resource, follow these steps:-



1. Go to “/admin/config/services/rest”.

2. Search for our custom rest resource using the id that we have created in the resource file. Here it is “Custom Get Rest Resource”

3. Enable the custom rest resource and do the following configuration. Hit “Save Configuration”.

4. Now go to “/vb-rest?_format=json” and the URL will result in a Taxonomy term list containing Term ID and title.

So we have seen REST can be used as a type of data transfer which is built, based on the architecture of the HTTP protocols. It helps us to easily send and retrieve data between two or more different services using XML or JSON. RESTful web services are loosely coupled and are lightweight web services. These are particularly used for creating APIs for clients spread across the web.

Future-Proof with Drupal 10: Migrate Today!

 

While the traditional sectors in India are still reeling under the effects of COVID-19 pandemic, the country is rewriting the tech start-up story. Until the end of June 2021, there were 16 unicorns with funding primarily from US-based investment firms. India is becoming the largest and fastest growing tech start-up ecosystem. As we write, there are as many as 60 unicorn start-ups (start-ups with valuation of more than $1 billion). The tech start-ups seem to be taking a center stage in the Indian unicorn ecosystem, where the growth is visible exponentially.

Valuebound takes pride in having on-board three strongly funded start-ups

Past few months have been extremely fruitful for Valuebound, as we play a significant role in the  growth story with three strongly funded start-ups in the product engineering space.

The Chief Operating Officer of Valuebound, Abhijit Upadhyay in the all-hands meeting on August 21, 2021 said, “We’re going big, and are growing at a steady pace as we re-engineer the DNA of our organization.”

Valuebound is missing no opportunity to hop onto the bandwagon of India's digital economy, which is growing strong on the foundation of digital infrastructure. Rising number of tech start-ups, super apps, affordable data costs and heavy smartphone penetration- are the reasons that are giving impetus to the country's digital consumption.

Tech start-ups growing in mobile-first India ecology

Nasscom, the apex body of the IT industry in India had earlier predicted that by the end of this year, there will be 50 unicorns in India. The country is now standing at 60+. The list is expected to grow further as the focus remains largely on digital access and internet where India zooms in on the mobile-first country model.

Prabhu Ram, the Head-Industry Intelligence Group (IIG), CMR says that this is the golden age for the internet startup ecosystem, and the IPOs have already signaled the arrival of this time.
 

High availability and scalability are the two most desired traits of modern enterprise level applications. By implementing the following architecture for running Drupal instances with AWS EFS and RDS, we will be inherently benefited by AWS highly available infrastructure and on-demand scaling of the application resources.

Drupal 8 is used to manage the creation and modification of digital content. It is considered as one of the world's favorite open source content management platforms. You can read about popular and well-established use cases by Drupal here - https://www.drupal.com/showcases

The recommended way to install Drupal 8 is using Composer. This blog post will guide you through the steps needed to install Drupal 8 on an AWS EC2 instance, using RDS MySQL database and EFS as the file system.

Prerequisites

• AWS account is required for the implementation part of this blog.
• Having basic knowledge working with AWS services would be really helpful.

What you will learn

• How to configure AWS EC2
• Install LAMP Stack on EC2
• Create and Configure AWS RDS MySQL
• Create and configure EFS
• Install and configure Drupal 8 using the recommended installation method
• Configuring each individual service to work together

Drupal 8 Requirements

• MySQL 5.6.34 or higher
• Apache 2.x
• PHP 7.4

For more detailed requirements please visit https://www.drupal.org/docs/8/system-requirements

Let’s take a look into configuration and installation of Drupal on AWS in this step by step guide -

1. Creating The AWS RDS MySQL Database

• Search for RDS service in amazon console search bar
  
  
  
  
  
   
• Click on “Create Database” after going to the AWS RDS service page
  
  
  
  
  
   
• Select the “Standard Create” option under the section “Choose a database creation method info.”
• Pick engine option as “MySQL” & select MySQL 5.6.34 or above for DB Engine version
• If you want to keep things less expensive, make sure to go with below mentioned options:
  • Templates  →  Free Tier
  • Storage    →   Uncheck Enable storage autoscaling
    
    
    
    
    
     
  • Additional configuration   →   Uncheck Enable automated backups
    
    
    
    
    
     
• Use string “drupalvb” as instance identifier value along with the username and password.
• Make sure to give “Public accessibility” as “Yes”. This enables our newly created EC2 instance to access the database from the same VPC or also from a different VPC.
• Rest of the settings remain as default, and you can now finish creating the database.
  
  
  
  

2. Creation of EFS

• Search for EFS in amazon console search bar
  
  
  
  
  
   
• Go to EFS service and click “Create file system”
  
  
  
  
  
   
• After clicking on “Create file system“, a pop-up like below will appear
  
  
  
  
  
   
• Fill up the details in the fields referencing the above image; then click “Customize”
• In order to make it less expensive, we can opt for following options while customization:
  • Uncheck “Enable automatic backups” under Automatic backups
  • Set Transition into IA to “None” under Lifecycle management
  • Uncheck “Enable encryption of data at rest” under Encryption
• Keep the rest of the settings as default and finish creating the EFS.

3. Creating the EC2 Instance

• Search for EC2 in amazon console search bar
• Select “Amazon Linux AMI 2” as displayed below
  
  
  
  
  
   
• To make it less expensive, you can opt for free tier eligible EC2 instance type t2.micro
• Name the Security group “drupalvb-sg” as shown in the picture below
  
  
  
  
  
   
• In configure Security Group Settings, add two rules to allow traffic over port 80 and 2049 as above. So we can access EC2 over the public internet and handle EFS.
• Keep the rest of the settings as default and launch the instance.
• You can create a new key pair and download the key or select an existing key.
  
  
  
  

4. Setting up Drupal 8 in EC2

Using EC2 instance endpoint, SSH into the EC2 instance as shown in the image below -

Once successful, it should look like below.

4.1. Mounting the EFS on EC2 instance

• Get the security group details of the EC2 instance which we created earlier.
  
  
  
  
  
   
• Attach this EC2 Security Group to EFS under Network access as below -
  
  
  
  
  
   
• Adding this EC2 security group will give us permission to mount EFS to our EC2 instance.

• Complete the mounting operation of EFS drive with following commands - 

• sudo mkdir -p /dev/mnt/efs
  sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,noresvport 172.31.0.8:/ /dev/mnt/efs
  

  [Replace “172.31.0.8:/” with IP address of your EFS drive]
  
  [“/dev/mnt/efs” Here you will be using the location wherever you want your EFS drive to be mounted]

  sudo chmod 777 -R /dev/mnt/efs/
  

• Mounted EFS file system details can be seen with following command -

  sudo df -T 
  

  

4.2. Installing required packages

• PHP 7.4 (Recommended for Drupal 8)
• Apache 2.4 (Required for Drupal 8)
• MySQL (To verify DB Access)
• Git (Required by Composer to install and update drupal project)

Use the following set of commands to install all of the above:

sudo amazon-linux-extras enable php7.4
sudo yum clean metadata
sudo yum install php
php-{pear,cgi,common,curl,mbstring,gd,mysqlnd,gettext,bcmath,json,xml,fpm,intl,zip,imap} mysql git
sudo systemctl is-enabled httpd
sudo systemctl enable httpd
sudo systemctl is-enabled httpd
sudo systemctl start httpd

After running above commands,  while accessing your server in web-browser with your EC2 Instance, public IP address will display following webpage - 

4.3. Installing PHP Composer

Run the following commands. For more information or help go to this link.

php -r “copy(‘https://getcomposer.org/installer', ‘composer-setup.php’);”
php composer-setup.php
php -r “unlink(‘composer-setup.php’);”
sudo mv composer.phar /usr/local/bin/composer

If everything goes as per the guide, and is successful, the command composer should show us the composer help.

4.4. Installing Drupal 8

We should install Drupal 8 inside a previously mounted EFS drive. Run below command to change into the directory

cd /dev/mnt/efs/

For installing Drupal 8 inside directory “drupalvb” under “/dev/mnt/efs” via composer run following command:

sudo /usr/local/bin/composer create-project drupal-composer/drupal-project:8.x-dev drupalvb --no-interaction

If the process is completed without any interruption, you will see the screen as displayed above in the images, and a new directory with the name “drupalvb” will be created as we have passed this name while using composer to install drupal 8

To provide read, write and execute permission to the downloaded “drupalvb” directory, run the following command:

sudo chmod 777 -R drupalvb

There’s a requirement for Apache “rewrite url” to be enabled for Drupal 8, and the Document Root directory also needs to be changed.

To complete this step, open “httpd.conf” file using following command and follow further instructions :

sudo nano /etc/httpd/conf/httpd.conf

Change AllowOverride “None” to AllowOverride “All ” in block “<Directory “/var/www/html”>”

Change \\<Directory “var/www/html”>\\ to \\<Directory “/dev/mnt/efs/drupalvb/web”>\\

Change \\DocumentRoot “/var/www/html”\\  to \\DocumentRoot “/dev/mnt/efs/drupalvb/web”\\

5. Allow access to EC2 instance for RDS MySQL database

• Copy the ‘Group ID’ from EC2 instance security group as displayed below 
  
  
  
  
  
   
• Go to the AWS RDS MySQL Security group and add the following rule to allow “All Traffic” from EC2 security. Make sure that the ‘Group ID’ is copied, and pasted as shown in the image below. After this step, click ‘Save’.
  
  
  
  
  
   

• To verify EC2 instances have access to the MySQL database, execute the following command in the SSH command shell.

  mysql -h  -u  -p

• A prompt to enter the password will come up. After entering the password, you should be able to query databases as follows.

  show databases;

  

6. Launching the Drupal 8 install wizard

Now that most of the components are properly setup, we can continue to access our Drupal 8 endpoint which will automatically trigger the installation wizard.

• Get the public IP address of your instance and open it into a browser in a new window to initiate the process further.
  
  
  
  
  
   
• Choose language and click “Save and continue”
• Select “Standard” from Installation profile, and click on “Save and Continue.”
• In Database configuration select, “MySQL,MariaDB, Percona Server, or equivalent”
• For the  reference purpose, have a look at the below image -
  
  
  
  
  
   
• After filling up the required details click “Save and continue”
  
  
  
  
  
   
• Following the process, you should be able to see this progress bar on next step completed.
  
  
  
  
  
   
• Finally you have your Drupal Site up and running on AWS infrastructure with RDS and EFS.

We have completed the step by step process of installing Drupal 8 on AWS cloud.

As custodian of the people function, it is crucial for Valuebound to align our people offering with the core values of the organization and the business objectives. While empathy, excellence and continuous learning will be the guiding principles in our objectives. As an organisation  propelled for exponential growth both in terms of numbers and technology footprint, it becomes crucial that our people's practices are consistent and there is a continuous feedback mechanism that aids systemic corrections in a timely fashion. VB360, our homegrown product directly impacts our employees, and can be used like any other interactive media and performance management system. VB360 is a Drupal 8 application and enables employees to remain in correspondence with one another.

While we have spent the first quarter of 2021 streamlining some key process that directly impact employees’ professional life at Valuebound like reward and recognition program, performance management and learning made rewarding, we are also focussed on creating employee centric experiences beyond work space with programs like Speed mentoring with manager, team huddles , focus group with HR. These are some initiatives that help us stay connected with our teams beyond work and help recreate the bonding of in-person interactions. Valuebound remains solidly focussed on employees’ personal-professional prepositions by bringing in that equilibrium at the workplace.

VB360 is our indigenous HRMS product. Our team stitched together the fabric of most popular HRMS modules, i.e.- Core HR, onboarding, performance management, benefits administration, workforce management, learning and development, talent management and HR analytics under one platform to make it easier and smoother for our employees to transition into the ecosystem of Valuebound.

But what stands us out from the league is employee engagement features. We bring in a range of interactive features, which makes VB360 an in-house social interaction portal. It’s like our own LinkedIn, where our employees can post photos, videos and interesting articles for social interaction. The features include ‘Kudos’ which acknowledges out-of-the-box employees. VB360 is our in-house party and work balance.

At the core of VB360 is the quarterly assessment performance management mechanism, which enables employees to set goals before they start. Additionally, it allows managers to track performance, and ensure 100% transparency and accountability. The product enables continuous feedback mechanism, which makes it possible for our employees to chart a successful career journey.

In context with this, our HR Head, Sunilee Kallianpur says, “VB360 is a goal setting idea of Valuebound’s leadership team. The product is a work-in-progress, and has allowed our firm to change the way we assess performance. It has also made the appraisal process more transparent.” Further she adds, “VB360 is more about a mindset change, than anything else. It helps our people in having clear conversations.”

VB 360 consists of Valuebound’s vision and people-centric approach. The product is a successful collaborative team effort; and yet an in-progress tool that helps our employees adapt to a new performance management system.
 

The pulse survey was conducted in Valuebound in August 2021. Each company comes with its own values and culture, which helps in shaping the ecosystem of an organization. How does work get done, how employee interaction takes place, and how involved and inclusive do they feel in an organization- are some of the questions which sit on the foundation of organization’s habits, beliefs, system, values and vision. How does an organization ensure authentic and positive culture, nevertheless?

Proactive approach in ensuring employee inclusiveness where they feel that their voice is being heard, is an ideal state that resembles the thoughtful effort of a firm. Instead of enabling the culture of a firm to develop without guiding principles, there must be a responsibility and opportunity to inculcate a positive work environment. Valuebound’s Pulse Survey is a way for us to promote our listening strategies, and ensure higher employee engagement.

Feedback from employees for higher engagement

While employee feedback is a regular practice in most firms, Valuebound also ensures quarterly conversations by evolving our ongoing listening strategies. By seeking feedback from our employees on the pulse of our organization, drive attendant benefits to build trust between employees and the organization.

Importance of Valuebound’s Pulse Survey

Why does employees’ feedback matter to us? Here are some of the reasons-

• Increases employee engagement
• Helps build trust
• Reduces negative behaviour in the organization
• Helps us understand our strengths and weaknesses
• Enables our employees feel included
• Promotes healthy discussions

Trends observed with Pulse Survey August 2021

Our previous Pulse Survey was conducted in April  2021. As compared with the previous survey, here are the trends observed-

• Organization has improved significantly in the diversity and inclusion area
• Participants have been open to voicing their opinions on areas they would like to see improvement on.
• Percentage of positive response to all questions asked in previous pulse has increased, especially on brand association (Employee Referral) and employee sentiment (Organization Cares).
• Questions pertaining to organisation culture and communication of new initiatives have received high positive responses.
• Career conversations with managers is an area of improvement.
• Process automation, internal communication and performance evaluation mechanisms are aspects that can be improved upon.

As many as 92% of the respondents feel that Valuebound cares about its people; a sharp increase from 78% in April 2021.  Among our respondents, 89% strongly agree/ agree that they have adequate professional growth opportunities in Valuebound. Our organization has remained people-centric, and hence the policies and procedures are designed with employees in mind, to which 87% of the respondents agreed. The Pulse Survey underscored that Valuebound has a positive and engaging work culture, which 94% of the employees strongly agree/agree with.

Pulse Survey allows our leadership to get constructive feedback from employees, while also allowing us to adapt more successful behaviours and actions. Through this survey, we aim to help employees open up and voice out concerns that they might have, while also ensuring anonymity. Hence, pulse survey is our launching pad for ensuring success by discussing changes and reinforcing the positive traits.
 

After completing the interview process, a few interns were selected to be a part of Techshala Batch 1 summer internship. Valuebound moves with the pace of scenario in the country, and hence a year ago we had declared to go 100% remote. Like all our employees, the interns are working remotely due to the pandemic.

As our Techshala interns are about to graduate after three months of internship, we take pride in explaining the lessons they’ve put to use in recently created digital experience for one of the clients.

Creating dynamic web experience with Angular & Drupal

Veterans web developers call it a perfect duo. When used in unison, Angular and Drupal can help in creating enriching and dynamic web experience. It’s a match that becomes one of the finest web development strategies. The cloud of digital possibilities has burst and digitalization is not an elitist concept.  Democratization of technology has enabled businesses to adapt to digitalization seamlessly.
While Drupal has already proved its prowess as one of the best CMS frameworks, Angular needs a little credit here. To explain the headless architecture that our interns built for this client, let’s see a case study.

The headless architecture: Integrating Drupal 8 with Angular 12

Drupal comes as one of the finest CMS for managing data and content. But since there has been an increase in channel numbers, front-end interactions, and API access points, there has also been a rising demand for better user experience. The older CMS structures seem insufficient to offer the ambitious digital experience that is in demand today. Headless Drupal or decoupled websites is the answer. Integration of Drupal 8 for backend and Angular 12 for frontend interactions works well in our recent case.

CASE STUDY for Nutrition Advisor Client: VB partnered with Biomarked to give impetus to their growth plans. Our hi-pot interns were given an opportunity to design and build a lifestyle app that focuses on nutrition and wellness. The client is a passionate nutritional advisor unified towards helping people recover from lifestyle disorders (Obesity, Diabetes Type 2, Fatty Liver, Thyroid).

Our interns worked on a recent project for one of the clients, a family of passionate nutritional advisors unified towards helping people recover from lifestyle disorders. The client needed a mobile friendly web app that offered customer management modules, POS front end, and interaction, among other functionalities.

Project: Interns integrated Drupal 8 and Angular 12 for creating an application that client needed. The interns implemented Angular 12 for API-based communication, developed over Drupal 8. This seemed to be the best web development strategy so as to enable clients to help with their multiple access points and channels.

Angular 12 : The Superhero of Interesting Web Development Strategy

Angular 12 is the new update from TypeScript-based web framework of Google. Our interns were proactive to pick the recently released update and use it in the latest project. Among a range of enhancements, this TypeScript-based open-source web application framework offered following benefits in developing client’s site-

Great Tooling- Angular 12 offers declarative templates which are simple to use. Our interns used template language with their own components, among the existing ones to create a great demo for the client.

High Speed and control over scalability- Using Angular 12 gives a higher control over scalability. It offers maximum speed on web platforms, which can be taken ahead with server-side rendering and web workers. Since the client has huge data requirements, Angular 12 is the right answer. The interns built data models on RxJS libraries.

Cross-platform use- The basic requirement of our client was development of a site that could be accessed across different platforms. Angular 12 enabled our interns to reuse code and abilities for creating apps for deployment targets. This app is usable across mobile web, native desktop, native mobile, and for web.

Decoupled Drupal: Headless Drupal for faster and richer UX

Drupal websites are excellent for multi-tasking functionalities. Drupal can ideally manage full-stack, i.e., front end content rendering, and back end content management. It can deliver seamless content in diverse interfaces.

Decoupled Drupal architecture for the client site allows for speed improvement since user requests need not be processed from server all the time. Technically, decoupled Drupal websites can present data in HTTP/JSON formats. Powerful frontend framework renders the data, which helps in delivering web pages faster.

Drupal-Angular Merger for a power packed performance

A basic Drupal website doesn’t need a lot of development or coding function, and Angular can help in creating rich interactive websites without complex coding. Since Angular uses HTML for user interface definitions, and directives, which helps in writing lesser codes. Angular 12 when merged with Drupal 8 created a highly interactive client site.

Taking pride in Techshala Interns

Valuebound takes pride in its future-ready interns who aren’t just college pass-outs, but professionals who can compete in the real world. Bracing their skills and leveling up with Valuebound culture, our interns at Techshala (the Valuebound University), are geared up for new competency areas. Successful web application development of the client is an impressive representation of their skills and meticulous art.