Skip to content

Deploying a static frontend to NOUMENA Cloud

This tutorial teaches you how to deploy a static frontend application (built with React, Vue, Angular, or plain HTML/CSS/JS) to NOUMENA Cloud. It covers the necessary configurations for API integration, IAM integration, and deployment steps.

A static frontend is a website made up of files like HTML, CSS, and JavaScript that do not change on the server. When you visit the site, your browser simply downloads and shows these files. There is no code running on the server to create or change the pages each time—they are always the same unless someone updates the files. This makes static frontends fast and easy to host. It can be combined with a backend API to provide dynamic functionality, such as user authentication, data fetching, and more.

Prerequisites

Before this track, you should have:

  • Completed the Using your NPL application track
  • NPL CLI installed and configured

  • A static frontend application (built with React, Vue, Angular, or plain HTML/CSS/JS). Ensure your frontend is functional by running

    npm run dev

  • The frontend build artifacts ready for deployment

Configuring integrations

To connect your frontend with your NPL backend and authentication services, update your frontend's API configuration to use the cloud endpoints for the NOUMENA Runtime and the IAM service, which is keycloak by default on NOUMENA Cloud.

The integration URL for the NOUMENA Runtime is typically can be found on the overview page of the NOUMENA Cloud application. It will look like:

https://engine-{your tenant}-{your app}.noumena.cloud

Similarly, the integration URL for the IAM service (Keycloak) can be copied from the keycloak service tab. It will look like:

https://keycloak-{your tenant}-{your app}.noumena.cloud/auth/realms/{your realm}

Update your frontend .env configuration file or create a config.js file to include the API and authentication URLs. Use these variables in your frontend code to make API calls and handle authentication.

Example frontend configuration:

// config.js
const config = {
  apiUrl: process.env.NODE_ENV === 'production' 
    ? 'https://engine-{your tenant}-{you app}.noumena.cloud'
    : 'http://localhost:12000',
  authUrl: process.env.NODE_ENV === 'production' 
    ? 'https://keycloak-{your tenant}-{your app}.noumena.cloud/auth/realms/{your realm}'
    : 'http://localhost:11000/auth/realms/{your realm}',
};

export default config;

Building your static frontend

Before deploying to NOUMENA Cloud, ensure your frontend application is built for production. The specific build command depends on your framework. For React, the command to compile the repository is typically 

npm run build

The build process will typically create a dist/ directory containing the static assets.

Ensure your build output in the dist/ folder includes:

  • An index.html file as the entry point
  • All CSS, JavaScript, and asset files
  • Any additional static resources (images, fonts, etc.)

For other frameworks, check their respective documentation.

Deploying to NOUMENA Cloud

Use the NOUMENA Cloud Portal

Navigate to your NOUMENA Cloud application in the portal, and follow these steps:

  1. Zip the contents of your dist/ directory (not the directory itself).
  2. Go to the "Frontend" section
  3. Click "Upload frontend zip"
  4. Select the archive you created in the previous step.

The form will show a confirmation message.

Note that it can take one or two minutes until the website becomes visible.

Once the upload is complete, you can access your deployed static frontend by navigating to the URL provided in the NOUMENA Cloud Portal, in the "Frontend" section. The URL will typically look like:

https://website-{your tenant}-{your app}.noumena.cloud

Next steps

After successfully deploying your static frontend to NOUMENA Cloud:

  • Configure custom domains for your application
  • Set up CI/CD pipelines for automated deployments
  • Implement monitoring and analytics
  • Explore advanced routing and caching configurations
  • Scale your application based on usage patterns

Further reading