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, with the appropriate values for your tenant and applications slugs on NOUMENA Cloud.

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

Adjust cloud.tenant and cloud.app in your npl.yml file to match your NOUMENA Cloud tenant and application slugs, and ensure that structure.frontend points to your built frontend directory (e.g. webapp/dist in the npl-demo example).

To deploy your frontend to NOUMENA Cloud, use the following command from the root of your project:

npl cloud deploy frontend

You may also specify the tenant, application, and frontend directory directly in the command, using the --tenant, --app, and --frontend command-line parameters.

When running this command, 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