Deploy Frontend Apps
To deploy a frontend application on Hostman, go to the App Platform section and click Create app.
Step 1. Connect Your Repository Copy link
You can connect a repository in one of two ways:
From your GitHub, GitLab, or BitBucket account
- Click on the platform name.
- Log in to your account.
- Select the desired repository in your Hostman dashboard.
If you are already logged in, Hostman will immediately show the available repositories. Choose the one you need.
By URL
You can connect any repository from any platform by providing its Git URL.
- Click Connect the repository via URL.
- Enter the Git URL of the repository.
- If the repository is private, also enter the access details.
Read more about connecting repositories here.
App Platform automatically detects your application's framework and runtime version from the repository, but you can change them manually if needed.
For Nuxt and Next.js apps, you can enable SSR support, which will allow you to choose a server configuration further on, as with backend applications.
Step 2. Select Branch and Commit Copy link
Branch
Select a branch for deployment.
The menu displays the 200 most recent branches, as well as the default branch (master, main, or default) if the repository is connected via GitHub, GitLab, or Bitbucket.
Commit
Leave the Build by the last executed commit option enabled if you want App Platform to deploy the latest commit and automatically rebuild the application when you add new commits to the repository. You can disable automatic deployment in the future.
If you want to select a specific commit, disable this option. Note that it will also disable automatic deployments.
Step 3. Select Server Region and Configuration Copy link
Region
Select the region where your app will be deployed.
Configuration
For frontend apps, server configuration cannot be customized. Each frontend application is allocated 2 GB of NVMe disk space. Applications are billed based on resource usage.
If earlier you enabled SSR support for Nuxt and Next.js apps, select your server configuration. You will be able upgrade your server later, however, downgrading will not be possible.
Step 4. Configure Additional Settings Copy link
Click Show advanced settings to configure additional parameters.
Any of these settings can be updated later, and you can redeploy the app with the new parameters.
Build Command
The command used to build the application from the repository root. App Platform will automatically suggest a build command for your project. You can edit it if necessary, but in most cases no changes are required.
Dependencies
If you need additional system packages (for example, for building a project), specify them here. They will be passed to the apt install command.
You can enter multiple dependencies separating them with spaces.
Build Directory
App Platform will automatically suggest a build directory for your project. 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.
If both Build Directory and Project Directory Path are specified, the final path used to serve the site files is constructed as:
/<Project Directory>/<Build Directory>For example:
- Project Directory:
/apps/frontend - Build Directory:
/dist
In this case, the files will be served from the /apps/frontend/dist directory.
Project Directory Path
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 this 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.
Environment Variables
Use variables to store and pass configuration values such as passwords, file paths, and tokens.
See more here.
Step 5. Enter App Information Copy link
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 Copy link
Click Create. 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, App Platform will monitor updates in the repository and, if automatic deployment is enabled, automatically rebuild the project with new changes.