Super Quick Start| Hitchhikers Platform

Overview

This doc teaches you the most basic flow for starting a Pages project. All of the recommendations are best-practices, which can be adapted to your own specific needs.

  • yext pages new - clone a starter repo and configure local dev setup
  • npm run dev - connect to your Knowledge Graph and spin up a dev server
  • npm run build:serve - make a production build to check your work before triggering a new deploy

Read on for more details about each of these commands.

Note: these commands are built into our starter and are aliased in the package.json. If you are building a project from a source other than a Yext starter, there are no guarantees the above commands will work.

Prerequisites

Before you get started, make sure you:

Starting a New Project

yext pages new

Once you have an account and have downloaded the CLI, you can run the following command to get started:

yext pages new

This command will initiate an onboarding flow in the command line, through which you can name your project, clone starter repos, and configure GitHub repositories.

Once you have cloned a starter and set up up your own GitHub repository through this command, you can begin local development.

Local Development

The starter repository configures two commands, which you should use in local development:

  1. npm run dev
  2. npm run build:serve

npm run dev

The npm run dev command will set up a connection with your Yext account’s Knowledge Graph and spin up a dev server at [localhost:5173](http://localhost:5173). The dev server supports hot reloading so any changes made to your code will be reflected right away.

This command also runs in dynamic mode by default, which means that any updates to your Knowledge Graph will also be reflected in your build. Dynamic mode is useful, so you can preview how changes to fields in your Knowledge Graph are displayed in your Pages front-end.

If you wish to only use local data for development and not pull data directly in real-time from your Knowledge graph, you can use the --local flag with npm run dev.

If you ever change your stream configuration, it is necessary to kill and restart the dev server so that any new fields can be pulled down from the Knowledge Graph.

npm run build:serve

Once you have finished local development and are ready to make a deploy, we recommend you run npm run build:serve. This command makes a full production build of your site mimicking the build environment used in the Yext deployment system, and will serve your project at [localhost:8000](http://localhost:8000).

This command makes a full production build, so hot-reloading is not supported.

While it is not strictly necessary to run this command before deploying, we recommend checking that your project builds correctly and renders properly before pushing a deployment to staging or production.

Deploying

If you set up a remote GitHub repository for your project following the yext pages new command, your project should be living under your GitHub account. If you have not done this step, you should set up a remote repo on your GitHub account before deploying.

Once your Pages code is in a GitHub repository, you can connect your repo to your Yext account by following the directions here.

By default, any new pushes to your GitHub repo will trigger a re-deploy of your Yext account.

Feedback