Building Shifter Headless website/webapp with Frontity Framework React and deploying to Vercel

Requirements

Make sure git and npm correctly works or install them if you haven't.

Shifter account (Creating an account)
GitHub account
AWS account
Node.js
Vercel

Start up Shifter Headless WordPress

1. Login to Shifter Headless dashboard

https://go.getshifter.io/admin/headless/

2. Start Headless WordPress

For more details, checkout support document: Start up Shifter Headless WordPress
https://support.getshifter.io/en/articles/3981108

Connecting Vercel

3. Sign up to Vercel

https://vercel.com/

4. Choose your favourite Git service or sign up with e-mail.

5. Click [Authorize New by Vercel (formerly ZEIT)] button (if you choose Git service)

6. Sign up completed

Set up Frontity sample site

7. Git clone our sample repository to local and dive into it

$ git clone git@github.com:getshifter/example-frontity-wordpress.git 
$ cd example-frontity-wordpress

8. Modify frontity.settings.js

Open frontity.settings.js with your favourite editor
or with vi.

$ vi frontity.settings.js

Then rewrite URL around line 5, from

"frontity": {
  "url": "https://test.frontity.io",

"frontity": {
  "url": "https://YOUR-SHIFTER-HEADLESS-URL",

Also, around line 44

"source": {
  "api": "https://b5d85ac952f05c2bcb7e0b42979eff431beac2f1.hl-a.getshifter.co/wp-json"
}

"source": {
  "api": "https://YOUR-SHIFTER-HEADLESS-URL/wp-json"
}

Double check and save changes.

Additionally, you can change menu from

"menu": [
            [
              "Home",
              "/"
            ],
            [
              "Edge Case Category",
              "/category/edge-case-2/"
            ],

"menu": [
            [
              "Home",
              "/"
            ],
            [
              "Menu Item #1",
              "menu-item-1"
            ],

or anything else.
Never forget save changes.
　

Start local server

9. Install additional for the project

$ npm install

10. Run below command to start local server

$ npm run dev

npm returns below

SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module

and http://localhost:3000 will be opened up with your web browser.

11. Check how your web site works

12. Pushing `[Control]` key and `[C]` key to stop server.

Build website and deploy

13. Build website

$ npm run build

It may take a while.

14. Login to Vercel (now.sh)

$ npx now login

Now CLI 18.0.0
Enter your email: YOUR-EMILADDRESS

We sent an email to YOUR-EMILADDRESS. Please follow the steps provided inside it and make sure the security code matches Kind Lion.

✔ Email confirmed
Congratulations! You are now logged in. In order to deploy something, run `now`.
💡  Connect your Git Repositories to deploy every branch push automatically (https://zeit.ink/1X).

15. Deploy build website to Vercel (now.sh)

$ npx now --prod

Now CLI 18.0.0
? Set up and deploy “example-frontity-wordpress”? [Y/n] y
? Which scope do you want to deploy to? NAME-OF-SCOPE
? Link to existing project? [y/N] n
? What’s your project’s name? example-frontity-wordpress
? In which directory is your code located? ./
🔗  Linked to NAME-OF-SCOPE/example-frontity-wordpress (created .now)
🔍  Inspect: https://zeit.co/NAME-OF-SCOPE/example-frontity-wordpress/iij40if2b [5s]
✅  Production: https://example-frontity-wordpress.now.sh [copied to clipboard] [56s]

16. Open Production URL with web browser

That's all!