# 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="/files/gLxTysaSQ3GxAdrYrWg3" alt="" data-size="original">

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

<img src="/files/NLrXkEvGMsk7LnkKkwGS" 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="/files/vSmmANfxR1TMC3q7D0Co" 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="/files/J7K5zRQJkYQumpldYjJY" 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="/files/KgCbUtbD8cMRt3sp6hBO" 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="/files/hb2Lg97zDU7vzmZhQZBk" 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="/files/Ucgng5aQPbaLiZ35LAOp" 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="/files/gE0ppZrr0TblxrlE4NOy" 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="/files/OCLQ4FGeTs6K9jD1nrr1" 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="/files/9IG6ceFpwmHT4Qa5Cqq2" 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="/files/REZwzf7wVT3olxcDKeHp" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ejaGxtGScASdcD2iGiCy" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/33CJ75jvpdLmpUzDL57f" alt=""><figcaption></figcaption></figure>

Finally, activate the new App:

<figure><img src="/files/sWFu8MeSWmeqiADhRNS6" alt=""><figcaption></figcaption></figure>

#### Create Launchpad

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

<figure><img src="/files/q8Gi4BitkQP1NXRZsc5o" alt=""><figcaption></figcaption></figure>

Edit the launchpad, adjusting the following configurations:

* Set custom start application

<figure><img src="/files/5B6IYgjE9V9ZeRpNyCdS" alt=""><figcaption></figcaption></figure>

* Remove Main Menu and Active Apps being displayed

<figure><img src="/files/VvgBkDfaJJpSMIVynMoI" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/1wGvqV8P04MBAwv1AlnA" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.theconfigteam.com/prebilt-ewm/installation/frontend-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.