DEV Community: Dmitry Kulagin

How to Create a Mobile App for eCommerce from Scratch?

Dmitry Kulagin — Mon, 07 Aug 2023 08:48:20 +0000

In the highly competitive world of eCommerce, having an exceptional mobile app is crucial for achieving success. With industry behemoths such as Amazon and Alibaba reigning supreme in the online retail arena, new enterprises must discover their unique advantage. But the challenge lies in creating an eCommerce mobile app that not only stands out but is also budget-friendly.

This article will take you through the journey of crafting a stylish and intuitive mobile eCommerce app. The core nopCommerce team shares their insights by delving into essential aspects like key functionalities, technology stack, design, and architecture, using their own mobile app development as a real-life example.

7 steps to create an eCommerce app for your existing website

The primary objective is to break down mobile app development into easily comprehensible steps. This guide should answer the question “how to create a mobile app for eCommerce?”, considering time and money expenses.

It aims to be helpful for developers seeking to replicate the process or gain insider perspectives on the nopCommerce development experience.

Step 1: Laying the foundation with research

Before embarking on the exciting journey of developing your mobile eCommerce app, it is essential to establish a solid foundation through competitor analysis and market research. This step will analyze successful industry strategies and potential opportunities for your app to flourish.

Analyzing the competition: Start with identifying both direct and indirect competitors in the mobile eCommerce space. Thoroughly examine their app features, user experience, pricing strategies, marketing tactics, and customer feedback. This analysis will highlight their strengths and weaknesses, paving the way for your app to showcase its distinctive advantages.
Researching market trends: Stay abreast of ever-changing consumer preferences, emerging technologies, and the latest essential features expected from an eCommerce app. Armed with this knowledge, you will be well-prepared to align your app with evolving user needs and expectations, positioning yourself ahead of the competition.
Understanding your target audience: Gain a deep understanding of your users' demographics, preferences, and pain points. This information will empower you to customize your app to cater to their specific needs, delivering a personalized and delightful user experience.
Establishing measurable goals: Consider objectives such as increasing sales, enhancing customer engagement, boosting conversion rates, or expanding your customer base. These goals will provide a tangible framework to evaluate the app's performance and achievements.
Prioritizing user-centric features: Focus on core functionalities that add value to users and align with your unique selling proposition. Key features, including a user-friendly interface, seamless navigation, secure payment options, efficient product search capabilities, and personalized recommendations, should take precedence.
Future-proofing your app: Plan for scalability and growth by ensuring that your app's architecture and infrastructure can handle increasing user traffic, seamlessly incorporate new features, and integrate with third-party systems like payment gateways and inventory management.

As you embark on this journey, keep in mind that adopting a user-friendly and professional approach during the development process will pave the way for a successful and captivating mobile eCommerce app. Such an app is poised to leave a lasting impression on your target audience, ensuring a rewarding and memorable user experience.

Step 2: Selecting the proper technology stack

To create an eCommerce app, one of the most crucial decisions for a developer's team is selecting the appropriate platform/framework as the foundation. While technical factors play a significant role, it is equally essential to take into account the project's distinct business requirements.

The primary consideration revolves around choosing between native app development and a cross-platform approach.

Native application: Developing separate native apps for Android and iOS requires dedicated teams for each platform, leading to extended development time and subsequent updates. This approach is best suited for large-scale enterprises with sufficient resources to support two teams working on Swift (iOS) and Kotlin (Android) development. Despite higher costs, the end result is an application well-optimized and tailor-made for each platform.
Cross-platform approach: Conversely, the cross-platform approach employs a single codebase that functions on both Android and iOS devices. This option is more cost-effective and time-efficient, potentially saving up to 50% of a company's resources. While cross-platform apps may experience slight delays in adopting new features compared to native apps, most eCommerce functionalities can be covered using third-party libraries and plugins. This approach enables a quicker time to market without compromising on functionality.

If you opt for the cross-platform route, several frameworks like React Native, Ionic, and Flutter are worth considering. For the nopCommerce mobile app, our team engaged in comprehensive discussions before ultimately choosing Flutter.

Here are some compelling reasons for selecting Flutter, which can help you lean towards this framework if you are still grappling with the decision:

a. Easy learning curve and technical maturity: Flutter provides a user-friendly learning curve and has reached a high level of technical maturity, enabling developers to quickly master the framework.

b. Seamless integration with code editors: Flutter seamlessly integrates with popular code editors like VSCode, widely used among .NET developers. This integration simplifies coding, debugging, viewing the widget tree, and analyzing memory leaks, greatly enhancing the development experience.

c. Instant hot reload feature: Flutter's hot reload feature allows developers to instantly view changes made to the code within the app. This significantly speeds up the development process compared to native app development, where the build process can be time-consuming.

d. Exceptional performance: Flutter boasts lightning-fast performance, delivering 60 FPS. This empowers developers to create mobile applications that rival native ones in terms of performance, even when using Swift and Kotlin.

Through a careful evaluation of business requirements, time to market, and development resources, the nopCommerce team opted for Flutter. This decision enabled us to create a flexible and fully-functional product in a shorter timeframe while enjoying the benefits of a well-rounded development environment.

Step 3: Building a stable and scalable architecture

When embarking on the journey of creating an eCommerce app from scratch, the right architecture becomes paramount. The chosen architecture not only influences the initial development process but also plays a significant role in the project's scalability, code structure, and the coordination within the team.

To ensure a maintainable and scalable codebase, we initially followed generally accepted standards as outlined in the Android documentation. However, when dealing with Flutter, we faced a challenge as the standard architecture did not fully account for its unique characteristics.

As a result, we made necessary modifications and introduced an additional level, achieving a well-organized and efficient architecture tailored to our app's specific needs.

UI Layer: At this level, the focus lies on managing the user interface components and their interactions. It encompasses widgets and logic directly related to the app's user interface.
Domain Layer: The domain layer is dedicated to housing the application's essential business logic, effectively isolating it from the UI layer. It comprises controllers and business logic objects responsible for handling core functionalities.
Data Layer: Within the data layer, the primary emphasis is on data access and management. This involves repositories and data sources responsible for handling data retrieval and storage operations.

To customize the architecture for Flutter, we introduced the Riverpod library for state management and dependency injection, resulting in a modified structure as outlined below:

UI Layer: This level remains unchanged and encompasses UI components along with their interactions with the user. It relies on widgets and UI-related logic to manage the user interface.
Application Layer: In our revised architecture, the Application layer takes on a role similar to that of the original Domain layer in the Android architecture. It houses service classes responsible for defining methods used by controllers. This becomes especially valuable when multiple widgets manage the same logic or when logic depends on multiple repositories. However, it's important to note that the Application layer might not always be necessary. In some cases, controllers can directly request data from repositories without the intermediary Application layer. If the services merely redirect method calls from controllers to the repository, the Application layer might not be required.
Domain Layer: In the updated architecture, this level corresponds to domain models that can be modified by services at the Application layer and filled with data from repositories at the Data layer. These models are applied to the business logic objects accessed through repositories.

By reorganizing the architecture to suit Flutter's unique requirements and integrating Riverpod, we achieved a structure that not only promotes code maintainability and scalability but also enhances team collaboration. The domain-specific modifications enabled a seamless development process while ensuring that the app remains adaptable to future expansions and enhancements.

Step 4: Designing a user-friendly interface

One of the key factors that led us to choose Flutter for the nopCommerce mobile app was its extensive widget library, providing a significant advantage. Leveraging this powerful library made the creation of a user-friendly interface exceptionally efficient. Flutter's unique rendering engine, Impeller, ensures consistent visual appeal across all devices, further enhancing the user experience.

For the design of the nopCommerce app, we based our approach on Material 3 (also known as Material You), Google's latest design system version. Material 3 introduced refreshed component renderings, captivating animations, and fresh color palettes that seamlessly integrate with Flutter.

To maintain a cohesive and consistent appearance across devices, we harnessed the potential of design tokens offered by Material 3. These tokens allowed us to store styles, fonts, and animation values, ensuring the same style values were used in both design files and code.

Our primary goal was to create an eCommerce app with a unified visual identity across various devices, delivering a seamless and immersive experience to users. Design tokens played a crucial role in achieving this objective.

To generate design tokens, we utilized the Material Theme Builder, which automatically created a theme with default colors and styles. Building upon this foundation, we crafted a custom theme tailored to the nopCommerce app's branding and specific requirements.

When determining brand colors, we had two options:

Manual Specification: The first option involved manually specifying base colors to align with the brand's identity and desired visual aesthetics.
Dynamic Colors: Alternatively, we experimented with dynamic colors, wherein the app selects a color scheme based on provided images, such as the company's logo. This dynamic approach added a touch of uniqueness to the app's visuals, adapting to the brand's distinct characteristics.

Embracing the concept of Material You, the implementation of design tokens empowered us to generate a comprehensive palette of styles, ensuring consistent visual coherence across the entire app. Additionally, these design tokens offered the flexibility for personalized tweaks and adjustments, allowing to maintain a unique and tailored app design.

A noteworthy advantage of design tokens lies in their inherent flexibility and versatility. This allowed the nopCommerce app to seamlessly adapt to various application modes, such as Dark mode and Light mode, without sacrificing style or compromising the user experience.

The utilization of design tokens offers several key benefits:

Streamlined Design and Development: Design tokens eliminate the need to delve into platform-specific design guides. By applying Material 3 to both design and development, time and effort are saved, resulting in a more efficient workflow.
Quick Redesign Capabilities: If there arises a need to revamp the app's design, design tokens facilitate a remarkably efficient process, allowing for swift updates and changes to be made seamlessly.
Easy Style Maintenance: Design tokens simplify the maintenance of styles, making it hassle-free to update and manage the app's visual elements, ensuring consistency and coherence.

With these strategies in place, the creation of a visually appealing eCommerce app on any device became a seamless and rewarding process. Our choice of Flutter and Material 3, coupled with the implementation of design tokens, ensured a visually cohesive and delightful user interface for the nopCommerce mobile app.

Step 5: Ensuring high-level security

In the nopCommerce mobile app, ensuring the security of transmitted data is of utmost importance, achieved through the implementation of Bearer tokens. These tokens are exclusively issued to authorized users and play a vital role in establishing secure communication between the client (mobile application) and the server.

Bearer tokens serve as a robust mechanism for both authentication and authorization, granting clients access to protected resources on the server side. In the event of a security concern, the server-side token can be revoked, prompting the client to go through the authorization procedure once again to obtain a new token. This stringent approach guarantees that only authenticated users have access to sensitive data, bolstering the overall security of the application.

Equally crucial is the secure storage of tokens on the client side. Since tokens do not require explicit proof of ownership from the bearer, it becomes imperative to safeguard this information effectively. To achieve this, Flutter incorporates secure local storage mechanisms.

Local storage retains user data until the application is uninstalled. The implementation of local storage varies across different mobile operating systems:

Android Security: Android adopts the Advanced Encryption Standard (AES) to secure local storage. The secret key is encrypted using the RSA algorithm, and the encrypted key is stored in the KeyStore, ensuring a high level of protection for the tokens.
iOS Security: For iOS, the KeyChain serves as a secure storage mechanism for accessing the application's cryptographic keys, providing a decent level of security for the stored tokens.

By leveraging these secure local storage technologies, our eCommerce mobile app adheres to industry best practices, maintaining the utmost confidentiality of the security tokens. This approach enhances the overall security of the app, user’s data protection and privacy.

Step 6: Automating maintenance and updates

Creating an eCommerce app that requires regular automatic updates calls for an effective solution in establishing a connection with an API. Our mobile app is thoughtfully designed to integrate with the nopCommerce ecosystem, encompassing its CMS, additional extensions, and the official Web API plugin.

For enhanced flexibility and transparency, we have included the Web API plugin within the mobile app package, making the source code readily available.

Interacting with an API can often pose challenges in implementing an access client and keeping it up to date. However, we have streamlined this process to simplify adaptation to changes in the API.

To achieve this, we ensure that our API adheres to the OpenAPI 3 specification, enabling us to store a comprehensive description of the API in JSON format. By leveraging the OpenAPI Generator, we efficiently generate a client in the required language, which, in our case, is Dart for Flutter, using the dart-dio Generator. This approach ensures smooth and efficient communication with the API, facilitating regular updates and seamless integration with the nopCommerce platform.

The API connection in Flutter is established by integrating the generated client as a package within the app. This setup grants access to all the methods supported by the API, and incorporating these methods into the repositories enables us to leverage their functionality seamlessly within the app.

When modifications occur in the API methods, such as changes in their signature or structural adjustments, rebuilding the client becomes a straightforward process. This ensures seamless updates and guarantees that the mobile app operates smoothly.

In addition to the "Web API Frontend" plugin, the "nopCommerce mobile app" plugin allows users to manage specific application settings directly from the admin panel of their nopCommerce webshop. For example, administrators can configure a slider on the main screen to showcase selected products or transfer certain settings to the mobile application. This plugin empowers users with more control and customization options.

