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'
}to
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
