Client setup

info

This chapter focuses solely on installing the client component!

If you haven't set up the FDM Monster server yet, please refer to the Server Setup guide.

Prerequisites

Before you begin, ensure that you have the following tools installed on your system:

Node.js 18 LTS
Yarn 1.22.0 or higher
VS Code or WebStorm (your choice of IDE)
FDM Monster Server

Clone the Repository

tip

Ensure you are not inside the server directory or any of its subfolders!

To get started, clone the FDM Monster Vue client repository from GitHub

git clone -b develop https://github.com/fdm-monster/fdm-monster-client.git

Setting Up the Development Environment

Navigate to the cloned repository
```
cd fdm-monster-client
```
If you haven't installed yarn yet, install yarn
```
npm install -g yarn
```
Install the dependencies using yarn
```
yarn install
```
Create a run configuration for the Vue development server in your IDE of choice (either VS Code or WebStorm):
- VS Code: Create a run configuration that executes yarn run serve as the command. (See VS Code Run Configuration for detailed steps.)
- WebStorm: Create a run configuration that executes yarn run serve as the command. (See WebStorm Run Configuration for detailed steps.)
Launch the Vue development server. Please note that the server will automatically reload if you make any changes to the source code. Please ensure that the FDM Monster server is running as well.
Access the running server at http://localhost:8080 in your preferred web browser.

VS Code Run Configuration

tip

If the file ".vscode/launch.json" exists and looks correct, you can skip steps 2 to 4.

Open VS Code and navigate to the "Run and Debug" panel.
Click on the link create a launch.json file to open the launch.json file. You should select Node.js as the type. If this does not work, you can manually create the file in the .vscode folder in the project root directory.

Paste the JSON content provided below into the launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "FDM Monster Vue Client (serve)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "run",
        "serve"
      ],
      "cwd": "${workspaceFolder}"
    }
  ]
}

Save the configuration and close the launch.json file.
In the "Run and Debug" panel, select "FDM Monster Vue Client (serve)" from the dropdown.

Press ctrl+F5 to launch the Vue development server without debugging. Alternatively, you can press F5 to launch the Vue development server with debugging (this could potentially be a lot slower).
For more information on how to develop Vue with VS Code (f.e. using Vetur), refer to the VS Code VueJS Tutorial.

WebStorm Run Configuration

Open WebStorm and go to the "Run" menu.
Click on "Edit Configurations..." to open the "Run/Debug Configurations" dialog.
Click on the "+" icon to add a new configuration and select "NPM" from the dropdown.
Provide a name for the configuration (e.g., FDM Monster Vue Client (serve)).
Set the package.json file in the cloned repository: fdm-monster-client/package.json.
Set the Command to run.
Set the Scripts to serve.
Set the "Node interpreter" to the appropriate Node.js executable (e.g. v18.14.2).
Click "OK" to save the configuration.
In the top-right corner of WebStorm, select the created configuration from the dropdown.
Click on the green play button or press shift+F10 to launch the server without debugging. Alternatively, you can click on the green-red bug button or press shift+F9 to launch the server with debugging.

Next Steps

Congratulations! You have successfully set up the FDM Monster client. You can now start developing the client.

To set up a Virtual printer follow the OctoPrint Setup documentation.

Prerequisites​

Clone the Repository​

Setting Up the Development Environment​

VS Code Run Configuration​

WebStorm Run Configuration​

Next Steps​