Step 7: Testing and assessing performance

Our main objective revolved around evaluating the speed and efficiency of the advertising slider rendering with animation. To accomplish this, we utilized the GameBench automation interface tool to monitor critical metrics like memory consumption, FPS, and CPU load.

For the purpose of testing, we created an identical interface natively on an Android device using both React Native and Flutter. To ensure consistent conditions, we standardized the test duration and employed image caching libraries in each language. This setup enabled us to conduct fair and accurate comparisons between React Native and Flutter.

The performance testing results are outlined below, where lower values indicate better performance:

FPS: Across all cases, the FPS values were nearly identical, indicating that Flutter's declared capabilities align closely with its real performance indicators.
Memory Consumption: While Flutter required twice as much memory as native applications, it remained more efficient than React Native, which experienced greater fluctuations in memory usage.
CPU Load: React Native showed noticeable disparities in CPU load, primarily due to the utilization of a JS Bridge between JavaScript and Native code. In contrast, Flutter demonstrated more stable CPU performance.

Although native Android apps demonstrated better battery consumption optimization, Flutter's stable performance and efficiency made it a strong runner-up in this aspect.
It is essential to acknowledge that this comparison reveals significant differences in the performance characteristics of these approaches. However, while performance is crucial, it is not the sole determinant in eCommerce mobile app development. Other factors like development speed, user experience, and overall app functionality also play pivotal roles in the final decision-making process.

Wrapping Up

If you're looking for guidance on how to create an eCommerce app for your online store, our comprehensive guide covers all the essential steps taken during the development process, offering valuable insights into creating the final product.

Alternatively, you have the option to use our ready-made nopCommerce mobile app, complete with its source code, which you can easily customize to align with your business needs.

Stay tuned for future updates as we continuously enhance our mobile app, adding even more value and functionality. Be sure to explore our detailed mobile app documentation for additional support and information. We are committed to providing the best possible experience to our users.

The best 5 auto parts eCommerce platforms

Dmitry Kulagin — Wed, 15 Feb 2023 18:59:15 +0000

The automotive market has changed over the past 20 years as an outcome of a rise in online auto sales, due to the impact of automotive marketplaces.

The market for online car parts in North America reached $26 billion in 2021, an increase of more than 30% from 2020. Furthermore, the percentage of US consumers who purchase cars online nearly increased from 32% to 61%. The COVID-19 pandemic's consequences and ongoing investments in eCommerce make this an excellent moment for business owners to start an online auto parts store.

Automotive businesses embrace a more omnichannel approach, allowing customers to research and buy products through both physical and digital channels. Similar to many other digital commerce sectors, companies create or redesign their online auto parts stores using eCommerce platforms.

Therefore, auto parts eCommerce store owners are recommended to choose the best auto parts eCommerce platform that enables them to cover all business requirements and to seamlessly scale a business.

To understand what eCommerce platform is the one that fits your automotive online store, we have put together an overview of the 5 most commonly-used auto parts eCommerce platforms. Before we dive deep into discussing their pros and cons of them, we will look at features that are essential for an eCommerce platform to provide.

Features that make auto parts eCommerce store outstanding

Your auto parts online store may offer a wide range of functionality, depending on the company strategy and customer requirements. However, there are a few key features you should consider when choosing an eCommerce platform:

Robust auto parts filtering

When looking for auto parts, various types of customers rely on different criteria. The most usable parameter:

YMM search (Year-Make-Model) enables customers to find required parts based on their vehicle model;
VIN search (vehicle identification number) may help your auto parts website visitors look for spare parts that match specific batch produced at a particular plant;
Manufacturer filter allows you to link many items under one brand and look for related items by brand. It may also help for cross- and up-sells since merchants can create manufacturer profiles and product suggestions.

Finally, you may provide other specifications for advanced searching by including custom fields from pre-filled product characteristics.

Product description automation

With a chosen eCommerce platform, you should be able to work with product data without losses. Therefore, checking if preferred PIM, CRM, or other systems can be seamlessly integrated is recommended.

As most auto parts are complex, an eCommerce platform has to allow adding guidance and instructions to a product page. In addition, custom product attributes should be allowed to be created since they provide customers the ability to filter products by various parameters.

There are buyers who require sets of auto parts for certain vehicle systems. So creating product combinations or kits has to be enabled on an eCommerce platform.

Integrations with other online selling platforms and marketplaces

With a chosen eCommerce software automotive businesses should be able to support dropshipping, as it can help distributors and retailers. Moreover, it can be valuable for a business if merchants can integrate their auto parts online store with popular marketplaces, like eBay, Amazon, Google Shopping, and other selling platforms.

The list of top 5 automotive eCommerce platforms

Many numerous options for auto parts eCommerce software are presented now and most of them provide similar functionalities. However, there are 5 automotive eCommerce platforms that have advanced features and are leaders in the automotive sector.

nopCommerce

The scalable automotive eCommerce platform, nopCommerce, is free and open-source software. This solution helps auto parts sellers to market their products effectively. nopCommerce is the most recognizable ASP.NET eCommerce platform having a large community of over 250’000 members.

The automotive business, especially Enterprise-level one, usually deals and manages with an enormous number of SKUs. It is not a challenge for eCommerce stores that are powered by nopCommerce, this platform can be easily integrated with inventory and information management systems. Moreover, the nopCommerce software provides a high-level customer experience thanks to YMM, VIN, and other types of searches.

Here is the list of other features that enable auto parts store owners to sell online more effortlessly:

popular payment and shipping methods and providers are available out-of-the-box and on the Marketplace;
automation of routine processes (tax management, operational and marketing notifications, etc.);
multi-store and multi-vendor functionalities;
innovative SEO features.

The nopCommerce platform is powerful and scalable, however, it requires technical skills to install and deploy an eCommerce store. Moreover, choosing a hosting option for an online store can be challenging but there are hosting partners that are cost- and data-effective. nopCommerce has a collaboration with Everleap that helps improve website performance by deploying an eCommerce store on a custom fully managed private cloud hosting solution.

Magento (Adobe Commerce)

Acquired by Adobe, Magento is a free open-source auto parts eCommerce platform with broad functionality. There is also a self-hosted version, Adobe Commerce, that has two packages: “Commerce Pro” and more advanced “Managed Services”.

Because of Magento’s open-source nature, most of the components of an eCommerce store powered by this platform may be customized, provided you have the necessary expertise. Magento has many features that enable merchants to effectively sell auto parts:

ability to integrate with many auto parts databases;
“fit my car” searching tools;
mobile-friendly interface and payment systems.

You can also install new features and extensions from the Magento Marketplace.

Although Magento may seem an appropriate platform with many features, it has a complicated setup process. Without the assistance of a developer, merchants are unlikely to set up their Magento-powered websites. Moreover, another issue of this eCommerce platform is website performance, which heavily relies on a chosen hosting solution.

BigCommerce

Small auto parts eCommerce firms can benefit from using BigCommerce, a SaaS solution. The BigCommerce platform is available to merchants through subscription plans, the least expensive of which is priced at $29.95/month.

First of all, there are a lot of simple drag-and-drop tools and themes available in BigCommerce. An auto parts website may be launched essentially without effort. The aid of web professionals or technical support is unwanted, you can easily construct a website with the help of this SaaS platform. BigCommerce comes with useful features out of the box, like faceted search, multi-store, and bulk pricing.

On the contrary, it is challenging to switch from BigCommerce to another platform because it is a closed, proprietary platform. Merchants are forced to use it unless they want to spend money on expensive data migration. The fact that some features of BigCommerce are only available with higher-tier plans is another drawback. Entry-level plans, for instance, are unable to use the functionality for preserving abandoned carts. Additionally, each plan tier has a sales cap, so a merchant needs to switch to a more advanced subscription plan. Finally, there are very few customization options accessible on the front end and none at all on the back end.

WooCommerce

Compared to other eCommerce website builders, WooCommerce is a WordPress plugin that is free and open-source. Especially for startups and small businesses, WooCommerce is a flexible eCommerce solution that can help create auto parts stores.

If you have the resources, WooCommerce may be altered and personalized greatly. It is based on WordPress, therefore it has some sophisticated blogging and SEO tools. WooCommerce offers a wide variety of premium and free plugins and themes. This eCommerce plugin offers multi-store functionality. Additionally, a WooCommerce single-vendor store might incorporate the multi-vendor feature using external plugins.

Despite the fact that WooCommerce is a free eCommerce plugin, merchants still need to pay for their own web hosting. Furthermore, businesses must set up their own shipping and payment systems. To fully utilize its capabilities, you'll need a lot more technical know-how or money to hire developers. This is especially true if you require a lot of extra features and customization. At last, on WooCommerce, performance issues can be more frequent and more challenging to fix.

Squarespace

Squarespace is a website-building company with “drag-and-drop” tools that enables you to create a website without touching a single piece of code. The platform provides eCommerce functionality with the Basic Commerce plan that starts at $26/month.

Choosing Squarespace for your auto parts eCommerce store can be beneficial for merchants who require an easy website setup, customization, and launch using a drag-and-drop editor. Squarespace also handles hosting, domain names, and other technical things with support for new customers who are setting up their stores. Squarespace provides over 100 templates with the support of mobile devices that you can use.

There are a few useful features included in the Basic Commerce plan:

CSS/JavaScript customizability;
promotional pop-ups and banners;
a variety of eCommerce analytics tools.

In terms of drawbacks, with Squarespace, it can be challenging to accelerate loading times past 3–5 seconds. Poor overall performance could lead to lost sales. Moreover, this software only supports Stripe, PayPal, Afterpay, and ApplePay, which can be constricting if you wish to use another payment processor, especially if you want to sell your products worldwide. You could struggle to place your website content exactly where you want it because of the "content block" architecture used to develop websites, especially if you're an advanced user.

Which platform is the best for a moto and car parts eCommerce store?

The answer to this question is not certain and universal for every auto parts retailer. Automotive eCommerce businesses need to pick software that covers their requirements and enables future growth.

Features, like advanced parts search, product information management, and integrations with marketplaces and selling platforms are pretty much installed or can be integrated into the platforms we have presented in this ranking.

At the same time, nopCommerce powers solutions for auto parts online sellers more effectively, due to out-of-the-box features and great performance. Moreover, it is not only free to use, but your data remains your own and free of proprietary platforms. Finally, it is scalable and enables auto parts merchants to sell an infinite number of products without additional fees.

How to develop and customize a shopping cart based on ASP.NET with nopCommerce

Dmitry Kulagin — Wed, 15 Feb 2023 14:45:09 +0000

An essential component of the online store is the shopping cart. It might also be among the hardest components to create for an eCommerce website. Customers can choose things, evaluate their choices, edit them, add more items if necessary, and then buy the items using a shopping cart. During checkout, the program normally produces an order total that takes into account postage, packing, and handling fees as well as taxes, if applicable.

In the case of nopCommerce, a shopping cart, as well as a wishlist is built-in. If enabled in the admin area, each product can be put into the shopping cart or wishlist. The nopCommerce shopping cart and wishlist can be disabled, the access control list page can be used to configure it. Simply look for the "Enable shopping cart" and "Enable wishlist" permissions for the required customer profiles, and uncheck them.

To learn more about shopping cart functionality, as well as how other components of nopCommerce work, we recommend taking the nopCommerce training course, which has been composed by the core developers team.

Shopping cart structure of the .NET eCommerce platform

To start with, open and look at the shopping cart page. At first, it has a summary view of the order with selected checkout attributes, price, quantity (which can be adjusted), the total for each added item, and a remove button.

Next, a customer can add estimated shipping, as well as select checkout attributes, and enter discount codes and gift cards. Finally, an order is calculated and it is offered to proceed to checkout, where customers enter billing and shipping information and pay.

By the way, the shopping cart related action methods are all placed in the ShoppingCartController from Nop.Web. These methods allow a customer to interact with all page components.

Let’s break down all the main components of the nopCommerce shopping cart functionality. It consists of checkout attributes, discount, and gift card boxes, the totals step, and the checkout process. It is significant to consider a database structure as well.

Checkout attributes

Starting with checkout attributes, they are displayed on the shopping cart page and provide the opportunity to offer more services to customers, i.e. gift wrapping, before placing the order.

Checkout attributes have their own service classes in the Nop.Services.Orders folder and are stored as XML in the CheckoutAttributesXml column of the Order table. They all have almost the same functionality as product attributes.

CheckoutAttributeService class

CheckoutAttributesXml column

Discount box

The next feature of the shopping cart is the discount box. It allows a customer to enter a coupon code to apply a discount to order totals or shipping. The discount feature has its own folder that is located in the Nop.Services section. Any rules and logic of a discount implementation process can be adjusted there.

