Skip to main content

Front-End Applications

On the Dind.io platform, you can deploy your Create-React-App, Webpack, Rspack, Vite, Next.js, Remix, Vue-CLI and Nuxt projects written with React and Vue.

To do this, navigate to the "Projects" section on the Dashboard and click on the "Deploy new project" button.

react01

Currently, only deploying projects from GitHub is supported.

react11

In the future updates, Gitlab and Bitbucket will also be supported.

To deploy your React apps, start by choosing GitHub and proceed. You'll be prompted to log in to your GitHub account.

react02

Next, you'll encounter a screen where the "Dind" application on GitHub asks for permissions.

Select "Authorize Dindapp" to grant permissions for the platform.

react03

After that, you can specify which repositories will appear on the Dind.io platform. Choose either "All repositories" to grant access to all your repos or "Only select repositories" to specify which repos to allow.

Once you've selected the repositories, click "Install" to proceed.

react04

You will then be redirected to our platform, and the selected repositories will now appear there.

You can modify these permissions anytime by using the "Adjust GitHub App Permissions" button.

react05

Now you can proceed with deployment. Simply, click on the project you want to deploy.

Note

Remember that in the Free version, only your Public repositories can be deployed.

react06

On the "Configure site and deploy" page, you can familiarize yourself with your project's configurations and make adjustments.

Under "Branch" select the appropriate branch, and in the "Build Command" section, you can change the build command.

Build command is a command to be executed to build your project, be sure to give correct command or leave empty for default build command.

If your project uses any environment files, you can choose them in the "Environment" field or specify variables in the "Runtime environment variables" section.

Note

The Build Command and Environment file selections are automatically detected and can be modified.

After making your changes, click "Deploy" to run your GitHub repository's application on the Dind.io platform.

If the deployment is successful or if an error occurs, you will see instant notifications on the screen.

react07

Upon successful deployment, you can view the functional state of your code via the automatically generated link.

The URL is unique for per-project and will be regenerated for each fresh deployment.

By clicking on a successfully running or errored project, you can view details on the "Project info" page.

Under "Main", you can see the essential features of your application, and under "Properties", you can find information such as repository name, programming language choice, framework, and build command.

In the "Environment Variables" section, you'll find the key-value pairs you entered while creating the project, and under "Specification" you can learn about the RAM and CPU values your project uses.

react08

Under the "Activities" section, you can track whether the deployment was successful, recent changes deployed, and information about commits to the GitHub repository.

Including the latest commit information

Additionally, you can view the "Build time" and check your Build logs by clicking on "Deployment".

react09

react10

Note

Whether the build process succeeds or encounters an error, you can track both success logs and error logs here.

Under "Logs", you can monitor real-time logs of the running application.

From the main screen and also on the "Project info" page, you can stop, start, restart, or delete a running app.

Note

In the Free version, you can deploy up to 3 projects simultaneously. To deploy a new project, you must first delete one of the existing ones. Each project has a lifespan of 1 month and will be deleted after this period.