Deploying frontend to NOUMENA Cloud

Prerequisites

This track assumes you have:

• Installed the NPL CLI
• Completed the Deploying NPL to NOUMENA Cloud track
• A working NPL application with a frontend (e.g. the npl-demo application, which you can clone)

Overview

This track explains how to host your frontend on NOUMENA Cloud jointly with your app.

Preparing your frontend

Before deploying, ensure your frontend is properly configured:

1. The frontend should be configured to communicate with your NPL backend.

   If using the example provided by the npl-demo repository, for instance, configure the frontend to use the NPL backend by setting the VITE_SERVER_URL, VITE_AUTH_URL and VITE_AUTH_CLIENT_ID environment variables in the .env file.

2. Your frontend should be built and ready for production

   For example, if your frontend is in the webapp directory and use vite, you can install dependencies and build it with:

   cd webapp && npm i && npm run build

3. All necessary dependencies should be included

Deploying to NOUMENA Cloud

To deploy your frontend to NOUMENA Cloud, use the following command:

npl cloud deploy frontend --app YOUR_APP_NAME --tenant YOUR_TENANT_NAME --frontend ./webapp/dist

The CLI will:

1. Package your frontend application
2. Upload it to NOUMENA Cloud
3. Provide you with the URL where your frontend is accessible

Verifying deployment

After deployment, you can verify your frontend is working by:

1. Visiting the provided URL

   The website may take a few minutes to be available. Visiting the URL may return error code 502 - Bad Gateway in the meantime.

2. Testing the connection to your NPL backend

   You may need to Create app users in your NOUMENA Cloud app's keycloak service.

3. Checking that all features work as expected

Next steps

Once your frontend is deployed:

• Explore additional services available on NOUMENA Cloud
• Setup backups on NOUMENA Cloud
• Integrate your NPL Runtime within your system architecture