Talking about the database, the discounts themselves are stored in the Discount table. There are also a few mapping tables that store how the discounts are mapped to products, manufacturers, and categories. The DiscountRequirement table stores the discount requirements determining in which case a discount should be applied. The last table is the DiscountUsageHistory table which stores information about the discounts applied to orders.

Gift card box

The other shopping cart component is the gift card box. A customer should enter the code here to apply a gift card. A gift card is a special type of product. You can mark a product as a gift card on the product details page and sell gift cards that customers can use this way. After customers complete purchases with the gift card products, you can then search and view the list of all the purchased gift cards here.

In case you need to configure gift card functionality, you may use the GiftCardService class, which is located in the Nop.Service.Orders folder.

Considering the database, the gift cards that are manually created or bought as products are stored in the GiftCard table. Once a gift card is used in the order, the appropriate record is inserted into the GiftCardUsageHistory table of the database.

A customer can apply both a discount and a gift card on the shopping cart page.

Totals

The last interesting block on the shopping cart page is the shopping cart totals. They are calculated based on the shopping cart items, applied discounts and taxes, chosen shipping, and payment methods. A total consists of a few rows:

Sub-Total. The subtotal is the total of all items and quantities in the shopping cart, including applied item promotions;
Shipping is the shipping cost calculated based on the customer’s shipping address;
Then, the applied taxes are displayed. nopCommerce provides tax plugins that allow to manually or automatically apply taxes to products;
The payment method additional fee row is self-descriptive. It can be set up on the payment method configuration page;
Then, it displays the applied discounts and gift cards;
The reward points if applied;
And finally comes the order total.

The order totals are calculated in the OrderTotalCalculationService from Nop.Services.Orders. As you can see, it contains such methods as GetShoppingCartShippingTotal, GetTaxTotal, the methods related to reward points, discounts, and others. In its turn, the payment method additional fee is calculated in the payment service of Nop.Services.Payments.

Checkout process

For a more clear view of the whole buying experience, It is important to consider the checkout process. Checkout starts when the customer leaves the shopping cart to proceed to payment and shipping.

nopCommerce provides two types of checkout process design. They are one-page checkout, which is set by default, and checkout with multiple pages. One-page checkout allows a customer to go through the whole checkout process using a single page. You can set this up on the Order settings page. By the way, you can temporarily disable checkout for your customers if needed in the same Checkout section.

A customer goes through the following steps during the checkout process:

A customer needs to enter a billing address;
Then shipping address;
Then, they need to choose a shipping method;
And a payment method;
Then, we show the required payment information to the customer;
And finally, it’s the confirmation step where the customer confirms the order.

There are more conditions that impact the number of checkout steps. They can be adjusted in the Order settings.

All the action methods related to the checkout process are placed in the CheckoutController. As you can see, this controller has separate regions: for the multistep checkout and one-page checkout. Multistep checkout methods return views, while one-page checkout methods return JSON as a result. There is no separate service that manages the checkout process. All work is done in the controller.

Database operation of the ASP.NET shopping cart

In nopCommerce, a shopping cart and a wishlist both have the same structure. For more understanding, it is better to look at the database. In the ShoppingCartItem table, both shopping cart and wishlist items are stored together. However, they are distinguished by ShoppingCartTypeId.

Moreover, looking at the “Domain – Orders” folder, there could be seen ShoppingCartType enumeration that provides two types: ShoppingCart and Wishlist with appropriate numeric values. These are the values that are stored in the ShoppingCartTypeId column in the database. This is the only difference between a shopping cart and a wishlist in the database terms;

The other fields represent the customer identifier as a foreign key. It is an ID of a customer that has added this item to the shopping cart. Also, there is ProductId that identifies which product has been added to the cart, which is followed by StoreId representing the store of that product. Further, ShoppingCartTypeId that we already discussed determines whether the customer has added this item to the shopping cart or wishlist.

Then comes the AttributesXml column. This column stores the product configuration added to the cart with all attributes chosen by a customer. Here is the process of how this XML works:

open any product page and choose two attributes of this product;
add the product to the cart;
select Top 1000 rows of ShoppingCartItem;
click on a cell under AttributesXML;
you will see the first attribute that is with ID 9 and a value of 21, as well as the second with ID 10 and a value of 25.

This is the way how chosen product attributes are stored. To parse such XMLs, there is a special class named ProductAttributeParser located in the Nop.Services Catalog folder. This class manipulates product attribute XMLs. For example, using the ParseProductAttributes method, it creates an XML based on the chosen attributes when a customer adds the product to the cart.

As you can see, this method accepts a form from the product details page. It is also used to recalculate the product price when the attribute values are changed on the product details page (GetUnitPriceAsync method). So, in this class, you can find the methods operating with product attribute XML records. It also manipulates product attribute combinations, rental dates, and gift card attributes.

Another important column is the CustomerEnteredPrice. It is used when the “Customer enters price” option is available for a certain product. The Quantity column is quite self-descriptive, as it shows chosen quantity of a product. The RentalStartDate and RentalEndDate columns are used when the product type is rental. Finally, CreatedOn and UpdatedOn dates are self-explanatory.

Conclusion

The nopCommerce shopping cart is a structured and flexible component. Based on information from this article, you can effectively create and configure a website with an advanced shopping cart and a wishlist using the nopCommerce platform.

There is no need to build everything from scratch, so it allows you to focus only on the specific requirements of your eCommerce business. One of the reasons for it is that the nopCommerce shopping cart has the most used features, like shipping estimation, checkout attributes, and a gift card and discount implementation.

Finally, the database structure enables you to update what kind of shopping cart data is required to be stored and managed. You can also find these details in our documentation under the Default database schema section.

Top 4 ASP.NET and .NET Open-Source Projects

Dmitry Kulagin — Wed, 15 Feb 2023 12:49:35 +0000

If you are a web developer, open-source projects can help not only expand your practical knowledge but build solutions and services for yourself and your clients. These software provide hands-on opportunities to implement existing approaches, patterns, and software engineering techniques that can be applied to projects further down the road.

Since it is vital to securely create solutions that may be easily scaled, we will consider projects that are built on ASP.NET technology. It is a framework for building innovative cloud-based web applications using .NET that can be used for development and deployment on various operating systems.

Open-source projects on ASP.NET and .NET

Four open-source projects that would let you work with various architecture and code techniques have been compiled by our team.

1. nopCommerce

nopCommerce is an open-source eCommerce platform that is free and stands as the most powerful shopping cart built on ASP.NET Core in the world. Fully customizable, stable, secure, and extensible, nopCommerce provides a variety of built-in enterprise eCommerce features that may help you to develop a project of any complexity.

To help you get quickly and effectively acclimated with its architecture, main design, system requirements, installation steps, and other aspects of setup, there is comprehensive documentation that covers every aspect of an online store development of any kind and size.

Furthermore, the nopCommerce team has introduced a training course for developers that may give you a significant boost to start building eCommerce solutions, even enterprise-level ones, for the existing and new nopCommerce clients.

Technologies associated with nopCommerce:

Redis, is an in-memory data store that allows developers to store, access, and use data in applications by writing complex code with fewer and simpler lines;
LINQ to DB, a Language-Integrated Query (LINQ) library for database access that provides a light and fast layer between your database and your Plain Old CLR Objects (POCO);
NUnit, an open-source testing framework, which is made for all .NET languages;
Moq is a user-friendly mocking framework that is built for .NET.

nopCommerce’s GitHub statistics:

Latest release: 4.50.3;
Starred by 7,392;
5,401 closed issues;
Languages: C# - 58.5%, HTML - 15.6%, JavaScript - 11.6%, TSQL - 10.1%, Less - 2.2%, CSS - 2.0%.

2. OrchardCore

OrchardCore is a modular ASP.NET Core application framework and CMS, which is additionally open-source and multi-tenant. If you are a developer looking to build SaaS applications, you are likely to be more interested in the modular framework. It is important to distinguish between the framework and the CMS, as the latter is best for building administrable websites. Developers will typically use the CMS for building modules to enhance their sites.

The OrchardCore documentation and its README file on GitHub might assist you in developing a web CMS by outlining the architectural decisions that were made to address the specific issue of obtaining both flexibility and a positive user experience.

Technologies associated with OrchardCore:

Docker, a software platform that virtualizes the operating system (OS) of the computer on which it is installed and running, streamlining the process of building, running, managing, and distributing applications;
Redis;
SignalR is an ASP.NET software package that enables JavaScript server-side code to instantly transfer content to associated web clients.

OrchardCore’s GitHub statistics:

Latest release: 1.4.0;
Starred by 6,040;
4,468 closed issues;
Languages: C# - 51.8%, CSS - 20.6%, JavaScript - 15.7%, HTML - 9.5%, SCSS - 1.4%, Pug - 0.4%, Other - 0.6%.

3. eShopOnWeb

eShopOnWeb is a sample application powered by Microsoft, but it can serve as a starting point for developers who might feel overwhelmed by the complexity of the previously mentioned projects. Layered architecture with a monolithic deployment pattern is demonstrated in this project, which focuses on container-based application architecture.

There is no certain documentation file or website page. However, you may find all helpful information from the README file on its repository. It has necessary links to other useful articles and videos that may assist you.

Technologies associated with eShopOnWeb:

Docker;
MediatR;
JWT Tokens, is an open standard that defines a compact and self-contained way for securely transmitting information between parties.

eShopOnWeb’s GitHub statistics:

Latest release: one and only release;
Starred by 7,808;
296 closed issues;
Languages: C# - 72.5%, HTML - 20%, CSS - 3.3%, SCSS - 3%, Dockerfile - 1.2%

4. Miniblog.Core

Miniblog.Core is a full-featured blog software. Simple but modern, Miniblog.Core is a performance-focused ASP.NET Core engine for blogging, earning a 100/100 score on Google PageSpeed Insights on both desktop and mobile. As an open-source platform, it can be adapted to work with other .NET Core framework versions, as well.

You may notice that there isn't a lot of documentation when you look at the GitHub repository that houses Miniblog. However, you can install a template so you can build it using Visual Studio by following the steps in the readme file, but be careful because this won't give you the most recent version. You can also check out its features by visiting a link to an example site created with Miniblog and published on Azure.

Miniblog.Core’s GitHub statistics:

Latest release: one and only release;
Starred by 1,297;
43 closed issues;
Languages: JavaScript - 39.4%, C# - 35.6%, HTML - 12.0%, SCSS - 8.8%, CSS - 4.2%.

Start Your Own eCommerce Project

What are you waiting for? When it comes to developing solutions and expanding your knowledge with practical experience, there is no time like the present. Now that you have four potential projects to choose from, it’s up to you to carve out time to dedicate to self-development.

If you want to start an eCommerce career, you can start exploring the world's most popular shopping cart that is built on ASP.NET Core — nopCommerce. Download the powerful open-source eCommerce software based on .NET.

The nopCommerce eCommerce platform: brief of architecture and MVC pattern

Dmitry Kulagin — Wed, 15 Feb 2023 11:33:07 +0000

nopCommerce is an open-source project based on .NET technologies with understandable architecture. It is easily customizable and pluggable that enables the development and integration of any features, extensions, and themes. Every .NET developer may download the source code and start creating any eCommerce project.

To help developers navigate through the source code, the article has been prepared based on the training course that the nopCommerce team has developed. Here we consider an architecture and source code overview, as well as an MVC pattern.

Overview of the eCommerce platform architecture and source code organization

The nopCommerce source code and architecture are quite easy to understand. The solution structure is pretty clear, so you should have no difficulties learning the codebase.

Our architecture follows the separation of concerns principle, which helps us keep the growing codebase organized so that developers can easily find where a particular functionality is implemented.

Most of the projects, directories, and files are named so that you can get a rough idea of their purpose. For example, there is no need to look inside the project named “Nop.Plugin.Payments.PayPalStandard” to guess what it does.

So, when the nopCommerce solution is opened in Visual Studio, first, you see the following folder structure.

nopCommerce is a multi-project solution, which means each project is considered to reside in a particular layer of the application. Next, a scheme that illustrates the relationships will be provided.

Libraries

The directory “Libraries” contains 3 projects: "Nop.Core", "Nop.Data", and "Nop.Services". This is the innermost layer in the nopCommerce architecture system. It is the core of the application. All the data access logic and business classes reside inside this directory.

Nop.Core

The "Nop.Core" project contains a set of core classes, such as domain entities, caching, events, and helper classes.

In the “Domain” folder, the business objects can be seen. For example, the “Customer” entity or “Order” entity. So, here, you can find all the entities we use. In this directory, you can also see setting classes, such as “CatalogSettings” or “ForumSettings”.

The "Nop.Core" project is kind of a centre of the nopCommerce architecture. This project has no dependencies on other projects in the solution. The classes of "Nop.Core" are shared with the entire solution.

A scheme representing the nopCommerce architecture is presented. In this scheme, you can see that the "Nop.Core" project is related to the Business logic layer. All the other parts of nopCommerce are connected to this layer.

