Building Neptune Client for Windows 10 in Visual Studio 2017

This guide provides updated instructions for installing Neptune Client on Windows 10 using Visual Studio 2017. Please note that Visual Studio 2019 does not fully support Cordova apps in its pre/alpha phase, so it is recommended to use Visual Studio 2017.

This guide covers both Neptune DXP - SAP Edition and Neptune DXP - Open Edition stacks.

Prerequisites:

Install Node.js.
Install Cordova globally.
Install Visual Studio 2017.
Install the Visual Studio workload for Mobile Development with JavaScript.

Steps:

Open a new project using the "Blank App" (Apache Cordova) template.
To access the Cordova Toolset, make sure it is installed in Visual Studio 2017. Go to "Tools" -> "Get Tools and Features" -> "Individual Components."
Open the Config.xml file and set the target version to Windows 10. Fill in the other Windows properties such as the display and package name.
In the Config.xml file, under Toolset, choose the version of Cordova CLI you want to use. At the time of writing this documentation, we used CLI version 9.0.0. Make sure to use a compatible Cordova CLI version supported by your Visual Studio 2017 installation.
If Visual Studio is not detecting your globally installed Cordova, you can edit the config.xml file in the code editor. For example: <vs:toolsetVersion>9.0.0</vs:toolsetVersion>
In the Config.xml file, under Plugins, add the desired plugins.
You can choose the most commonly used Cordova plugins directly in Visual Studio 2017 or add custom plugins from sources like GitHub.
If you are using the SAP.N.database in your app, you also need to import the SQLite plugin:
GitHub Link
If your build fails after adding this plugin, you can refer to the solution provided in this post: Community Post Link
Go to Neptune DXP -> Run -> Mobile Client and export a VS 2017 Build by selecting "Build PhoneGap."
Once the build is finished, download the Windows build.
Unzip the downloaded file and copy/paste the Neptune folder and the index.html file into the "www" folder of your Cordova project in Visual Studio 2017.
Insert the necessary files under the "www" folder as shown below:
[Icon and Splashscreen Code Snippet]
We recommend keeping the original file names and replacing the desired images in the "/res/icons/windows" and "/res/screens/windows" folders.
Tips: The SplashScreen image does not fill the entire screen if the app window is larger than the SplashScreen image. Choose a SplashScreen graphic with a background color that you can extend to fill the entire SplashScreen. Set the background color using the preference: <preference name="SplashScreenBackgroundColor" value="0x00000000" />
Tips 2: To make the icon on the Windows taskbar full size, add the following images:
[Icon Code Snippet]
Set the desired architecture for your plugins before starting the build. You can set the Architecture in the Visual Studio 2017 menu bar.
Build the project to the "Local Machine" in order to test and debug it in Visual Studio 2017.
The app will be built and deployed to your machine. During startup, you might encounter some errors, which could be related to JavaScripterrors. These errors can be fixed on-the-fly. If you experience build errors, ensure that you are using a compatible Cordova version.
The app should now start, and you can test it in debugger mode in Visual Studio 2017. Here's an example from our Neptune Internal client:

Adding icons and splashscreens needs to be done directly in the config.xml file, as there is no "Designer" view for this in a Cordova project. Use the following code snippet as a template and modify it according to your desired icons and splashscreens:

Remember to replace the default images in the "/res/icons/windows" and "/res/screens/windows" folders with your own.

To create installation files:
Right-click on your project in the Solution Explorer and Choose "Store" -> "Create App Packages..."
If the "Create App Packages" button is disabled, you can follow this link to downgrade Visual Studio 2017 to a prior version to fix the issue: Link to Documentation
Choose "No" unless you are building for the Windows Store.
Choose the desired architecture for the build and the solution configuration (Debug/Release).
After the creation of the application files is complete, you can find the .appx files in the selected output location.
The Windows app can be installed using various methods. Please consult with your Windows deployment team/manager to determine their preferred distribution method, which typically involves using Windows management tools.

For limited testing and distribution, you can install the app via Sideloading:

Open PowerShell in Administrator mode.
Navigate to the folder containing your .appx file.
Install the app by running the command: add-appxpackage <appx-file-name>.appx
If the root certificate for the app is not installed on your machine, you will receive an error. To install the root certificate:
    Double-click on the .cer file located in the same folder as the .appx file.
    Choose "Install Certificate."
    Choose "Local Machine."
    Choose "Place all certificates in the following store" and click "Browse."
    Choose "Trusted Root Certification Authorities."
    Click "OK," "Next," and "Finish."
Run the add-appxpackage <appx-file-name>.appx command again in PowerShell, and the app should be installed.
The app is now installed and can be launched like any other Windows application from the Start menu.

In this example, we did not add an icon, so the default image is shown.

Choose your newly installed Windows 10 app and start using it.