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
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.
Step 4. App Settings
At this stage, you can define the build command, install the required dependencies, specify the build directory, and set environment variables.
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 application Build Command is always executed from the root of the repository, so the package.json file must also be located at the repository root. If package.json is located in a different directory, you must specify that directory in the build command. For example, if package.json is located in the landing directory, the build command should look like this:
npm run --prefix landing build
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.
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.
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.
