Deploy Frontend Apps

To deploy a frontend application on Hostman, go to the App platform section and click Create app.

Step 1. Application Type

On the Frontend tab, your framework and the desired Node.js version.

Step 2. Repository and Branch

You can connect a repository:

• From your GitHub, GitLab, or BitBucket account. Click on the platform name, log in and select the desired repository. If you are already logged in, Hostman will immediately show the available repositories.

• By URL, providing a link to a repository created on any platform. Click Connect the repository via URL and enter the Git URL of the repository. If the repository is private, also enter the access details.

Read more about connecting repositories here.

Next, select a branch for deployment.

By default, we enable the Build by the last executed commit option. In this case, the App platform will deploy the latest commit, and later will automatically rebuild the application when you add new commits to the repository. If necessary, you can disable automatic deployment in the future.

If you want to select a specific commit manually, disable this option.

Step 3. Server Location and Configuration

Select the server location.

For all frontend applications, we offer a basic server configuration with 1 GB NVMe and a limit of 200 thousand requests per month.

For Nuxt and Next.js apps, you can enable SSR support, which allows you to choose a server configuration, as with backend applications.

Step 4. App Settings

At this stage, you can define the build command, install the required dependencies, specify the build directory, the project directory, and set environment variables.

Build Command and Build Directory

The App Platform will automatically suggest a build command and build directory for your project. You can edit them if necessary, but in most cases no changes are required.

The Build Directory parameter does not change the directory from which the build command is executed. Instead, it specifies the path (relative to the repository root) to the directory that will contain the built artifacts, such as index.html.

Dependencies

In the Dependencies section, you can specify system packages required, for example, to build the project. All listed packages will be passed to the apt install command. If you need to install multiple packages, list them separated by spaces.

Project Directory

By default, the build command runs from the root of the repository. If your project files, including package.json, are located in a subdirectory (for example, /apps/frontend), specify the path to that directory relative to the repository root in the Project directory path field.

When a path is specified:

• The working directory switches to the specified folder.
• Dependencies are installed using the project files located in that folder.
• Build and run commands are also executed from that folder.

Variables

You can also define environment variables if your project requires them.

You will be able to change any of these settings later and re-run the deployment with the new parameters.

Step 5. App Information

Here you can specify a name and a comment for your application to be displayed in the Hostman dashboard. You can also select a project to add the app to.

These settings can also be changed later.

Step 6. Deploy

Click Start Deploy. Once the process starts, you will see the deployment log on the Deploy tab.

The deploy log contains all the necessary information to solve possible issues. If something goes wrong, for example, due to errors in the code, the deploy log will display the notification about it specifying the cause of the problem.

When you first deploy a project, the server installation may take some time. Once the process is completed, the application status will be updated, and you will also see a message about this in the log.

All done!

You can find and copy your app’s URL (the technical domain that was linked to the app) on the main page of the App Platform section or in the Settings tab of your app. You can also link your own domain to the app.

The application will run on ports 443 and 80.

In the future, the App platform will monitor updates in the repository and, if automatic deployment is enabled, automatically rebuild the project with new changes.