Nop.Data

The next project is "Nop.Data". The "Nop.Data" project contains a set of classes and functions for reading from a database and writing to it. Therefore, it represents the Data access layer. The "Nop.Data" project helps us separate data-access logic from the business objects, which can be seen in "Nop.Core".

In the “DataProviders” folder, you can see all the data providers we use in nopCommerce: Microsoft SQL Server, MySql, and PostgreSQL data providers.

nopCommerce uses the Linq2DB Code-First approach. Code-First allows us to define entities in the source code (they can be seen in the "Nop.Core" project) and then use “Linq2DB” and “FluentMigrator” to generate the database from these C# classes. That's why it's called “Code-First.” You can then query your objects using LINQ which is Language Integrated Query. LINQ translates to SQL behind the scenes and is executed against the database.

nopCommerce uses fluent code API to customize the persistence mapping. You can see all the mapping classes in the “Builder” folder of the “Mapping” directory. If you open, for example, the ”BlogPostBuilder” class, you may see this class allows us to configure each column of the “BlogPost” table in the database as we need. Each entity has such a builder class.

Then, the next important part of the "Nop.Data" project is Migrations. As you know, migrations allow us to alter the database schema. This is an alternative to creating lots of SQL scripts that have to be executed manually to apply any database changes.

The "Nop.Data" project also contains the other interfaces and classes used to connect to the database. Unlike the "Nop.Core" project, "Nop.Data" has no dependencies on any other project in the solution.

Nop.Services

The other important part is the "Nop.Services" project. It contains a set of core services, business logic, validations, and calculations related to the data. So the "Nop.Services" project is related to the Business logic layer. This project has a dependency on all other projects that belong to the Application Core: "Nop.Core" and "Nop.Data".

This project provides data access functionality for the Presentation layer. This layer contains service classes and follows a repository pattern to expose its functionalities.

The folder names are self-descriptive. If we look at the Blogs folder, for example, it contains a service that helps us get, insert, and delete blog posts in the repository. It also contains an interface for this service, allowing to change the implementation without updating the code. The idea is that when you need to change how the service handles some functions, all you have to do is create a new class that implements IBlogService and then register it with the NopStartup. So you don’t have to touch any of the controllers that use that interface.

Plugins

To look at plugin projects the “Plugins” folder should be opened. A plugin is a set of components adding specific capabilities to a nopCommerce store. In other words, plugins are used to extend the functionality of nopCommerce. Each plugin is a separate project containing a feature.

Plugins are classified into different groups. For example, payment methods (such as PayPal), tax providers (like Avalara), shipping rate computation methods (such as UPS or ShipStation), widgets (such as google analytics), and many others. As it can be seen, there are a lot of plugins coming out of the box. Any feature that is necessary to be added to a nopCommerce store, can be implemented in a plugin without touching the source code.

Physically, plugins are located at the root of the solution. But plugins’ DLLs are automatically copied to the “Presentation\Nop.Web\Plugins” directory, which is used for already deployed plugins. This allows plugins to contain some external files, such as static content (CSS or JS files), without having to copy files between projects to run the project.

On our scheme, you can see that plugins touch all the layers. This is because each plugin can potentially include its own data access, business logic, and UI layers at the same time.

Presentation

Have a look at the “Presentation” folder. Its content represents the presentation or user interface layer.

Nop.Web

"Nop.Web" is an MVC web application project. "Nop.Web" provides a public interface and an administration panel included as an area. This is the application that you actually run. It is the startup project of the nopCommerce solution.

This project contains controllers, factories, models, views, and other stuff related to the presentation layer. The "Nop.Web" project connects to "Nop.Services" to retrieve data, make calculations, and use business logic.

Nop.Web.Framework

And "Nop.Web.Framework" is a class library project containing some common presentation things for the "Nop.Web" project.

Tests

The last folder obviously contains tests. Unit tests are automated tests written and run by developers to ensure that an application section meets its design and behaves as intended. During development, we code criteria or results known to be good into the test to verify the application function’s correctness. During test case execution, the framework logs tests that fail any criterion and report them in a summary. The testing system in nopCommerce includes tests for the "Nop.Core", "Nop.Data", "Nop.Services", and "Nop.Web" projects.

Asynchronous programming

We also would like to note that nopCommerce utilizes asynchronous programming. Each controller or service method is asynchronous. And the “async” modifier indicates that. Such methods return “Task” objects that represent asynchronous operations.

When an asynchronous method is called, it requires the “await” operator placed in front of it. This “await” operator suspends evaluation of the enclosing async method until the asynchronous operation represented by its operand is complete. The “await” operator doesn't block the thread that evaluates the async method. When the asynchronous operation is complete, the “await” operator returns the result of the operation, if any. “Await” can only be used inside an async method.

This way, by implementing the task asynchronous programming model in nopCommerce, we achieved great performance enhancements.

MVC pattern in nopCommerce

nopCommerce implements the “Model-View-Controller” (MVC) design pattern in its architecture. This design pattern allows us to decouple the user interface (which is View), data (which is Model), and application logic (which is Controller). This pattern helps achieve the separation of concerns.

Using the MVC pattern means that requests are routed to the Controller responsible for working with the Model to perform actions and/or retrieve data. The Controller chooses the View to display and provides it with the Model. The View renders the final page based on the data in the Model.

This delineation of responsibilities helps us scale the nopCommerce app in terms of complexity because it's easier to code, debug, and test something (Model, View, or Controller) that has a single job.

Example of applying MVC

Here we open the “BlogPost” view from the “Nop.Web” project. This view uses the Razor view engine to embed .NET code in HTML markup. It contains minimal logic, but any logic in this view is related to presenting content. We don’t perform a great deal of logic in view files.

According to the MVC pattern, all the logic related to the View should be placed in the appropriate controller. Controllers are the components that handle user interaction, work with models, and ultimately select a view to render. In an MVC application, a view only displays information; a controller handles and responds to user input and interaction. In the MVC pattern, the Сontroller is the initial entry point responsible for selecting which model types to work with and which view to render.

The name of the controller, in this case, is “BlogController”. Here we can find the “BlogPost” action method that retrieves data, populates the model with this data, and then returns the needed view.

This view uses the received model to present content. For example, this iteration displays the tags cloud on the page.

Let’s go back to our controller. Controllers shouldn't be overly complicated with too many responsibilities. So we keep controller logic from becoming overly complex and push business logic out of the controller. If we dig deeper and fall into the “BlogService,” we will see that the business logic related to retrieving data from the database is actually placed here. The “GetBlogPostById” method accesses the repository to get data. But this method is not as huge as “GetAllBlogPosts,” for example.

This way, we briefly considered the implementation of the MVC pattern in nopCommerce. During the training course, we will talk about it in more depth.

Wrapping up

From the article, you got acquainted with the nopCommerce structure and gained insight into its architecture. This is the core of the nopCommerce platform and contains essential functionalities and business logic. These basics are explained in detail and completed with information about additional functionalities and principles in our training course.

The nopCommerce online course is compiled by the nopCommerce core developers based on our 13 years of experience, and questions frequently asked within the premium support services and community forums.

It has been designed to cover the main aspects of developing an eCommerce store and teach to:

quickly run and configure websites of any complexity on nopCommerce;
customize nopCommerce to fit unique business requirements;
create integrations with third-party software;
create and customize plugins and themes;
avoid common mistakes when setting up and customizing nopCommerce;
follow the best practices and use the latest development experience on nopCommerce.

Visit the training course content page to look at topics that are covered, as well as the conditions of starting the course. If you are ready to start deploying and customizing you may get started by downloading the package with the source code.

eCommerce replatforming: how to survive the switch and success in the process?

Dmitry Kulagin — Wed, 15 Feb 2023 08:25:09 +0000

Today's market is more competitive than ever before, and eCommerce retailers must stay up with the rapid technological developments. One of the possible ways is to switch to a platform that is more flexible and powerful. A little over 18% of the 93 shops surveyed by Digital Commerce 360 said they were considering switching to eСommerce systems.

If you're scaling your online store and beginning to experience noticeable increases in traffic and sales, you'll need a backend system to maintain your website and meet the goals set. The website uptime, user experience, scalability, and capacity for quick adjustments will be directly impacted by the choice of an eCommerce platform. However, replatforming an eCommerce site is a big task. It is a great chance to make some important changes, but the work can be very difficult if you don't know where to begin.

In this article, we'll discuss what is eCommerce replatforming, how to understand when to replatform, why it's significant and what checklist to follow, and how it may benefit you before getting into the specifics of how to migrate store data.

The meaning of eCommerce replatforming

eCommerce replatforming involves moving from your current platform to one that is more appropriate for your company's needs. The reasons for eCommerce platform migration can range anywhere from – increasing site or operation speed, adding new functions or non-supported features, experimenting with new business models, or adding more layers on top of your customer experience (e.g. localization, personalization, and more).

There are multiple ways businesses think of replatforming:

The first approach is to switch from one monolithic platform to another platform that offers additional plugins and features. In this case, replatforming can be accompanied by redesign.
The second (modular) approach is to divide the platform transition into several stages to prevent upfront costs. For example, if the main problem is an outdated CMS, it is the first component to adjust and then decide what other elements should be updated within the existing tech stack.
The third (plug-and-play) approach is to migrate from a monolithic platform to microservices which are discrete applications with different functionalities. This approach essentially refers to headless eCommerce.

These three types of replatforming have countless variations. To ensure that you fulfill all of your migration requirements and commercial objectives, each project (website) is unique and requires a special strategy. But first of all, you should make sure that you can’t do without replatforming. Below you’ll find typical “red flags” that mean your eCommerce platform calls for more than a planned update.

Main reasons for migration

If you see some of the following issues in your current website, we strongly recommend you consider eCommerce site migration.

[Forbes]

A need to cut development costs

High maintenance costs. It could be time to switch if maintaining your existing platform is a constant burden. Maintenance also takes time (and much money) and might divert focus from other corporate processes.
Major costs of ownership. To increase the functionality of your store, you need to add more plugins, make security patches and fix UI issues with the help of professional developers. eCommerce migration can decrease infrastructure or design costs by shifting the burden to a platform provider with a greater level of performance.

Technical limitations of a chosen eCommerce platform

Poor performance. The platform can have difficulties maintaining a large number of physical SKUs for your catalog database or lack omnichannel support.These restrictions cannot be always overcome with a simple update or upgrade.
Slow speed and no mobile optimization. An outdated website can become unstable during peak traffic conditions, which causes poor loading time, high bounce rates, and loss of customers. Let alone that 53% of the total web visits are currently mobile, eCommerce replatforming will make your website run more quickly, and have a richer user interface.
Limited scalability. Your current platform might only be able to store a particular amount of attributes, a certain number of product-related assets, a given number of API calls per second, or even lack the support of some content types, for example, video. An online store can be scaled with personalized features like tailored customer content, personalized pricing, product selections, credit limit, order history, and personalized payment options for each customer segment.

Marketing limitations

Streamlined analytics. To gain important insights and improve your eCommerce site, proper analytics is required. A new platform should allow data collection and measurement so you can provide the greatest customer experience.
Lack of social media capabilities. Integration with social network accounts is one of the most crucial services your platform can offer. This allows users to buy products from brands without leaving the social media app.
Poor customer experience. If too many plugins slow down your website or if your present platform doesn't offer the most recent technological capabilities, creating the best user experience should be a top concern.

How to make eCommerce replatforming seamless

eCommerce migration is typically a laborious, time-consuming, and resource-intensive process (be it financial costs or human resources). So it’s better to consider the following factors before switching to another eCommerce platform.

1. Estimate required output of eCommerce platform migration

Most businesses think about replatforming when they have multiple problems that need to be resolved simultaneously, or when they are scaling, or adding new payment options or language versions. Whatever the cause, switching eCommerce platforms won't be worth it if it doesn't increase the output in terms of performance, functionality, design, and overall quality.

Therefore, before you begin the process, you should understand the business objectives that replatforming should satisfy and whether the chosen solution can match your expectations.

2. Analyze the time and resources needed

Replatforming is a significant organizational change that takes time and effort to complete. To cut down on time, it is important to keep the team that has already been involved in the migration and has the skills required to move it forward. You should also choose the best time to migrate to a new platform, which is typically when there is little traffic.

Keep in mind that replatforming is a long-term investment and not a quick fix. The solution you intend to use should be flexible enough to move with the market while also responding to your company's needs as it expands.

3. Identify eCommerce platforms that have required integrations

Your current eCommerce system is likely integrated with extensions, plugins, and programs that assist with fundamental operations like marketing, sales, CRM, and subscription billing. Not to worry about reducing performance and spending too much time on development to get everything together, make sure the platform you chose integrates effortlessly into your current infrastructure.

The customer shopping experience is influenced by the functionality of your eCommerce store. The more features your website has, the more likely you will enhance conversion rates and boost consumer loyalty.

