Create a DevBox
This guide introduces how to use ClawCloud Run DevBox to create, develop, and deploy Next.js applications, including project setup, remote development with Cursor IDE, and cloud deployment.
Last updated
Was this helpful?
This guide introduces how to use ClawCloud Run DevBox to create, develop, and deploy Next.js applications, including project setup, remote development with Cursor IDE, and cloud deployment.
Last updated
Was this helpful?
ClawCloud Run DevBox is an all-in-one cloud development platform that integrates local development, online testing, packaging, and deployment. With simple click operations, you can quickly create the necessary environment and database dependencies. Developers can use their familiar local IDE for development while enjoying a simplified environment configuration process and an automated application deployment experience.
This guide will walk you through using DevBox to create a basic Next.js sample project.
Visit , click on the Devbox App, and then click the "Create Devbox" button. In the configuration, select Next.js as the development framework. Adjust the number of CPU cores and the amount of memory required for the project using the slider.
Scroll down to the "Network Setting" section of the configuration page.
Container Port:
Enter "3000" in the Container Port field. This is the default port that Next.js uses for development.
If you need additional ports, click the "Add Port" button and specify them.
Enable Internet Access:
Toggle the switch to enable internet access for your DevBox. This allows external users to access your Next.js application through the public internet using the provided domain.
Domain:
By default, ClawCloud Run provides a subdomain for your application.
If you want to use a custom domain, click on "Custom Domain" and follow the instructions to set it up.
Note: Ensure that the container port (3000) is consistent with the running port of the Next.js application. If you modify the port in the Next.js configuration, you need to update it here accordingly.
Click the "Create" button to complete the project creation.
After creating your project, you'll see it listed in the DevBox List. Each project has an "Operation" column with various options.
Locate your project in the DevBox List.
In the "Operation" column, click on the dropdown arrow next to the VSCode icon.
From the dropdown menu, select "Cursor".
Click on the "Cursor" option that appears.
Follow the instructions in the Cursor popup to install the DevBox plugin.
Once installed, Cursor will establish a remote connection to your DevBox runtime.
After the connection is established, you'll be able to access and edit your project files directly within the Cursor IDE environment.
After the connection is established, you'll be able to access and edit your project files directly within the This remote connection allows you to develop your Next.js application using Cursor IDE, with all the benefits of a cloud-based development environment: - Your code runs in the DevBox runtime, ensuring consistency across development and production environments. - You can access your project from anywhere, on any device with Cursor installed. - Collaboration becomes easier as team members can connect to the same DevBox runtime.
Open the terminal within Cursor IDE.
Navigate to your project directory if you're not already there.
Run the following command to start the Next.js development server:
This command will start your Next.js application in development mode.
Switch to the "Ports" tab of the Cursor panel.
Click the 🌐 button to the right of the address bar.
Select "Open in Browser" in the pop-up window to open and test the running app in your browser.
Return to the DevBox List in your browser.
Find the project you just created.
Click on the DevBox you want to access.
Look for the "Network" section.
You'll see an "Public Address" field.
Click on this external address.
This will open your Next.js application in a new browser tab, allowing you to view and interact with your running service.
In the Cursor IDE terminal, make sure you are in the project directory.
Run the build command ：
This command will generate a production-ready version of the application in the .next directory.
Open the Devbox project list.
Find your project and click the "Details" button.
In the project details page, find the "Version History" area and click the "Publish Version" button in the upper right corner.
In the pop-up "Publish Version" dialog box, fill in:
Image name: The system has pre-filled the project image name.
Version number: Enter the version number (e.g., v1.0).
Version description: Briefly describe the content of this release (e.g., "First release" or "Fix login functionality").
After checking that the filled information is correct, click the "Deploy" button.
The system will start processing the publishing request.
After completion, the new version will appear in the "Release" list, showing the version number, status, creation time, and description.
At this point, the Next.js application has been successfully packaged as an OCI image, which can be used for deployment or shared with team members. Each release creates a snapshot of the current code, making it easy to manage different versions and allowing for quick rollbacks if necessary.
After packaging the application as an OCI image, it can be deployed to the production environment through the ClawCloud Run. The specific steps are as follows:
Enter the deployment process:
In the "Release" area of the project details page
find the Release you want to deploy.
Click the "Deploy" button in the Actions column
the system will automatically jump to '"App Launchpad".
Set deployment parameters
In "App Launchpad", follow the deployment wizard to set up:
Select the appropriate runtime environment.
Set resource limits such as CPU and memory.
Configure necessary environment variables.
Set up storage volumes as needed.
Deploy the application
Click the "Deploy Application" button in the upper right corner, and the page will jump to the application details page.
When the status shows "running", it means the deployment is successful.
Click the access address under "Public Address", and you can open the deployed application in the browser.
After completing the above steps, the Next.js application is successfully deployed and can be accessed via the public network.
Through this complete workflow, you can conveniently develop and debug Next.js applications in a cloud environment while continuing to use your familiar local development tools. With the external access address, you can easily show the project progress to team members or customers. As long as they are connected to the Internet, they can access the application at any time.
After the development and testing of the Next.js application are completed, it can be packaged as an image to add version control and prepare for subsequent deployment.
