Requirements
-
Shifter Headless ( must enable FaustWP and WPGraphQL plugins)
-
Node
Set up Shifter Headless
Get a WordPress URL and secret key for FaustWP
Create Shifter Headless site
![](/wp-content/uploads/2024/03/551010281-580a0b06654a99231d5a345a.png)
Copy WordPress URL
![](/wp-content/uploads/2024/03/551010336-f6f6a91b49adb36f071fee91.png)
Enable WP GraphQL and FaustWP plugin then copy a credential
Login to WordPress dashboard, then enable FaustWP and other necessary plugins such as WP GraphQL.
![](/wp-content/uploads/2024/03/456967842-f24dbba54afda9e87c21b982.png)
Navigate to [Settings] –> [Headless]
![](/wp-content/uploads/2024/03/456970227-e84bb718ce62ef8ed558677b.png)
Copy [Secret Key]
![](/wp-content/uploads/2024/03/456969485-db37c503f08c8028e6f9aa8f.png)
Edit permalink
Change permalink structure to /posts/%postname%/
![](/wp-content/uploads/2024/03/456982049-809ea86a6ee0052a1af37a55.png)
Modify WP GraphQL settings
Navigate to GraphQL menu, then check [Enable Public Introspection].
![](/wp-content/uploads/2024/03/458382574-c83622496bff3f514877607a.png)
Please make sure WordPress is running.
Create an app on local
Follow Quick Start Doc on Getting Started with Next.js | Faust.js (faustjs.org)
Create workspace
Run the following command:
npx create-next-app
-e https://github.com/wpengine/faustjs/tree/main
--example-path examples/next/getting-started
--use-npm
my-app
cd my-app
Edit .env.local
Rename .env.local.sample
to .env.local
.
Change value of NEXT_PUBLIC_WORDPRESS_URL
and FAUSTWP_SECRET_KEY
# Your WordPress site URL
NEXT_PUBLIC_WORDPRESS_URL=https://{site-id}.hl-a.getshifter.co
# Plugin secret found in WordPress Settings->Headless
FAUSTWP_SECRET_KEY={secret-key-on-WordPress}
Make a test by running dev
Run the command: npm run dev
to build local server.
% npm run dev
> next-headless-getting-started@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from ~/Faustjs/my-appc/.env.local
event - compiled client and server successfully in 3.4s (475 modules)
wait - compiling /404 (client and server)...
event - compiled client and server successfully in 632 ms (532 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 172 ms (540 modules)
Access development environment
Access http://localhost:3000 to confirm the sever fetches contents from Shifter Headless container.
![](/wp-content/uploads/2024/03/458347944-855c1f135e90a000aa6e7729.png)
Pushing files to Git repository
Create a git repository on GitHub, GitLab or Bitbucket, and push your local files.
On this document the repository ShifterHeadless-Faust-Vercel on GitHub.
Click [New] on GitHub or other Git service.
![](/wp-content/uploads/2024/03/458850864-6cfac878b70a1cf0c0074ae4.png)
Copy the repository’s URL.
![](/wp-content/uploads/2024/03/458851209-4433be0a39490973864ff42d.png)
Add the repository’s URL as a remote
% git remote add origin git@github.my-github-account/ShifterHeadless-Faust-Vercel.git
% git remote -v
origin git@github.com:my-github-account/ShifterHeadless-Faust-Vercel.git (fetch)
origin git@github.com:my-github-account/ShifterHeadless-Faust-Vercel.git (push)
Then push it.
% git push origin main
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 16 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 570 bytes | 570.00 KiB/s, done.
Total 4 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:my-github-account/ShifterHeadless-Faust-Vercel.git
90ce35a..863d1d4 main -> main
Set up Vercel
Login to Vercel dashboard
Connect your Vercel project and git repository
![](/wp-content/uploads/2024/03/458391211-b0441aad68bcb879ed91ff2e.png)
Almost done.
![](/wp-content/uploads/2024/03/458391477-af2223eb9d4a4064234e9679.png)
After importing the repository, Vercel will start deployment.
If it doesn’t start, push some updates to the branch. In this sample, it’s a main branch.
![](/wp-content/uploads/2024/03/458393964-f5818b96325b577181d3429a.png)
Access the provided domain name end with .vercel.app
You’ll get posts on your deployed site.
![](/wp-content/uploads/2024/03/458397037-1c00d027b48892444e017d8e.png)
That’s all!