Generate Your First Project

This guide is your starting point in exploring the project generators. To fully understand the process make sure you have a good understanding of the component generation process.

A project UIDL can define a fully working website. The UIDL consists of:

• a collection of component UIDLs
• logic for routing the different pages of the application
• global settings and meta tags

The easiest way to get started is to grab one of the pre-configured project generators. In this guide, we will use the teleport-project-generator-next one. This will generate a fully working Next.js (opens new window) application with pages and components.

npm install @teleporthq/teleport-project-generator-next

Before you use the package, make sure you have a valid ProjectUIDL. You can start from this official example (opens new window) or you can create your own starting from the example.

Then you can use the teleport-project-generator-next package in any JS/TS file, like this:

import { createNextProjectGenerator } from "@teleporthq/teleport-project-generator-next"

const uidl = {
  /* your uidl sample */
}

const nextGenerator = createNextProjectGenerator()
const result = await nextGenerator.generateProject(uidl)

console.log(result)

The result will be an object of type GeneratedFolder:

interface GeneratedFolder {
  name: string
  files: GeneratedFile[]
  subFolders: GeneratedFolder[]
}

interface GeneratedFile {
  name: string
  content: string
  contentEncoding?: FileEncoding
  fileType?: string
  location?: FileLocation
  status?: string
}

Running the code with our sample Project UIDL should give you this output (the content part has been removed for easier readability):

{
  "name": "teleport-project",
  "files": [
    {
      "name": "package",
      "fileType": "json",
      "content": "..."
    }
  ],
  "subFolders": [
    {
      "name": "pages",
      "files": [
        {
          "name": "index",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "team",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "contact-us",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "_document",
          "fileType": "js",
          "content": "..."
        }
      ],
      "subFolders": []
    },
    {
      "name": "components",
      "files": [
        {
          "name": "navbar",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "person-spotlight",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "person-list",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "contact-form",
          "fileType": "js",
          "content": "..."
        },
        {
          "name": "expandable-area",
          "fileType": "js",
          "content": "..."
        }
      ],
      "subFolders": []
    }
  ]
}

The next project generator is pre-configured with a project strategy, which specifies where to create each type of file.

WARNING

A project generator on its own does not output a working/runnable project, as it usually needs some sort of boilerplate/template to start from. We provide that, as an abstraction, together with the ability to publish your projects in project packers.

The next guide will show you how to create a custom project generator by defining your own project strategy. If you are happy with one of the pre-configured project generators, you can skip to the next guide, that will show you how to pack your project and publish it.