We highly recommend that you integrate Builder into an existing app; however, if you need to create an app, follow the steps for your framework.
Before following these steps to generate a Next.js app, make sure you have Node.js 12.22.0 or later on your computer.
As a complement to the written content in this document, the following video covers the process of integrating with Next.js along with commentary and audio instruction.
All commands and code snippets are available further down the page.
At the command line, run the following command to generate a Next.js app:
npx create-next-app@latestChange directory with the cd command:
cd my-appThe following video shows this process:
Before following these steps to generate a Next.js app, make sure you have Node.js 12.22.0 or later on your computer.
As a complement to the written content in this document, the following video covers the process of integrating with Next.js along with commentary and audio instruction.
All commands and code snippets are available further down the page.
At the command line, run the following command to generate a Next.js app:
npx create-next-app@latestChange directory with the cd command:
cd my-appThe following video shows this process:
Before following these steps to generate a Next.js app, make sure you have Node.js 12.22.0 or later on your computer.
At the command line, run the following command to generate a Next.js app:
npx create-next-app@latestFor this example, name your project my-app.
Change directory with the cd command:
cd my-appBefore following these steps to generate a Next.js app, make sure you have Node.js 12.22.0 or later on your computer.
At the command line, run the following command to generate a Next.js app:
npx create-next-app@latestFor this example, name your project my-app.
Change directory with the cd command:
cd my-appReact offers a number of ways to create an app with various frameworks.
At the command line, change directory with the cd command where my-app is the name of your app:
cd my-appReact offers a number of ways to create an app with various frameworks.
At the command line, change directory with the cd command where my-app is the name of your app:
cd my-appAt the command line, run the following command to generate a Remix app:
npx create-remix@latest- When you're prompted for your permission to install
create-remix, sayyes. - Accept the default suggested name,
my-remix-app. - For the type of app to create, choose Just the basics.
- For where to deploy, choose Remix App Server.
- Choose TypeScript.
- Respond
yesto runningnpm install. - Change directory with the cd command:
cd my-remix-appWant the latest and greatest of Remix with Builder? We recommend using Gen 2.
At the command line, run the following command to generate a Remix app:
npx create-remix@latest- When you're prompted for your permission to install
create-remix, sayyes. - Accept the default suggested name,
my-remix-app. - For the type of app to create, choose Just the basics.
- For where to deploy, choose Remix App Server.
- Choose TypeScript.
- Respond
yesto runningnpm install. - Change directory with the cd command:
cd my-remix-appAt the command line, run the following command to generate a Remix app:
npx create-remix@latest- When you're prompted for your permission to install
create-remix, sayyes. - Accept the default suggested name,
my-remix-app. - For the type of app to create, choose Just the basics.
- For where to deploy, choose Remix App Server.
- Choose TypeScript.
- Respond
yesto runningnpm install. - Change directory with the cd command:
cd my-remix-appWant the latest and greatest of Hydrogen with Builder? We recommend using Gen 2.
At the command line, run the following command to generate a Remix app:
npx create-remix@latest- When you're prompted for your permission to install
create-remix, sayyes. - Accept the default suggested name,
my-remix-app. - For the type of app to create, choose Just the basics.
- For where to deploy, choose Remix App Server.
- Choose TypeScript.
- Respond
yesto runningnpm install. - Change directory with the cd command:
cd my-remix-appTo create a Svelte app, run the following commands:
npm create svelte@latest myapp
cd myappAt the command line, create your Vue app:
npm init vue@latestChange directory with the cd command, where my-app is the name of the project you specified:
cd my-appBefore following these steps to generate a Nuxt 3 app, make sure you have Node.js LTS or later on your computer.
At the command line, run the following command to generate a Nuxt app:
npx nuxi@latest init my-appFollow the prompts to create a new project. For this example, name your project my-app.
Change directory with the cd command:
cd my-appRun npm install to install dependencies.
npm installBefore following these steps to generate a Qwik app, make sure you have Node.js 16 or later.
npm create qwik@latestFollow the prompts, selecting the Qwik City starter.
Change directory with the cd command:
cd qwik-appCreate a React Native app:
npx create-expo-app@latestChange directory with the cd command, where my-app is the name you gave your app:
cd my-appFor more information on getting started with React Native, visit the React Native documentation on Setting up the development environment.
To create an Angular v17+ app, refer to the Angular CLI documentation for the most recent workflow.
To create an Angular v17+ app, refer to the Angular CLI documentation for the most recent workflow.
Before following these steps to generate a Gatsby app, make sure you have Node.js 12 or later on your computer.
At the command line, run the following command to generate a Gatsby site:
npm init gatsby my-appFollow the prompts to create a new project. For this example, name your project my-app.
Change directory with the cd command:
cd my-appYou can integrate directly with Builder's HTML API instead of using an SDK. Builder pre-renders your content on its servers and provides the HTML for download, which you can insert into your page.
Create a catchall route in your back-end that downloads the pre-rendered HTML, inserts it onto the page, and responds to the client request with the page. You can use whichever framework you like.
The example app below uses Node.js, Express, and Axios. Copy and paste it into a new file named index.js and make sure that you have Node and Express installed in your development environment.
const express = require('express');
const app = express();
// Replace with your Public API Key.
const apiKey = YOUR_API_KEY;
const port = 3000;
const handleError = err => {
// The requested Builder content could not be found.
if (err.response.status === 404) {
return { data: null };
}
throw err;
};
// Catchall route
app.get('*', async (req, res) => {
const encodedUrl = encodeURIComponent(req.url);
const { data: pageData } =
await fetch(`https://cdn.builder.io/api/v1/html/page?apiKey=${apiKey}&url=${encodedUrl}`)
.then((res) => res.json())
.catch(handleError);
if (pageData) {
const pageHtml = pageData.html;
res.send(`
<html>
<head> <!-- Your head content here --> </head>
<body>
${pageHtml}
</body>
</html>
`);
} else {
res.status(404);
res.send(/* Your 404 page HTML */);
}
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
Take special notice of the API key import. In a later section of this tutorial, you'll replace YOUR_API_KEY with your public API key.
Tip: When using the HTML API to serve content you must integrate Builder previewing onto your site so that previews are accurate as outlined in the Previewing content section of the HTML API document.
To create a new app in Xcode:
- Open Xcode.
- In the File Menu, click File > New > Project.
- In the iOS section, choose App.
Tip: These instructions use AppModule. We are currently updating the Angular SDK to use standalone components.
The quickest way to create an Angular app is with the Angular CLI.
Install the Angular CLI, with the following command:
npm install -g @angular/cliAfter you've installed the Angular CLI, enter the following command at the command line to create a new Angular app:
ng new my-builder-projectIf you need to use a different version of Node, you can use nvm, or the Node Version Manager to install and run different versions Node as needed.
Answer yes to add Angular routing.
Select your stylesheet format. This demo provides CSS styles later.
Change directory with the cd command into your new project:
cd my-builder-projectAfter you have an app, you can integrate with Builder. For instructions, visit Integrating Pages.