DEV Community

Chandra
Chandra

Posted on

Deploying a React Project with Tencent EdgeOne Makers: From Localhost to Production

Building a web application is only half of the journey. After writing the code, testing it locally, and making sure everything works as expected, the next challenge is making the project accessible to real users.

For developers, deployment can sometimes feel more complicated than development itself. We may need to configure hosting, connect a Git repository, prepare build commands, manage domains, and think about performance.

This is where **Tencent EdgeOne Makers becomes interesting.

EdgeOne Makers is a Web and Agent development and deployment platform built on Tencent EdgeOne infrastructure. The platform supports different types of applications, including static websites, single-page applications such as React and Vue, and full-stack applications such as Next.js. It also provides Git-based deployment and CLI-based deployment workflows.

In this tutorial, we will look at a simple React project and walk through the deployment workflow.

1. Start with a React Project

For this example, we can use Vite with React because it provides a lightweight development workflow and is widely used for modern frontend projects.

After creating the project, the basic workflow looks like this:

npm create vite@latest edgeone-react-demo
cd edgeone-react-demo
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Once the development server is running, the project can be tested locally in the browser.

At this stage, everything still exists on the developer's machine. The next step is to turn the local project into a publicly accessible website.

*2. Prepare the Project for Deployment
*

Before deploying, make sure the application can successfully generate a production build.

Run:

npm run build

Enter fullscreen mode Exit fullscreen mode

If the build succeeds, the project is ready to be deployed.

One useful aspect of EdgeOne Makers is that the platform can detect common frameworks and apply appropriate build configurations. Build settings such as the root directory, build command, and output directory can also be customized when necessary.

For a typical Vite project, the production output is generated in the dist directory.

This separation between development and production builds is important. A project that works on localhost should still be tested through its production build before being published.

*3. Deploy Through Git
*

One of the simplest workflows is connecting the project to a Git repository.

The general process is:

  1. Push the React project to GitHub or another supported Git repository.
  2. Open the EdgeOne Makers console.
  3. Import the repository.
  4. Select the appropriate framework or allow the platform to detect it.
  5. Configure the build settings if necessary.
  6. Start the deployment.

After deployment, the project receives an online URL.

The Git workflow is especially useful for projects that are updated frequently. According to the official documentation, when a repository is connected to a production branch, new commits can trigger a new deployment automatically.

This changes the workflow from:

Code → Build manually → Upload manually → Publish

into something closer to:

Code → Git Push → Build → Deploy

That small difference can make a significant impact when a project goes through many iterations.

*4. Deploy Using the EdgeOne CLI
*

Developers who prefer working from the terminal can also use the EdgeOne CLI.

After installing the CLI and logging in, a project can be deployed using:

npm install -g edgeone
edgeone login
edgeone makers deploy -n edgeone-react-demo
Enter fullscreen mode Exit fullscreen mode

The current CLI namespace uses edgeone makers, reflecting the platform's transition from EdgeOne Pages to EdgeOne Makers. The official CLI documentation also provides commands for production and preview deployments.

This approach is useful when deployment needs to become part of a repeatable development workflow or CI/CD pipeline.

Instead of opening a dashboard every time, deployment can be integrated into the developer's existing tooling.

*5. Why the EdgeOne Makers Workflow Is Interesting
*

The most interesting part is not simply that a website can be hosted.

The bigger advantage is having multiple development and deployment capabilities within one platform.

For a simple frontend project, EdgeOne Makers can be used for static websites and SPA frameworks such as React and Vue.

For more advanced applications, the platform supports full-stack frameworks such as Next.js, including features such as SSR, SSG, ISR, API routes, and other modern application capabilities.

EdgeOne Makers also provides serverless capabilities and uses the Tencent EdgeOne global edge network for content delivery and acceleration.

That means the same platform can be relevant as a project grows.

A developer might start with a simple landing page, move to a React application, and eventually build a full-stack application without completely changing the deployment concept.

6. A Practical Best Practice
**
One lesson I would emphasize is: **do not treat deployment as the final step of development.

Deployment should be part of the development workflow from the beginning.

A practical workflow could look like this:

Local Development

Production Build

Git Repository

EdgeOne Makers

Deployment

Test Online

Improve

Git Push

New Deployment

This approach makes it easier to discover problems that do not appear during local development.

For example, environment variables, routing, build configuration, asset paths, and production-specific behavior should be tested after deployment rather than assumed to work.

*7. From EdgeOne Pages to EdgeOne Makers
*

There is also an important change developers should know about.

In June 2026, EdgeOne Pages was officially renamed EdgeOne Makers. The change reflects the platform's expansion beyond frontend hosting into full-stack Web development and AI Agent development. Existing accounts, projects, builds, and domains remain unchanged, so existing projects do not require migration.

The platform has also added native AI Agent capabilities, including an Agent runtime, session storage, tools, sandbox capabilities, and observability. It supports mainstream Agent frameworks such as OpenAI Agents, LangGraph, DeepAgents, and CrewAI.

This makes the name "Makers" more representative of the direction of the platform: not only hosting a page, but helping developers turn ideas into working products.

Conclusion

For developers who are used to building projects locally, deployment should not become a major obstacle between an idea and its users.

Tencent EdgeOne Makers provides a straightforward path from source code to an online application through Git or CLI workflows. It supports projects ranging from static websites and React/Vue SPAs to full-stack applications such as Next.js.

The most important takeaway is simple:

Build it. Push it. Deploy it. Test it. Improve it. Repeat.

A project that only exists on localhost is still an idea.

Once it is deployed, people can finally use it.

TencentEdgeOne #EdgeOneMakers #CODEPOLITAN #EdgeOne

Top comments (0)