# Frontend installation

{% stepper %}
{% step %}

#### Create a project

In Gitlab, fork the latest version of <https://gitlab.config.team/theconfigteam/tctm/releases/ewm/tctm_ewm_ui_base>.

<img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-0f3cafbba969da06be32562687470df2a5c99870%2FEWM-Create%20Customer%20Project%2001.png?alt=media" alt="" data-size="original">

Select the proper customer URL (have it created if it doesn’t exist).

<img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-d53a4849d6c69be0b55f1ab742e9b7c2091e6c8b%2FEWM-Create%20Customer%20Project%2002.png?alt=media" alt="" data-size="original">
{% endstep %}

{% step %}

#### Create a clean workspace

You can clone the repository anywhere, but it’s recommended to use a consistent structure.

* On your C: drive, create a folder:
* C:\Customers
* Inside it, create a folder for your customer/project, for example:
* C:\Customers\Customer1

Final example path: C:\Customers\Customer1
{% endstep %}

{% step %}

#### Clone the repository

* Open PowerShell or Terminal.
* Navigate to your customer folder:  cd C:\Customers\Customer1
* Clone the repository: Change the highlighted to match the actual git customer folder name

<kbd>git clone <https://gitlab.config.team/theconfigteam/tctm/releases/></kbd><kbd><mark style="background-color:red;">git customer folder name<mark style="background-color:red;"></kbd><kbd>/tctm\_ewm\_ui\_base.git</kbd>

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2FKVQFMgo9HY7mi3XCxzLU%2Fimage.png?alt=media&#x26;token=de8b360e-2adc-48f0-a848-879bddd33506" alt=""><figcaption></figcaption></figure>

After cloning, you should have a folder like: C:\Customers\Customer1\tctm\_ewm\_ui\_base
{% endstep %}

{% step %}

#### Open the project in VS Code

* Open Visual Studio Code.
* Click Open Folder.
* Select: C:\Customers\Customer1\tctm\_ewm\_ui\_base

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2FaBkT4TqlWILei8JOUNd4%2Fimage.png?alt=media&#x26;token=62df4452-a531-4200-8dcf-c11e68c4e0ce" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Install dependencies (npm install)

* In VS Code, go to Terminal → New Terminal.
* Confirm you’re in the project root (you should see something like ...\tctm\_ewm\_ui\_base> in the terminal).
* Run: <kbd>npm install</kbd>

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2FHNEkLB8StjYuBOct2FfK%2Fimage.png?alt=media&#x26;token=5c881740-4681-4a5d-b427-a0057a4e1482" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Configure deployment settings (deploy.conf)

Rename the template config file. In the project, go to the deploy folder and rename the template file:

* From: deploy.conf.tmpl
* To: deploy.conf

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2FDaPAIe9Zd1dBadvpJhuN%2Fimage.png?alt=media&#x26;token=a657498d-f04b-4904-8de8-93f7fb99d70b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This is a file rename, not a folder rename. You should end up with: <kbd>deploy/deploy.conf</kbd>
{% endhint %}
{% endstep %}

{% step %}

#### Update settings (project name + presentation device)

* Open: deploy/deploy.conf

Update these fields to match your customer/project

* projectName="Customer1"
* presentationDevice="ZV01"

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2F5d9WvEI24299H0prYM7s%2Fimage.png?alt=media&#x26;token=f0aae98f-9811-44cd-af6b-67dca9085bcb" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Update login settings

Example

* startURL="<https://mysapsystem.com/tctm\\_ewm>"
* system="DE1"
* client="100"
* sso=false

Set:

* startURL=Full path where the app will be accessed
* system=System ID label
* client=SAP client
* sso=Only set sso=true if you’ve been explicitly told to enable SSO\
  Otherwise keep sso=false

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fdo7se7dibFrKgw2H9YP0%2Fimage.png?alt=media&#x26;token=14704cc0-d887-4f3b-966f-f6067dc005e2" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Enable/extend language options (optional)