10 steps to effective eCommerce replatforming

As you can see, replatforming is more significant than merely switching platforms to improve performance. After migrating to a new platform, many eCommerce companies saw a big rise in conversion rates and income. That’s why you need to develop a full-fledged eCommerce migration strategy and follow 10 simple steps to complete the task.

Step 1. Determine what features, customizations, and integrations you need

List the flaws in your existing platform and determine your most pressing needs, the biggest gaps, and what you plan to gain from the website replatforming. These include automatable processes, information to be moved (i.e. products, existing customers, orders, etc.), resources to facilitate the migration, and the best time to begin and finish the process.

In addition, you should do a realistic assessment, taking into account the overall expenditures, the labor needed to finish the job, and any upcoming deadlines. You want to be aware of both the advantages and any potential drawbacks of replatforming.

[Digital Information World]

Step 2. Choose a new eCommerce platform based on your requirements

Make a shortlist of potential eCommerce platforms and arrange them according to features, pricing, and other factors. To compare the tools you are evaluating, it is better to use a table or spreadsheet.

Although you can check several listicles, it’s always better to get your hands on the real demo and try each platform yourself. This way you can discover more about the benefits and drawbacks of each option. After testing the demo, you should know more about how the system works, how simple it is to use, and how well it performs.

During replatforming you often need to redesign your website’s front-end, which is a great time to go headless. After all, you wouldn’t have thought of switching your tech stack if your system could have provided the best shopping experience. And it’s always better to do all the major changes in one go than implement them step-by-step and risk your website being out of operation for too long.

If you currently use a monolithic commerce platform, you’re recommended to replatform to a solution that supports headless commerce to make sure you can keep up with the demands of modern online retail. Check out our list of the 15 best headless eCommerce platforms and decide whose features will bring your online business to a new level.

Step 3. Create a plan for the whole eCommerce migration process

A strong pre-migration plan is crucial if you want to minimize customer inconvenience and website downtime. The next step is to create a reasonable task scope and migration schedule. You should draw out all milestones and resources needed at each stage.

Most migration processes will require you to plan tasks in order to tackle the following:

Creating a new site hierarchy
Auditing and migrating content
Front-end design
Back-end development
Pre- and post-launch training
SEO optimization
Data migration through a third-party service, API plugin, app, or manual CSV transfer.

Step 4. Save your eCommerce data before replatforming

Make sure to backup everything, even if you have a clear plan for your data transfer. It can be challenging to move big volumes of data from one location to another, and mistakes can happen. If it seems implausible, the last thing you want when switching eCommerce platforms is to experience a significant problem while migrating your data.

To avoid being caught in an uncomfortable scenario later on, back up everything to the cloud or an external hard drive. Basically, there are two approaches: manual export or automated backup using a special app. The valuable information you might want to keep includes website code, database, images, PDFs, videos, settings and configurations, designs, layouts, themes, etc.

Step 5. Create a UX-friendly checkout process

Depending on the eСommerce platform you use, you may also be able to personalize and improve checkout (to process payments and complete orders). Connect any third-party applications to your new system and make every effort to improve the user flow. The main task is to ensure your consumers have a quick, secure, and effective new experience. The system should recognize, prevent and protect against fraudulent activity.

If you choose a headless eCommerce platform, you can easily integrate checkout functionality from third-party eCommerce migration services. As a result, if you need some specific customizations to handle your checkout process, you can discuss this with your vendor and either work together to develop a solution or add functionality from another provider.

Step 6. Plan how to keep your website’s search engine rankings

Another concern is SEO which is likely to take a hit when switching platforms. In the worst-case scenario, the domain authority and the other efforts made by the marketing team to increase traffic to your website may be lost during the migration.

To level an impact on your search rankings, you'll need to conduct a thorough SEO analysis, redirect all of the pages and optimize off-page content.

To mitigate such risks, make sure that you:

Examine your current content and get rid of any outdated or duplicate material
Make a thorough redirect scheme that matches pages one-to-one
Optimize new material for your targeted keywords
Delete your old site's metadata and schema markups
Keep an eye on your organic traffic, search positioning, and technical SEO profile.
Watch out for things like 404 errors, slow loading times, and any other warnings that can point to poor performance.

Anyway, prior to the start of a new campaign or during a busy time for your company, we advise against replatforming since this may have an adverse effect on sales and operational bandwidth.

[WolfgangDigital]

Step 7. Transfer your old eCommerce store’s product and customer data

eСommerce data migration is one of the biggest challenges when it comes to replatforming regardless of the method you choose: manually, through a migration app, or a third-party team. Some of your data (especially customer, category, and product data) could be lost permanently. Make sure you understand where your data is stored, whether you will have access to it during the transfer, and where it will be located on the new platform.

Whichever option you go for, the pre-migration data plan will help you avoid costly pitfalls and possible data losses:

Incorrectly mapped products
Incorrectly displayed prices
Limited personalization due to poorly synced customer data
Negative impact on customer experience due to an improperly functioning website.

Step 8. Make changes to your online store

Most time and resources will probably be spent during the design and development phase. That’s when your designers and developers will build the front and back ends of your new eCommerce website.

It’s also a good time to make important adjustments to your website's navigation, content, user experience, design, or back-end operations, adapting them to a larger scale or completely changing their functioning. In the end, all of the data you back-upped and transferred over is placed into your newly redesigned website.

Step 9. Run tests on your website

Run numerous tests before launching your new website to ensure that you can add items to your shopping cart, complete a transaction, and use custom features to make sure everything works as it should. It’s recommended to test each page, button, and form, even though it can seem excessive.

Check that all of your pages are loading and functioning as intended by running your site through a performance auditing tool like Google PageSpeed Insights. By doing this, you can be sure that your website won't experience any speed or usability troubles.

Ask internal stakeholders to work on the website's back end and fulfill particular tasks. Think about offering some of your most devoted clients beta or early access. Collect all of this feedback, and make the necessary adjustments before launch.

Step 10. Launch your migrated eCommerce website

Relaunching at a period of low traffic, such as early in the morning, could help you minimize any potential inconvenience. To give your users a better experience, you need to monitor analytics and constantly enhance your eCommerce website.

Once your new site is live, keep checking for errors. It's not always a guarantee that doing everything perfectly in a test environment will protect you from mistakes in the real world. You shouldn't expect all the steps to go according to a plan. But if your team stays on top of any problems, you can minimize things like 404 errors and page misdirects.

eСommerce replatforming checklist

Check your current eCommerce platform and audit all issues
Define your business needs, long-term goals, and platform requirements
Decide what legacy information should be migrated
Select the best time for migration (off-season, low-traffic, etc.)
Consider the best platform options for your business
Forecast your revenue and total cost of ownership
Distinguish between built-in functionality and third-party apps
Form a pre-migration website plan
Migrate your data and content
Create new website content
Build website navigation and hierarchy
Design front- and back-end (including mobile responsiveness)
Conduct SEO and map URL redirects
Relaunch in beta and QA with stakeholders
Test before and after eCommerce replatforming
Train personnel to help them use the new platform and its components
Make your new website public
Monitor traffic and search rankings

Examples of effective eCommerce replatforming with instruments

To actually start the migration, you need a new eCommerce platform meeting your requirements and is capable of storing your current data. When evaluating candidates, we recommend keeping the following key factors in mind:

Ease of use: You should learn beforehand how much time and effort you and your team will spend to master the new platform. This criterion will determine the scope and overall cost of replatforming.

Functionality: Make sure the chosen platform has the features and tools you need to run your business effectively. The implemented time and smooth transition are also significant factors to consider.

Security: The platform must protect confidential information using PCI DSS compliance, fraud detection, and data encryption. It’s better to opt for a solution that offers such features out-of-the-box.

Support: In case you need professional support, make sure you’ll get the necessary assistance 24/7.

Pricing: The overall pricing and cost of ownership can be trickier to calculate. To understand whether a particular platform fits within your budget, learn more about its maintenance and any other hidden costs (e.g. outsourcing expertise, consultants, monthly fees).

Considering these factors, nopCommerce is a perfect candidate for migration from your current eCommerce solution. It offers rich functionality, pluggable architecture, and compatibility with third-party apps and integrations – all these give you enough flexibility to create a personalized eCommerce experience for your customers.

In addition, B2B eCommerce replatforming to nopCommerce is smooth and efficient, with no need to compromise any quality or functionality. This platform is made for scalability, so you can easily add new features and functions as your business grows.

And don’t take our words for granted. To see for yourself that nopCommerce can help you solve critical issues and further develop business activity, take a look at a few eCommerce replatforming examples below.

Zoomer: electronics retailer with successful store migration and redesign

Zoomer is one of the biggest electronics retail chains in Georgia. Their online store had been using CS-Cart for about 8 years before switching to nopCommerce. Due to the vendor's absence from the local market and ineffective communication, maintenance was slow and difficult to manage.

One of the main difficulties was integration with the accounting system. The website data updates also required a lot of work. The design was outdated, and adding features and supporting basic modules was almost impossible. In response to these issues, the business decided to replatform its website.

As part of replatforming, the following changes were made:

A fresh, appealing, and mobile-friendly design was developed
The home page now includes all search results under “Browsing History”
Custom filters for the menu were added to only see the filter characteristics that are compatible with the chosen brand
The new methods of payment were developed since online installment loans are very popular in Georgia
More than 30k products have been transferred from the previous version of the website.

As a result, the renewed website got a seamless integration with its price management system and customer-oriented design. 80,000 users visit the marketplace per week and the average session duration has increased to 4 minutes.

Doors Direct: website migration from nopCommerce 4.30 to 4.40

Doors Direct is a popular online retailer of wooden windows and doors in South Africa. The company needed to upgrade its website to nopCommerce 4.40 while also making some changes to its custom solutions.

In the process, the development team faced a number of challenges: the identification of all customizations, migration of the existing features, the implementation of new features, and lack of access to parts of the customized source code.

While working on the new website, the team did the following:

Developed a functional UX to enhance the website style, brand identity, and user experience
Realized a more practical address selection and quote request to increase accessibility and functionality
Showcased products to potential clients and directed them to physical stores
Increased the number of new users by 10%.

Wrapping up

Even if there are numerous reasons to be concerned about eCommerce replatforming, let's focus on the positive sides and what to expect when migration is done well.

With replatforming, your product, category, and customer data is better organized, which enables more data-driven product development, gives cross and upsell opportunities, and even creates a more personalized shopping experience for your customers.

A modern eCommerce solution will help your visitors enjoy faster load times and a custom checkout process tailored to their language, currency, and preferences. Going headless with replatforming also gives you access to other options for site performance and functionality (integrate new features and new services fairly quickly and easily) you wouldn't have with a monolithic platform.

So as you can see, with a proper replatforming plan and a detailed roadmap, eCommerce migration doesn’t have to be a huge burden.

How to run the nopCommerce eCommerce platform on Linux VPS. Part 2

Dmitry Kulagin — Mon, 13 Feb 2023 11:17:56 +0000

Welcome to part 2 of Running nopCommerce on Linux, which has been composed by Woon Cherk Lam.

Before we begin, please read part 1 of this tutorial if you have missed it. In part 1, we went over the basics of installing nopCommerce on Linux in detail. And created a basic setup of nginx and MySQL to run nopCommerce on Linux.

In this part of the tutorial, you will learn how to:

deploy a custom-developed application. How to build DLLs in Visual Studio that will run on Linux;
run multiple instances of nopCommerce on the same server;
convert an existing nopCommerce application that is running on Microsoft SQL to MySQL;
install a free SSL certificate for your nopCommerce store.

Let's start with the deployment of a custom-developed solution.

How to deploy a custom-developed eCommerce project

Whether you are developing a custom version of nopCommerce or just making slight changes, modifying any C# part of the code will require the application to be compiled again before uploading to the Linux server. Specifically, you have to compile for Linux. Because code compiled for Windows will not run on Linux servers.

Let's start with the modified code in Visual Studio. In the Solutions Explorer window, select the Nop.Web project.

Right-click on Nop.Web. And in the context menu that appears, click "Publish".

Let's create a new publish profile by clicking on "New".

A window will pop up. Select "Folder" as the Target and click "Next".

On the next page, do not change the Folder Location. Click "Finish".

Now we can configure the publish profile for Linux. Click on the pencil icon to edit Target Runtime.

In the window that pops up, set Deployment Mode to "Framework-dependent". And change Target Runtime to "linux-x64". As a side note, most VPS use linux-x64. Click "Save".

Now click "Publish".

Once it finishes publishing, a folder path containing the published files will be provided.

It is always in the "bin" folder of the project you are working on. Unless you have changed the Folder Location for the publish profile. Then it will be in the folder you specified.

As you can see the published files are in the "bin" folder. In Release > net6.0.

We do not have to upload everything. We only need to upload the files that we have made changes to.

