Requirements

Boot Shifter Headless website

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

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

3. Create any contents with logging in WordPress admin URL

We use theme unit test file for the document

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

4. Copy WordPress URL

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

5. Keep WordPress running

Working with Ionic

Clone sample repository to your local

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

In this sample, 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'
}

to

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

Never forget to save changes.

Install dependencies and start 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 default web browser to check the contents.
Website will look like the below:

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

Build production website

The deliverable has been created 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 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 Single Page Application

Did this answer your question?