By default, the language array may be commented out like this:

* \# languages=\[
* \#   { key = "EN", text = "EN - English" },
* \#   { key = "DE", text = "DE - German" }

To enable it:

* Remove the leading #.
* Add/remove languages as needed.

Example enabled:

* languages=\[
* &#x20; { key = "EN", text = "EN - English" },
* &#x20; { key = "DE", text = "DE - German" }

{% hint style="info" %}
If you include more than one language, the app will typically show a dropdown selector.
{% endhint %}
{% endstep %}

{% step %}

#### Plugin Activation

In the <kbd>deploy.conf</kbd> file, manually activate the plugins by changing the value of the buildPlugin to "true"

{% hint style="warning" %}
Only activate the Plugins you require
{% endhint %}

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2FDmB57BiIN3L7D5FxKWpC%2Fimage.png?alt=media&#x26;token=f84f392c-000a-4d90-bc8a-2b02c879ff88" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Build and deploy

{% tabs %}
{% tab title="PreBilt Standalone Edition" %}
Build distribution folder

* Open the terminal and run:
* `npm run deploy -- platform=fiori`
  {% endtab %}

{% tab title="Neptune" %}

#### Build the XML

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-b7cbc4ffb34d5b8866c4c1f009244391cf1d3c05%2FEWM-neptune%20build%20and%20deploy%2001.png?alt=media" alt=""><figcaption></figcaption></figure>

Copy and paste:

```
npm run deploy – platform=neptune
```

This will create dist/neptune/final.xml which can be used to import the App into Neptune.

#### Create New Neptune App

Run transaction */NEPTUNE/COCKPIT* in SAP to get to the Neptune Cockpit.

Find the App Designer and create a new app called TCTM\_EWM:

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-82d4c10e318433791441950d29dfcc6cdbb5beff%2FEWM-neptune%20build%20and%20deploy%2003.png?alt=media" alt=""><figcaption></figcaption></figure>

In the App Designer, Import the final.xml file created before:

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-a4af085a2ea14f4101f9d27b7a9e5bb847125564%2FEWM-neptune%20build%20and%20deploy%2004.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-3a08ffbac30ee04469ec7cbb7d64bb3eef18be29%2FEWM-neptune%20build%20and%20deploy%2005.png?alt=media" alt=""><figcaption></figcaption></figure>

Finally, activate the new App:

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-83b1c090020683d039ccc90421946764edf21f5c%2FEWM-neptune%20build%20and%20deploy%2006.png?alt=media" alt=""><figcaption></figcaption></figure>

#### Create Launchpad

In the Neptune Cockpit under Run -> Launchpad, create a new Launchpad.

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-413848253120aea46d5aed9b3da42e7261ec23d7%2FEWM-neptune%20build%20and%20deploy%2008.png?alt=media" alt=""><figcaption></figcaption></figure>

Edit the launchpad, adjusting the following configurations:

* Set custom start application

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-244e7041a30530e1a2b36632051428d799aa3647%2FEWM-neptune%20build%20and%20deploy%2009.png?alt=media" alt=""><figcaption></figcaption></figure>

* Remove Main Menu and Active Apps being displayed

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-dc42d516397b1b80a5beda2d83743871d0b46051%2FEWM-neptune%20build%20and%20deploy%2010.png?alt=media" alt=""><figcaption></figcaption></figure>

Save the new launchpad and press **Run**.

<figure><img src="https://1016750988-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7lFTpSLijn44pippdL6u%2Fuploads%2Fgit-blob-dc01a01b0f71f46c9201c63ad194a88df074ff2d%2FEWM-neptune%20build%20and%20deploy%2011.png?alt=media" alt=""><figcaption></figcaption></figure>

Bookmark the Link as the starting point for any mobile devices.

For further information, see Neptune specific documentation here: <https://docs.neptune-software.com/neptune-sap-edition/24/index.html>
{% endtab %}
{% endtabs %}
{% endstep %}
{% endstepper %}