For this tutorial, let's assume that I made some changes to the code in Nop.Web. Therefore after publishing, I only need to upload the Nop.Web.dll file to my server.

As usual, I will use MobaXterm to upload the file. But feel free to use any SFTP client you are comfortable with.

In the terminal, move into the nopCommerce application's folder. For me, it will be:

cd /var/www/nop430-1-demo

Now, I'll make sure the "Follow terminal folder" is enabled and check if the SFTP path is correct.

Then I will drag and drop the Nop.Web.dll file into the SFTP tab.

Once the DLL file has been uploaded, we will need to restart the nopCommerce instance. The command to do that is "sudo systemctl restart" followed by your nopCommerce service name. In my case, it is:

sudo systemctl restart nop430-1-demo.service

After restarting, nopCommerce will take in the updated DLL file. The custom-developed version of nopCommerce is now deployed and running on Linux.

How to run multiple eCommerce stores on a single server

In this section, we will go through the setup required to run several instances of nopCommerce on the same server. It is a convenient way of running any combination of nopCommerce versions. You can have some instances running the same version and others running different versions on the same server.

In this example, I have three instances of nopCommerce installed.

The first instance I set up is nop430-demo. I left it as it was and did not change the listening port. Therefore, nopCommerce will by default listen on port 5000.

Now, let's pretend I'm in the process of setting up the next instance which is nop430-1-demo. And I have completed all the steps in part 1 of this tutorial. At this point, nop430-1-demo is ready but cannot run because the first application is also listening on the same default port 5000.

As part of setting up a new instance in part 1 of this tutorial, we had to create a nopCommerce service for nginx to route requests to. Let's go to the directory we placed the .service file in.

cd /etc/systemd/system/

Do refer to the previous tutorial if you are unsure of anything. It is important that you understand and follow all the steps in part 1 of this tutorial.

I will run the list command.

ls

Since the configuration file is named after the application it is for, we can easily spot it in the list: nop430-1-demo.service. Let's open the file in Nano.

sudo nano nop430-1-demo.service

Now we just have to add this line to specify the listening port.

Environment=ASPNETCORE_URLS=http://localhost:5031

In the previous tutorial, it was not necessary to set a specific listening port because there was only one nopCommerce running. It will automatically use the default port 5000. However, we are now adding a second instance to the same server. And only one application can be on a port at a time. So it is necessary to assign a different port to the additional instance.

In my case, I have assigned nop430-1-demo, my second application to listen on port 5031. This leaves my first application to listen on the default port 5000.

Press Ctrl+S to save the changes and Ctrl+X to exit Nano.

The next step is to start the service with this command.

sudo systemctl start nop430-1-demo.service

nop430-1-demo should now be listening to port 5031. We can run another command to check, which application is listening to which port.

sudo netstat -tunlp

This will list all the listening ports and the applications that are listening on them. What I am interested in are the applications with the program name containing "dotnet" which means it is a nopCommerce application. As you can see, my nop430-1-demo is listening on port 5031.

Repeat the above steps when installing additional instances on the same server. The applications will run fine as long as each application is assigned its own listening port.

Converting a running eCommerce store from MS SQL to MySQL

Converting the database from MS SQL to MySQL is a crucial step when moving an existing nopCommerce application from Windows hosting to Linux hosting. I have tested a few software tools and have found MSSQL-to-MySQL by Intelligent Converters to be the most stable and straightforward.

But what works for me may not work for you. Database system conversion is not an easy task. Especially if your database is a customized version of nopCommerce. You will have to test it to see if it works for your version of the database and application.

For this tutorial, I will be using MSSQL-to-MySQL. It is not expensive and there are discounts available if you are thinking of getting it. I will explain more about how to get discounts later.

Let's start by opening MSSQL-to-MySQL. We will be greeted by the migration wizard.

Select "Export into MySQL script file" and click “Next”.

MSSQL-to-MySQL will then ask for information to connect to your MS SQL server.

It is my practice to work on a local database. Even for a production website where the database is hosted on a live server, I will back up and restore the database to my local server and make changes locally. It is much faster this way. So I will leave it as “localhost” to connect to my local server. And then click “Next”.

On the next page, I will leave the default settings here unchanged except for "Insert 'CREATE TABLE' statements".

When enabled, the script will create all the tables when executing on the MySQL database. If you have not created a MySQL database in your destination server, you can tick the "Insert 'CREATE DATABASE' statement" and have the script do it for you. I will leave it unchecked as I have already created a MySQL database on my server.

Next, we have to choose the MS SQL database that we want to convert and also where we want to save the MySQL script file.

Following that is the Conversion Settings page. Leave the default conversion settings unchanged and click “Next”.

On the next page, select all the tables to be converted. Click on "Add All >" and then click “Next”.

Now MSSQL-to-MySQL will start converting the database and generate the MySQL script file.

Once the conversion is done, we will have a MySQL script file that looks like this:

The next step is to upload this script file to the server and execute it on the MySQL database.

I will open the SSH terminal in MobaXterm and navigate to the folder I want to upload the MySQL script file. To keep things organized, I usually upload files to the App_Data folder of the application I'm working on. Right now, I am working on the MySQL database of my nop430-1-demo. So I will move to that directory.

cd /var/www/nop430-1-demo/App_Data

Make sure the "Follow terminal folder" in the SFTP tab is enabled. And check if the path in the SFTP is correct.

Then just drag and drop the script file into the SFTP tab.

Once the upload is complete, go back to the SSH terminal. In the folder that contains the script file, run this command:

mysql

This will launch the MySQL process on Linux.

I have already created a MySQL database called "import_demo" to receive the data. So I will select it as the database I want to import into by entering the command "USE" followed by the database name.

USE import_demo

Press Enter to run the command. Then you will see "Database changed".

As a reminder, it is crucial that you are running the MySQL shell in the same directory the uploaded script file is in. We can now tell MySQL to execute the script file on my selected database with this command:

source nophippie-partial.sql

Just replace "nophippie-partial.sql" with the name of your script file when you are trying this. Press Enter to run the command.

When all the queries are executed, the database has been successfully imported. We can quit the MySQL shell by typing "quit" and pressing Enter.

Now we need to check and make sure that the dataSettings.json is pointing to the database we have just imported. The location of dataSettings.json is in our nopCommerce application’s App_Data folder.

Since I am already in the correct directory, I can open the file in nano.

sudo nano dataSettings.json

Under DataConnectionString, make sure it is pointing to the database we have just imported.

And we are done. That is how to convert a database from MS SQL to MySQL from start to finish.

If you are interested in a discount for MSSQL-to-MySQL by Intelligent Converters, you can go to their "How to Get a Discount" page. Also, I can organize a group purchase deal to get 50% off under their "for 3rd and each following purchase" option. Just send me your email and we can purchase all the licenses in one go.

A free SSL certificate for running .NET eCommerce store

In MobaXterm, run the following command in the terminal to install Certbot.

sudo apt install certbot python3-certbot-nignx

You will be prompted to confirm if you want to install Certbot. Press "Y" to confirm.

If you already have it installed as I do, you will see this screen instead.

If you have multiple nopCommerce instances, you will need to do SSL binding for each individual instance.

Now, let's have a look at the installations I have by going to the default server.

cd /var/www/

And running the "ls" command.

As you can see, I have four installations here.

For this tutorial, the application I want to bind SSL to is "nop430-demo". To do that we need to look for the hostname in the nginx configuration file for that application.

Let's go to the "sites-available" folder.

cd /etc/nginx/sites-available

And run the "ls" command.

Since I have named my configuration file after the application it's for, I can tell at a glance that "nop430-demo" is the file I'm looking for. Let's open it in Nano.

nano nop430-demo

Under "server", "server_names" contains the hostnames we are looking for.

The reason I have more than one hostname is that my application is a multi-store installation. With NopCommerce it is possible to have more than one store in an installation. You can even have multiple installations of different instances hosted on the same Linux hosting (more on this in the next section). Here's an example to illustrate the hierarchy:

As you can see, it is possible to have two instances running, each containing a multi-store installation. Additionally, it is also possible to run different versions of nopCommerce in each separate instance. In the example above, Instance (1) is running nop4.40 while Instance (2) is running nop4.50.

Anyway, coming back to the hostnames. Now you can tell Let's Encrypt the domain names we want to bind the SSL to. So I will select the hostnames.

And then left-click on the selection to copy. Do not press Ctrl+C to copy! In MobaXterm, pressing Ctrl+C will interrupt or kill the current task or program.

Let's exit Nano by pressing CTRL+X.

Next, you will use Certbot which we installed earlier to communicate with Let's Encrypt and complete the SSL binding. The command you need to use looks like this example:

sudo certbot --nginx -d example.com -d www.example.com

We have to enter the domains we want to bind with a "-d" followed by a space in front of each domain. So I will type out the command, right-click to paste the hostnames, and then add "-d" followed by a space before each hostname. The resulting command looks like this:

sudo certbot –nginx -d nop430-demo.pronopcommerce.com -d nopmoka-demo.pronopcommerce.com -d nopwinery-demo.pronopcommerce.com

If your setup is not a multi-store setup, you should only have one hostname. But do note that if you wish to bind both the WWW URL and the non-WWW URL, you will have to enter both domains in the command like so:

sudo certbot --nginx -d yourstore.com -d www.yourstore.com

Since all my hostnames are subdomains, I don't have any WWW URLs to add. I will proceed by pressing Enter to execute the command.

Certbot will start running and prompt us for an email address.

The email address you enter here will be used by Let's Encrypt to send you notifications about your SSL renewal and security issues.

After entering the email address, press Enter to submit.

Next is Let's Encrypt's terms of service. Press "A" to agree to the terms of service.

Following that we are asked if we want to share our email address with the Electronic Frontier Foundation. This is optional. I do not want to, so I will press "N" for no.

Certbot will continue running for a while.

Lastly, Certbot will ask if you want to redirect all HTTP traffic to HTTPS. Depending on your needs you may want to do that. If so, press "2" and hit Enter. For me, I don't want Certbot to make any changes. So I will press "1" for No, followed by Enter.

Certbot will proceed to finish up. And you should see a message that says your SSL has been successfully enabled.

The next step is to make a small change to the appsettings.json file for your nopCommerce website. This is important and will result in a redirect loop if you do not do it.

Let's go to the root folder of the website, in my case it is "/var/www/nop430-demo".

Then you will open the appsettings.json file in Nano.

nano appsettings.json

In the "DOTNET_URLS" section, look for "UseHttpXForwardedProto".

The default value for "UseHttpXForwardedProto" is false. We need to change that to true.

Press Ctrl+S to save the file and Ctrl+X to exit Nano.

After editing appsettings.json, we need to restart our app for the changes to take effect. The restart command is:

systemctl restart yourappname.service

For my case it is this:

Press Enter to run the command. It can take around two minutes for the service to restart depending on your VPS. Using MobaXterm, you can tell it has finished restarting when the CPU usage has stopped spiking.

Once successfully restarted, we need to tell nopCommerce to enable SSL for our stores. Log in to the nopCommerce Admin page or refresh it if you have it opened. And then go to Configuration > Stores.

Click on Edit for the store, for which you want to enable SSL. In my case, I will have to edit both NopWinery Demo and NopMoka Demo. I'll start with NopWinery Demo and click the Edit button for that store.

In the Edit Store Details page, change the store URL from HTTP to HTTPS.

Then tick the "SSL enabled" checkbox.

And then click Save.

I made the same changes to my other store. If you run a multi-store installation like me, you will have to edit each of your stores to enable SSL for them.

With that, we have successfully installed and enabled our free SSL certificate on our nopCommerce stores.

Final words

As you follow these steps, any nopCommerce project may be deployed using the Linux operating system. From SSL Certificate installation to deploying customized parts can be easily performed.

Moreover, many instances may be run on the same server which hugely optimizes the costs of creating and managing an eCommerce store by nopCommerce. Considering the first part of the tutorial, server expenses may be even less by using suggested Linux VPS, which are usually cheaper than Windows ones.

Also, refer to the documentation where you can find more descriptive information about the initial settlement of nopCommerce using Linux OS.

Migration from .NET5 to .NET 6: Performance benchmarks

Dmitry Kulagin — Tue, 08 Feb 2022 10:03:02 +0000

Introduction

This post continues the series of articles (Migration from .NET Core 2.2 to .NET Core 3.1 and How to Migrate a Project From ASP.NET MVC to ASP.NET Core) on upgrading the nopCommerce project – a free . net eCommerce CMS with an open source code for creating online stores. This article discusses why we continuously strive to upgrade our application’s platform. Here we tell you what we achieved with migration to .NET 6 in terms of performance and try to evaluate our results practically.

The reasons for migration

