These instructions help with Znode setup from start to finish. The instructions are divided into the following parts:

TABLE OF CONTENTS

• Part 1: Getting the Znode Code
• Part 2: Creating a Znode Database
• Part 3: Installing Web Compiler
• Part 4: Installing Typescript Compiler
• Part 5: Configuring NuGet
• Part 6: Configuring, Building and Running Znode
• Part 7: Exploring Znode
  • Logging in to the Admin UI
  • Publishing the WebStore
  • Troubleshooting Common Problems
  • Next Steps
  • Sample Data Sets
• Part 8: The Payment application in Znode application

It is assumed that Znode's dependencies are already installed. If that's not the case, start by Installing Znode Dependencies first.

Part 1: Getting the Znode Code

It is also assumed that Git is already installed. If that's not the case, see Git's official installation guide and install it.

Run the clone command at a Git Bash window:

git clone https://github.com/amlacommerce/znode.git

If prompted to do so, provide your GitHub credentials.

Part 2: Creating a Znode Database

DB create scripts are kept in the repository to enable easy creation of a new database.

There is a 'create script' within each of the folders that end with the '(for fresh installation)' suffix. Choose the latest available version (or whichever version is desired).

For more detail about how these scripts are organized, see Database Scripts.

Once the desired DB create a script is determined, follow these steps to run the create script and create the DB:

1. Open SQL Server Management Studio (SSMS).

2. In SSMS, open the DB and create the script.

3. Run the script. A new Znode DB will be created.*

*Note that the default DB name is 'Znode_Multifront_X', where X is the version. Search and replace all occurrences of that string in the script to choose a different name if desired.

Part 3: Installing Web Compiler

Overview

Many Znode styles are written in SASS to allow global variable definitions to be shared and leverage other features of SASS.

Znode uses SASS files for much of the source code. The browser only understands CSS though, so the Visual Studio solution must be configured to transpile *.scss files to *.css files.

Web Compiler

Web Compiler is a 3rd party plugin to compile Scss files directly within Visual Studio.

• For Visual Studio Version 2022 use the following web compiler version
  • Visit the Visual Studio Marketplace - https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64
• For Visual Studio Versions 2019 and below use the following web compiler version 
  • Visit the Visual Studio Marketplace - https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

Configure the Web Compiler plugin in the Admin and Webstore Projects to compile on the build

1. Right Click the two projects listed below

   1. \ZnodeMultifront\Projects\Znode.Engine.Admin\

   2. \ZnodeMultifront\Projects\Znode.Engine.WebStore\

2. Web Compiler > Enable compile on Build

You can reference the following screenshot below.

Once “Enable compile on build” has been enabled, a NuGet package will download and the option will retain the select from step #2 as referenced above.

The extension adds a compilerconfig.json file in the Znode.Engine.Admin & Znode.Engine.WebStore root projects. This file is used to configure all the SCSS  for the given theme compilation.

"outputFile": "Content/css/site.css", "inputFile": "Content/sass/site.scss"

Configure Style Transpilation

If using a custom theme (https://support.znode.com/support/solutions/articles/43000600341-creating-a-custom-theme) Visual Studio must be told which file is the root file from which to build the tree of files to transpile.

1. Edit the compilerconfig.json file to tell the plugin how to transpile *.scss styles to *.css styles.
2. Replace 'Default' with the custom theme's folder name.

The compilerconfig.json, before updating:

The compilerconfig.json, after updating:

Part 5: Configuring NuGet

To successfully build Znode, it is necessary to configure NuGet to access the private Znode NuGet Registry.

1. NuGet credentials have most likely already been provided to you, especially if you are attending a scheduled Znode training session. If you are unsure whether you have received these credentials, please search for an email with the text "NuGet". If you have not yet received such credentials, then please request access to the Znode NuGet Registry by emailing [email protected].

2. Add a custom NuGet package source in Visual Studio. Microsoft's instructions for doing so are here.

   1. The Source that needs to be entered into Visual Studio is https://nuget.znode.com/nuget.

   2. The Username and Password that needs to be entered into Visual Studio are that the Znode team provided.

Part 6: Configuring, Building and Running Znode

With Znode's dependencies installed and NuGet configured, it is now time to run Znode.

1. Open the main Znode solution, Znode.Multifront.sln.

2. Set multiple startup projects. The following projects need to start:

   1. Znode.Engine.Admin

   2. Znode.Engine.API

   3. Znode.Engine.WebStore

3. Build the solution.

4. Configure SQL connection strings in the API's Web.config. The ZnodeECommerceDB, Znode_Entities, and ZnodePublish_Entities strings need to be configured. For both settings, set:

   1. Data Source, User Id, and Password to that which is used to connect with SSMS (or as desired).

   2. Initial Catalog to the name of the Znode DB. The default is Znode_Multifront_{VERSION} where {VERSION} is replaced with the version number.

5. Run the solution. Visual Studio should automatically open the 3 applications in the default browser.

Part 7: Exploring Znode

Before exploring Znode in-depth, the following points should be known.

Logging in to the Admin UI

The Admin UI (running on http://localhost:44392 by default) requires credentials to log in. The default username and password are [email protected] and Z14ode_13E, respectively.

Publishing the WebStore

On a fresh install, the WebStore (running on http://localhost:44315 by default) will present a message saying:

This store has not been published yet.

This is because the store has not been published yet (documentation on publishing available in Knowledge Base). To publish the store:

1. Visit the “Stores” page on the Admin UI (http://localhost:44392/Store/List).

2. Click the globe icon on the Demo Store row. This will publish the Demo Store.

3. Refresh the WebStore (the localhost:44315 tab). The Webstore should now render with the default theme. There will still be no products or content because the default DB has no sample data.

Note: Sample data used to be included in the default DB, but starting with Znode v9.3.1, the default DB is empty.

Troubleshooting Common Problems

If you run into problems while trying to get Znode to build and run, see Troubleshooting Common Problems for possible answers.

Next Steps

Congratulations if you have successfully made it this far!

It is important to note that these instructions walk through the process of building and running the Znode SDK repository. There is also a Znode Source Code repository available. Read the SDK vs. Full Source Development documentation to understand the purpose of the two repositories.

Review other parts of this documentation for more in-depth information where desired.

Sample Data Sets

Sample media for a B2B and B2C data set are available in the ZIP files at the following links.

• B2B (Hardware) Media

• B2C (Fine Foods) Media (The Default (Fine Foods) theme has been deprecated and removed from the solution from Znode 9.7)

• To unzip the sample media folder and place it  in the following directory inside the API

  • \Znode.Engine.Api\Data\Media

Part 8: The Payment application in Znode application

The payment application is included in the Znode application. To run it, find the path that needs to be set up in the environment.

1. \znode\ZnodePayment 

   1. There will be two folders, one for setting up the payment DB script and one containing the payment application. 

   2. Setup for the DB script (Znode_Multifront_YourZnodeVersion_Payment.sql). 

      1. The Payment API URL can be found in the Znode Domain Table  Run the payment app (Znode.Multifront.PaymentApplication.sln).

2. Be sure to set the connection strings in the Znode.Multifront.PaymentApplication.Api to connect to the payment DB

3. The payment API URL (found in the Znode domain table) needs to be configured on the web. config of webstore and admin application.

Be sure of running both applications in order to utilize features such as adding a new payment method.