Requirements

Boot up a Shifter Headless site

1. Login to the Shifter Headless dashboard
https://go.getshifter.io/admin/headless/

2. Start WordPress
For more details, refer to another support document: How to start Shifter Headless WordPress up.

3. Create any contents by logging in to WordPress with the admin URL

We use theme unit test file for this document.

You can download it directly here: https://raw.githubusercontent.com/WPTRT/theme-unit-test/master/themeunittestdata.wordpress.xml

4. Copy WordPress URL

Remove "/wp-admin/" from the URL

This document assumes WordPress URL is https://YOUR-WORDPRESS-URL.getshifter.co

5. Keep WordPress running

Working with Ionic

Clone the sample repository to local

$ git clone git@github.com:getshifter/ionic-react-wordpress.git ionic-react-wordpress
$ cd ionic-react-wordpress

In this example, the sample repository has been cloned to ionic-react-wordpress

Edit "config.ts" under "src" directory

Modify return value of get wordpressURL() from sample

get wordpressURL() {
    return'https://b5d85ac952f05c2bcb7e0b42979eff431beac2f1.hl-a.getshifter.co/wp-json'
}

get wordpressURL() {
    return'https://YOUR-WORDPRESS-URL.getshifter.co/wp-json'
}

Never forget to save changes.

Install dependencies and start the server

$ npm install

Start server

$ npm start

> ionic-react-wordpress@0.0.1 start ~/ionic-react-wordpress
> ionic serve
> react-scripts start
[react-scripts] ℹ ｢wds｣: Project is running at http://192.168.0.4/
[react-scripts] ℹ ｢wds｣: webpack output is served from 
[react-scripts] ℹ ｢wds｣: Content not from webpack is served from ~/ionic-react-wordpress/public
[react-scripts] ℹ ｢wds｣: 404s will fallback to /
[react-scripts] Starting the development server...
[react-scripts] 
[react-scripts] You can now view ionic-react-wordpress in the browser.
[react-scripts]   Local:            http://localhost:8100
[react-scripts]   On Your Network:  http://192.168.0.4:8100
[react-scripts] Note that the development build is not optimized.
[react-scripts] To create a production build, use yarn build.
[INFO] Development server running!
       
       Local: http://localhost:8100
       
       Use Ctrl+C to quit this process

Open http://localhost:8100 with dyour efault web browser to check the contents.
The site will look like this below:

Stop server by hitting `[Ctrl]` key with `[C]` key

Build a production site

The deliverable has been created in build directory

$ npm run build
npm run build
> ionic-react-wordpress@0.0.1 build ~/ionic-react-wordpress
> ionic build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
  127.15 KB  build/static/js/12.c07dbb7c.chunk.js
  25.47 KB   build/static/js/5.7fb811cd.chunk.js
[......]
  361 B      build/static/js/4.97379f4a.chunk.js
The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
  bit.ly/CRA-deploy

Check the deliverables

$ ls -al build

total 40K
drwxr-xr-x  9 YOUR-NAME 288 Jun  2 00:44 ./
drwxr-xr-x 16 YOUR-NAME  512 Jun  2 00:44 ../
drwxr-xr-x  4 YOUR-NAME  128 Jun  2 00:44 assets/
drwxr-xr-x  4 YOUR-NAME  128 Jun  2 00:44 static/
-rw-r--r--  1 YOUR-NAME  16K Jun  2 00:44 asset-manifest.json
-rw-r--r--  1 YOUR-NAME 1.1K Jun  2 00:44 index.html
-rw-r--r--  1 YOUR-NAME  802 Jun  2 00:44 manifest.json
-rw-r--r--  1 YOUR-NAME 9.9K Jun  2 00:44 precache-manifest.ca47a8c02140f74376f3bbaa53d2a23d.js
-rw-r--r--  1 YOUR-NAME 1.2K Jun  2 00:44 service-worker.js

Create a Desktop Application

$ yarn run build && npx cap copy

yarn run v1.22.4
warning ../../package.json: No license field
$ ionic build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
  127.15 KB  build/static/js/12.c07dbb7c.chunk.js
[......]
  361 B      build/static/js/4.97379f4a.chunk.js
The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
  bit.ly/CRA-deploy
✨  Done in 15.09s.

✔ Copying web assets from build to electron/app in 71.01ms
✔ Copying capacitor.config.json in 1.15ms
✔ copy in 75.43ms
✔ copy in 3.44ms

Build a preview app

$ npx cap open electron

You'll get preview app

Build App

$ yarn run build
$ npx cap copy
$ cd electron
$ npx electron-packager . sample --platform=darwin --arch=x64
$ open ./sample-darwin-x64

Double click sample app (sample-darwin-x64.app)

You'll get a Single Page Application