Those who monitor the nopCommerce upgrades know well that we do our best to upgrade the application core as promptly as possible. This is facilitated by the continuously evolving Microsoft technologies reflected in the .NET Core platform.
One of the primary objectives is switching to the long-term support (LTS) release. This is because the current .NET 5 version is to be supported and debugged for 1.5 years since the release date. The upgraded nopCommerce 4.50 version is already based on the .NET 6 platform with a 3 years support, which is crucial for the end users and will provide the community with sufficient time to update their stores and plugins for them. That being said, expectations of the following version will be accompanied by regular upgrades, including security ones.

With the .NET 6 release, the Microsoft developers have brought .NET most closely to the single platform for developing all the application types present, starting with desktop and web applications, and ending with mobile apps development. Such a unification allows us to release a mobile application for nopCommerce in a single C# codebase, which will undoubtedly benefit our developer community in terms of immersion and understanding the entire nopCommerce ecosystem.

Also, we planned to raise the performance bar of our application with the switch to .NET 6. Going ahead, the measurement results revealed some interesting data regarding the nopCommerce evolution, and we would like to share them.

.NET 6 performance benchmarks in the application

To measure load and scalability, we chose a quite popular SaaS service, loader.io, as the test tool. An average machine for development was used as the server with the deployed application:

CPU - Intel(R) Core(TM) i5-7400 CPU 3.00 GHz
RAM - 16.0 GB

The tests were managed using Windows 10 (19044.1415) and IIS 10 (10.0.19041.1415). We used a standard database provided at the application setup. All of these were managed using MS SQL Server 2019 (19.0.2000).
To simulate the load, we chose the test configuration that would connect 250 users during a minute. The users would visit a few random application pages. These would be sufficient to provide the general picture of the platform response and visualize the difference relative to the previous versions.

Further, I will present the correspondence table with the nopCommerce application and .NET platform versions.

nopCommerce	4.30	4.40.4	4.50
.NET	.NET Core 3.1	.NET 5	.NET 6

We made 3 consecutive load tests to gain insights into the load nature and memory consumption on the server. The average results from several runs are given below.
Response time measurement (the less, the better). There is an evident trend in performance improvement compared to .NET 5 and .NET Core 3.1 versions: 46.1% and 65.3%, respectively.

Measurement of the memory usage by the application (the less, the better). The tests were run in succession for each platform without resetting the application pool. It should be considered that the .NET platform’s memory overhead has increased; this is apparently the inevitable cost of the enhanced performance. However, we must note that the optimization promised in .NET 6 can be seen here.

.NET 6 vs .NET 5: Load distribution

Let’s now consider the load distribution in the nopCommerce platform with .NET 6 in detail and compare it with the same test data for .NET 5. Importantly, here, we are showing the general trend for the system working on different platforms rather than revealing the limit values at which the system would go off balance because this is largely dependent on the technical data of the server under test.

Load distribution in .NET 6

Load distribution in .NET 5

Analyzing this, we can see an interesting pattern from the .NET 6 benchmarks: with an increasing number of clients per second, the average response time in the plot maintains a sufficient distance from that of .NET 5. The upgraded version’s curve is smoother and has fewer bursts. Another good indicator is that the curves don’t cross each other during the entire test. This is indirect evidence of the enhanced performance. .NET 6 handles the test more easily than .NET 5 does.

Summary

Once again, we have made sure that following the latest technological advances by Microsoft is beneficial. Apart from the improved performance, we got an upgraded platform that will allow us to move in a new direction. This is, of course, the mobile application: something we started heading to back in version 4.40 by implementing Web API that covers literally all the functions provided by our platform. We have slightly more memory overhead in favor of performance improvement: this should be considered when choosing the hosting provider. However, since the current version will be dominant among the others in our community in the mid-term, switching to it seems the most practical solution.

Learn more on the .net open-source platform's website or visit our GitHub repository

How to Migrate a Project From ASP.NET MVC to ASP.NET Core

Dmitry Kulagin — Tue, 12 Nov 2019 15:56:42 +0000

Step-by-step guide

Here is a practical guide on migrating a project from ASP.NET MVC framework to ASP.NET Core. Step-by-step instruction written by the team of nopCommerce open-source project can be easily applied to any ASP.NET MVC project. It also describes why you might need to upgrade, and why projects that do not yet keep up with pace should consider it.

Why porting to ASP.NET Core

Before proceeding to the steps of porting from ASP.NET MVC to ASP.NET Core (using nopCommerce as an example), let's take the quick overview of this framework advantages.

ASP.NET Core is already a fairly well-known and developed framework with several major updates making it quite stable, technologically advanced and resistant to XSRF/CSRF attacks.

Cross-platform is one of the distinguishing features making it more and more popular. From now on, your web application can run both in Windows and Unix environment.

Modular architecture - ASP.NET Core comes fully in the form of NuGet packages, it allows optimizing the application, including the selected required packages. This improves solution performance and reduces the time it takes to upgrade separate parts. This is the second important characteristic that allows developers to integrate new features into their solution more flexible.

Performance is another step towards building a high-performance application. ASP.NET Core handles 2.300% more requests per second than ASP.NET 4.6, and 800% more requests per second than node.js. You can check the detailed performance tests yourself here or here.

Middleware is a new light and fast modular pipeline for in-app requests. Each part of middleware processes an HTTP request, and then either decides to return the result or passes the next part of middleware. This approach gives the developer full control over the HTTP pipeline and contributes to the development of simple modules for the application, which is important for a growing open-source project.

Also, ASP.NET Core MVC provides features that simplify web development. nopCommerce already used some of them, such as the Model-View-Controller template, Razor syntax, model binding, and validation. Among the new features are:

Tag Helpers. Server-part code for participation in creating and rendering HTML elements in Razor files.
View components. A new tool, similar to partial views, but of much higher performance. nopCommerce uses view components when reusing rendering logic is required and the task is too complex for partial view.
DI in views. Although most of the data displayed in views comes from the controller, nopCommerce also has views where dependency injection is more convenient.

Of course, ASP.NET Core has much more features, we viewed the most interesting ones only.
Now let's consider the points to keep in mind when porting your app to a new framework.

Migration

The following descriptions contains large amount of links to the official ASP.NET Core documentation to give more detailed information about the topic and guide developers who face such a task the first time.

Step 1. Preparing a toolkit

The first thing you need is to upgrade Visual Studio 2017 to version 15.3 or later and install the latest version of .NET Core SDK.

Before porting, we advise to use .Net Portability Analyzer. This can be a good starting point to understand how labor-intensive porting from one platform to another will be. Nevertheless, this tool does not cover all the issues, this process has many pitfalls to be solved as they emerge. Below we will describe the main steps and the solutions used in nopCommerce project.

And the first and the easiest thing to do is to update links to the libraries used in the project so to they support .NET Standard.

Step 2. NuGet package compatibility analysis to support .Net standard

If you use NuGet packages in your project, check whether they are compatible with .NET Core. One way to do this is to use the NuGetPackageExplorer tool.

Step 3. The new format of csproj file in .NET Core

A new approach for adding references to third-party packages was introduced in .NET Core. When adding a new class library, you need to open the main project file and replace its contents as follows:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>netcoreapp2.2</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" Version="2.2.6" />
    ...
  </ItemGroup>
  ...
</Project>

References to the connected libraries will be loaded automatically. For more information on comparing the project.json and CSPROJ properties, read the official documentation here and here.

Step 4. Namespace update

Delete all uses of System.Web and replace them with Microsoft.AspNetCore.

Step 5. Configure the `Startup.cs` file instead of using `global.asax`

ASP.NET Core has a new way of loading the app. The app entry point is Startup, and there is no dependency on the Global.asax file. Startup registers the middleware in the app. Startup must include the Configure method. The required middleware should be added to the pipeline in Configure.

Issues to solve in Startup.cs:

Configuring middleware for MVC and WebAPI requests
Configuring for:
- Exception handling You will inevitably face various collisions during porting, thus be ready and set up exception handling in the development environment. With UseDeveloperExceptionPage, we add middleware to catch exceptions.
- MVC routing. Registration of new routes has also been changed. IRouteBuilder is now used instead of RouteCollection, as a new way to register restrictions (IActionConstraint)
- MVC/WebAPI filters. The filters should be updated in accordance with the new implementation of ASP.NET Core.
- MVC/WebAPI Formatters
- Binding models

//add basic MVC feature
var mvcBuilder = services.AddMvc();

//add custom model binder provider (to the top of the provider list)
mvcBuilder.AddMvcOptions(options => options.ModelBinderProviders.Insert(0, new  NopModelBinderProvider()));

/// <summary>
/// Represents model binder provider for the creating NopModelBinder
/// </summary>
public class NopModelBinderProvider : IModelBinderProvider
{
    /// <summary>
    /// Creates a nop model binder based on passed context
    /// </summary>
    /// <param name="context">Model binder provider context</param>
    /// <returns>Model binder</returns>
    public IModelBinder GetBinder(ModelBinderProviderContext context)
    {
        if (context == null)
            throw new ArgumentNullException(nameof(context));


        var modelType = context.Metadata.ModelType;
        if (!typeof(BaseNopModel).IsAssignableFrom(modelType))
            return null;

        //use NopModelBinder as a ComplexTypeModelBinder for BaseNopModel
        if (context.Metadata.IsComplexType &&!context.Metadata.IsCollectionType)
        {
            //create binders for all model properties
            var propertyBinders = context.Metadata.Properties
                .ToDictionary(modelProperty => modelProperty, modelProperty =>  context.CreateBinder(modelProperty));

            return new NopModelBinder(propertyBinders,  EngineContext.Current.Resolve<ILoggerFactory>());
        }

        //or return null to further search for a suitable binder
        return null;
    }
}

Areas To include Area in an ASP.NET Core app, add a regular route to the Startup.cs file. For example, this way it will look for configuring Admin area:

app.UseMvc(routes => { routes.MapRoute("areaRoute", "{area:exists}/{controller=Admin}/{action=Index}/{id?}"); routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); });

When doing it, the folder with the name Area with the Admin folder inside, should be in the app root. Now the attribute [Area("Admin")] [Route("admin")]. will be used to connect the controller with this area.
It remains only to create views for all the actions described in the controller.

[Area("Admin")]
[Route("admin")]
public class AdminController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Validation

IFormCollection should not be passed to the controllers since in this case, asp.net server validation is disabled. To solve the problem, this property might be added to the model, this will prevent us from passing directly to the controller method. This rule works only if a model is available, if there is no model, there will be no validation.

Child properties are no longer automatically validated and should be specified manually.

Step 6. Migrate HTTP handlers and HttpModules to Middleware

HTTP handlers and HTTP modules are in fact very similar to the concept of Middleware in ASP.NET Core, but unlike modules, the middleware order is based on the order in which they are inserted into the request pipeline. The order of modules is mainly based on the events of application life cycle. The order of middleware for responses is opposite to the order for requests, while the order of modules for requests and responses is the same. Knowing this, you can proceed with the update.

What should be updated:

Migration of modules for Middleware (AuthenticationMiddleware, CultureMiddleware, etc.)
Handlers to Middleware
Use of new middleware

Authentication in nopCommerce does not use a built-in authentication system; for this purpose, AuthenticationMiddleware developed in accordance with the new ASP.NET Core structure is used.

public class AuthenticationMiddleware
{
   private readonly RequestDelegate _next;
   public AuthenticationMiddleware(IAuthenticationSchemeProvider schemes, RequestDelegate next)
   {
       Schemes = schemes ?? throw new ArgumentNullException(nameof(schemes));
       _next = next ?? throw new ArgumentNullException(nameof(next));
   }

   public IAuthenticationSchemeProvider Schemes { get; set; }

   public async Task Invoke(HttpContext context)
   {
       context.Features.Set<IAuthenticationFeature>(new AuthenticationFeature
       {
           OriginalPath = context.Request.Path,
           OriginalPathBase = context.Request.PathBase
       });

       var handlers = context.RequestServices.GetRequiredService<IAuthenticationHandlerProvider>();
       foreach (var scheme in await Schemes.GetRequestHandlerSchemesAsync())
       {
           try
           {
               if (await handlers.GetHandlerAsync(context, scheme.Name) is IAuthenticationRequestHandler handler && await handler.HandleRequestAsync())
                   return;
           }
           catch
           {
               // ignored
           }
       }

       var defaultAuthenticate = await Schemes.GetDefaultAuthenticateSchemeAsync();
       if (defaultAuthenticate != null)
       {
           var result = await context.AuthenticateAsync(defaultAuthenticate.Name);
           if (result?.Principal != null)
           {
               context.User = result.Principal;
           }
       }
       await _next(context);
   }
}

ASP.NET provides a lot of built-in middleware that you can use in your application, but the developer can also create his own middleware and add it to HTTP request pipeline. To simplify this process, we added a special interface to nopCommerce, and now it’s enough to just create a class that implements it.

