Official blog.
Our blog is built with teleportHQ's User Interface Definition Language (UIDL) and libraries. In this technology demo, we're generating Next.js code.
git clone https://github.com/teleporthq/blog.git
cd blog
npm i
npm run build
npm run dev
NOTE: our blog is an app which is mounted on https://teleporthq.io/blog thanks to the awesome Now platform. Therefore, locally only urls built after /blog
will be working.
The purpose of this repo is to demonstrate how a teleport project (plain JavaScript object or JSON file respecting teleportHQ's UIDL) can be transformed in real-time in a chosen target code.
src/index.ts
: main file in which we're building a teleport project definition, generating the code, and saving the files to disk, in thedist
foldersrc/data/target.ts
: a configuration object (common to) and injected in all pagessrc/data
: list of all the project elements, components and pages, wrapped into functions
When you run npm run dev
we chain 2 operations:
- on every file change in
src
folder, we transpile in memory and run all our TypeScript code widthts-node
. At this stage, all the code of our Next.js project is generated in thedist
folder - then we run
npm run dev
indist
folder. This will start Next.js default server and you can see your project on http://localhost:3000
At every change, you can see the resulting teleport project definition file here: http://localhost:3000/static/blog/teleport.json