Creating an App

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.

Framework

Meta-Framework

SDK Generation

Before following these steps to generate a Next.js app, make sure you have Node.js 12.22.0 or later on your computer.

Full video tutorial

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@latest

Change directory with the cd command:

cd my-app

The 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.

Full video tutorial

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@latest

Change directory with the cd command:

cd my-app

The 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@latest

For this example, name your project my-app.

Change directory with the cd command:

cd my-app

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@latest

For this example, name your project my-app.

Change directory with the cd command:

cd my-app

React 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-app

React 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-app

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, say yes.
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 yes to running npm install.
Change directory with the cd command:

cd my-remix-app

Want 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, say yes.
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 yes to running npm install.
Change directory with the cd command:

cd my-remix-app

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, say yes.
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 yes to running npm install.
Change directory with the cd command:

cd my-remix-app

Want 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, say yes.
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 yes to running npm install.
Change directory with the cd command:

cd my-remix-app

To create a Svelte app, run the following commands:

npm create svelte@latest myapp cd myapp

At the command line, create your Vue app:

npm init vue@latest

Change directory with the cd command, where my-app is the name of the project you specified:

cd my-app

Before 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-app

Follow the prompts to create a new project. For this example, name your project my-app.

Change directory with the cd command:

cd my-app

Run npm install to install dependencies.

npm install

Before following these steps to generate a Qwik app, make sure you have Node.js 16 or later.

npm create qwik@latest

Follow the prompts, selecting the Qwik City starter.

Change directory with the cd command:

cd qwik-app

Create a React Native app:

npx create-expo-app@latest

Change directory with the cd command, where my-app is the name you gave your app:

cd my-app

For 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.

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-app

Follow the prompts to create a new project. For this example, name your project my-app.

Change directory with the cd command:

cd my-app

You 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.

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/cli

After you've installed the Angular CLI, enter the following command at the command line to create a new Angular app:

ng new my-builder-project

If 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-project

What's next

After you have an app, you can integrate with Builder. For instructions, visit Integrating Pages.

Was this article helpful?