public interface INopStartup
{
    /// <summary>
    /// Add and configure any of the middleware
    /// </summary>
    /// <param name="services">Collection of service descriptors</param>
    /// <param name="configuration">Configuration of the application</param>
    void ConfigureServices(IServiceCollection services, IConfiguration configuration);

    /// <summary>
    /// Configure the using of added middleware
    /// </summary>
    /// <param name="application">Builder for configuring an application's request pipeline</param>
    void Configure(IApplicationBuilder application);

    /// <summary>
    /// Gets order of this startup configuration implementation
    /// </summary>
    int Order { get; }
}

Here you can add and configure your middleware:

/// <summary>
/// Represents object for the configuring authentication middleware on application startup
/// </summary>
public class AuthenticationStartup : INopStartup
{
    /// <summary>
    /// Add and configure any of the middleware
    /// </summary>
    /// <param name="services">Collection of service descriptors</param>
    /// <param name="configuration">Configuration of the application</param>
    public void ConfigureServices(IServiceCollection services, IConfiguration configuration)
    {
        //add data protection
        services.AddNopDataProtection();

        //add authentication
        services.AddNopAuthentication();
    }

    /// <summary>
    /// Configure the using of added middleware
    /// </summary>
    /// <param name="application">Builder for configuring an application's request pipeline</param>
    public void Configure(IApplicationBuilder application)
    {
        //configure authentication
        application.UseNopAuthentication();
    }

    /// <summary>
    /// Gets order of this startup configuration implementation
    /// </summary>
    public int Order => 500; //authentication should be loaded before MVC
}

Step 7. Using built-in DI

Dependency injection is one of the key features when designing an app in ASP.NET Core. You can develop loosely coupled applications that are more testable, modular and as a result more maintainable. This was made possible by following the principle of dependency inversion. To inject dependencies, we used IoC (Inversion of Control) containers. In ASP.NET Core, such a container is represented by the IServiceProvider interface. Services are installed in the app in the Startup.ConfigureServices() method.

Any registered service can be configured with three scopes:

transient
scoped
singleton

services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddSingleton<Isingleton,MySingleton>();

Step 8. Using WebAPI project compatibility shells (Shim)

To simplify migration of an existing Web API, we advise using the NuGet package Microsoft.AspNetCore.Mvc.WebApiCompatShim. It supports the following compatible features:

Adding ApiController type;
Enabling web API style model binding;
Extending model binding so that controller actions can accept HttpRequestMessage type parameters;
Adding message formatters enabling actions to return results of HttpResponseMessage type.

services.AddMvc().AddWebApiConventions();

routes.MapWebApiRoute(name: "DefaultApi",
    template: "api/{controller}/{id?}"
);

Step 9. Porting Application Configuration

Some settings were previously saved in the web.config file. Now we use a new approach based on the key-value pairs set by configuration providers. This is the recommended method in ASP.NET Core, and we use the appsettings.json file.

You can also use the NuGet package 'System.Configuration.ConfigurationManager' if for some reason you want to continue using *.config. In this case, the app cannot run on Unix platforms, but on IIS only.

If you want to use the Azure key storage configuration provider, then you need to refer to Migrating content to Azure Key Vault. Our project did not contain such a task.

Step 10. Porting static content to wwwroot

To serve static content, specify to web host the content root of the current directory. The default is wwwroot. You can configure your folder for storing static files by setting up middleware.

Step 11. Porting EntityFramework to EF Core

If the project uses some specific features of Entity Framework 6, that are not supported in EF Core, it makes sense to run the application on the NET Framework. Though in this case, we will have to reject the multi-platform feature, and the application will run on Windows and IIS only.

Below are the main changes to be considered:

System.Data.Entity namespace is replaced by Microsoft.EntityFrameworkCore;
The signature of the DbContext constructor has been changed. Now you should inject DbContextOptions;
HasDatabaseGeneratedOption(DatabaseGeneratedOption.None) method is replaced by ValueGeneratedNever();
WillCascadeOnDelete(false) method is replaced by OnDelete (DeleteBehavior.Restrict);
OnModelCreating(DbModelBuilder modelBuilder) method is replaced by OnModelCreating(ModelBuilder modelBuilder);
HasOptional method is no longer available;
Object configuration is changed, now OnModelCreating is using since EntityTypeConfiguration is no longer available;
ComplexType attribute is no longer available;
IDbSet interface is replaced by DbSet;
ComplexType - complex type support appeared in EF Core 2 with the Owned Entity type, and tables without Primary Key with QueryType in EF Core 2.1;
External keys in EF Core generate shadow properties using the [Entity]Id template, unlike EF6, that uses the [Entity]_Id template. Therefore, add external keys as a regular property to the entity first.
To support DI for DbContext, configure your DbContex in ConfigureServices.

/// <summary>
/// Register base object context
/// </summary>
/// <param name="services">Collection of service descriptors</param>
public static void AddNopObjectContext(this IServiceCollection services)
{
    services.AddDbContextPool<NopObjectContext>(optionsBuilder =>
    {
        optionsBuilder.UseSqlServerWithLazyLoading(services);
    });
}

/// <summary>
/// SQL Server specific extension method for Microsoft.EntityFrameworkCore.DbContextOptionsBuilder
/// </summary>
/// <param name="optionsBuilder">Database context options builder</param>
/// <param name="services">Collection of service descriptors</param>
public static void UseSqlServerWithLazyLoading(this DbContextOptionsBuilder optionsBuilder, IServiceCollection services)
{
    var nopConfig = services.BuildServiceProvider().GetRequiredService<NopConfig>();

    var dataSettings = DataSettingsManager.LoadSettings();
    if (!dataSettings?.IsValid ?? true)
        return;

    var dbContextOptionsBuilder = optionsBuilder.UseLazyLoadingProxies();

    if (nopConfig.UseRowNumberForPaging)
        dbContextOptionsBuilder.UseSqlServer(dataSettings.DataConnectionString, option => option.UseRowNumberForPaging());
    else
        dbContextOptionsBuilder.UseSqlServer(dataSettings.DataConnectionString);
}

To verify that EF Core generates a similar database structure as Entity Framework when migrating, use the SQL Compare tool.

Step 12. Removing all HttpContext references and replacing obsolete classes and changing the namespace

During the project migration, you will find that a sufficiently large number of classes have been renamed or moved, and now you should comply with the new requirements. Here is a list of the main changes you may encounter:

HttpPostedFileBase 🡪 FormFile
Access HttpContext can now be accessed via IHttpContextAccessor
HtmlHelper 🡪 HtmlHelper
ActionResult 🡪 ActionResult
HttpUtility 🡪 WebUtility
ISession instead of HttpSessionStateBase accessible from HttpContext.Session. from Microsoft.AspNetCore.Http
Request.Cookies returns IRequestCookieCollection: IEnumerable <KeyValuePair<string, string> >, then instead of HttpCookie we use KeyValuePair <string, string> from Microsoft.AspNetCore.Http

Namespace replacement:

SelectList 🡪 Microsoft.AspNetCore.Mvc.Rendering
UrlHelper 🡪 WebUtitlity
MimeMapping 🡪 FileExtensionContentTypeProvider
MvcHtmlString 🡪 IHtmlString and HtmlString
ModelState, ModelStateDictionary, ModelError 🡪 Microsoft.AspNetCore.Mvc.ModelBinding
FormCollection 🡪 IFormCollection
Request.Url.Scheme 🡪 this.Url.ActionContext.HttpContext.Request.Scheme

Other:

MvcHtmlString.IsNullOrEmpty(IHtmlString) 🡪 String.IsNullOrEmpty(variable.ToHtmlString())
[ValidateInput (false)] - does not exist anymore and is no longer needed
HttpUnauthorizedResult 🡪 UnauthorizedResult
[AllowHtml] - directive does not exist anymore and is no longer needed
TagBuilder.SetInnerText method is replaced by InnerHtml.AppendHtml
JsonRequestBehavior.AllowGet when returning Json is no longer needed
HttpUtility.JavaScriptStringEncode.🡪 JavaScriptEncoder.Default.Encode
Request.RawUrl. Request.Path + Request.QueryString should be separately connected
AllowHtmlAttribute - class no longer exists
XmlDownloadResult - now you can use just return File(Encoding.UTF8.GetBytes (xml), "application / xml", "filename.xml");
[ValidateInput(false)] - directive does not exist anymore and is no longer needed

Step 13. Authentication and authorization update

As was already mentioned above, nopCommerce project does not involve the built-in authentication system, it is implemented in a separate middleware layer. However, ASP.NET Core has its own system for credentials providing. You can view the documentation to know about them in details.

As for data protection, we no longer use MachineKey. Instead, we use the built-in data protection feature. By default, keys are generated when the application starts. As the data storage can be:

File system - file system-based keystore
Azure Storage - data protection keys in Azure BLOB object storage
Redis - data protection keys in the Redis cache
Registry - used if the application does not have access to the file system
EF Core - keys are stored in the database

If the built-in providers are not suitable, you can specify your own key storage provider by making a custom IXmlRepository.

Step 14. JS/CSS update

The way of using static resources has changed, now they should all be stored in the root folder of the project wwwroot, unless other settings are made.

When using javascript built-in blocks, we recommend moving them to the end of the page. Just use the asp-location = "Footer" attribute for your script tags. The same rule applies to js files.

Use the BundlerMinifier extension as a replacement for System.Web.Optimization - this will enable bundling and minification. JavaScript and CSS while building the project (view the documentation).

Step 15. Porting views

First of all, Child Actions are no longer used, instead, ASP.NET Core suggests using a new high-performance tool - ViewComponents called asynchronously.

How to get a string from ViewComponent:

/// <summary>
/// Render component to string
/// </summary>
/// <param name="componentName">Component name</param>
/// <param name="arguments">Arguments</param>
/// <returns>Result</returns>
protected virtual string RenderViewComponentToString(string componentName, object arguments = null)
{
    if (string.IsNullOrEmpty(componentName))
        throw new ArgumentNullException(nameof(componentName));

    var actionContextAccessor = HttpContext.RequestServices.GetService(typeof(IActionContextAccessor)) as IActionContextAccessor;
    if (actionContextAccessor == null)
        throw new Exception("IActionContextAccessor cannot be resolved");

    var context = actionContextAccessor.ActionContext;

    var viewComponentResult = ViewComponent(componentName, arguments);

    var viewData = ViewData;
    if (viewData == null)
    {
        throw new NotImplementedException();
    }

    var tempData = TempData;
    if (tempData == null)
    {
        throw new NotImplementedException();
    }

    using (var writer = new StringWriter())
    {
        var viewContext = new ViewContext(
            context,
            NullView.Instance,
            viewData,
            tempData,
            writer,
            new HtmlHelperOptions());

        // IViewComponentHelper is stateful, we want to make sure to retrieve it every time we need it.
        var viewComponentHelper = context.HttpContext.RequestServices.GetRequiredService<IViewComponentHelper>();
        (viewComponentHelper as IViewContextAware)?.Contextualize(viewContext);

        var result = viewComponentResult.ViewComponentType == null ?
            viewComponentHelper.InvokeAsync(viewComponentResult.ViewComponentName, viewComponentResult.Arguments):
            viewComponentHelper.InvokeAsync(viewComponentResult.ViewComponentType, viewComponentResult.Arguments);

        result.Result.WriteTo(writer, HtmlEncoder.Default);
        return writer.ToString();
    }
}

Note that there is no need to use HtmlHelper anymore, ASP.NET Core includes many auxiliary built-in Tag Helpers. When the application is running, the Razor engine handles them on the server and ultimately converts to standard html elements. This makes application development a whole lot easier. And of course, you can implement your own tag helpers.

We started using dependency injection in views instead of enabling settings and services using EngineContext.

So, the main points on porting views are as follows:

Convert Views/web.config to Views/_ViewImports.cshtml - to import namespaces and inject dependencies. This file does not support other Razor features, such as function and section definitions
Convert namespaces.add to @using
Porting any settings to the main application configuration
Scripts.Render and Styles.Render do not exist. Replace with links to output data of libman or BundlerMinifier

Conclusion

The process of migrating a large web application is a very time-consuming task which, as a rule, cannot be carried out without the pitfalls. We planned to migrate to a new framework as soon as its first stable version was released but were not able to make it right away, as there were some critical features that had not been transferred to .NET Core, in particular, those related to EntityFramework. Therefore, we had first to make our release using a mixed approach - the .NET Core architecture with the .NET Framework dependencies, which in itself is a unique solution. Being first is not easy, but we are sure we’ve made the right choice, and our huge community supported us in this.

We were able to fully adapt our project after the release of .NET Core 2.1, having by that time a stable solution already working on the new architecture. It remained only to replace some packages and rewrite the work with EF Core. Thus, it took us several months and two released versions to completely migrate to the new framework.

In this guide, we tried to put together the entire migration process in a structured form and describe various bottlenecks so that other developers could rely on this material and follow the roadmap when solving the same task.

To learn more about nopCommerce visit our GitHub