Build a JavaScript SPA using Ionic and Shifter Headless

Hidetaka Okamoto | May 06, 2020

What is Ionic?

Ionic is a JavaScript based framework that allows you to easily create a mobile application that automatically works across all platforms, from Android and iOS, to Windows and Mac. With Ionic, you get tons of cool features out of the box like HTML5 features and Capacitor, which makes it easy for you application to access device APIs. As an added bonus, Ionic is also free and open source.

Why Ionic with Shifter Headless? 

Ionic and Shifter make a great match when it comes to pairing modern applications with the convenience of WordPress. When using this combination, you can expect increased quality of user and development experience. The team or individuals in charge of creating and updating content will able to use the familiar WordPress dashboard while developers can utilize modern development techniques with Ionic, no WordPress theme development knowledge required. On top of that, end user will getting the experience of a native application. 

Another big part of what makes Ionic and Shifter headless work so well together is the WordPress API. With the WordPress API, we are able to unlock the full flexibility of WordPress in order to create far more than just websites. As a headless CMS, Shifter Headless allows us to access that WorPress API and use it for a myriad of applications, including Ionic projects. 

Let’s try it out!

Shifter Headless is built using Webfront which allows Shifter Headless to be compatible with any JavaScript based framework. You can read more about how to integrate other frameworks like Gatsby here. Today, we are going to walk you through the process of setting up a simple single page application (SPA) using Ionic and Shifter Headless. 

First, we will create a new Ionic site and import some arbitrary WordPress site data from Shifter Headless’s WordPress API.

Next, we will create a new MacOS application using that data.

Before we Begin 

Demo Site

To make it easier to follow along, weve prepared some sample code for a demo site in advance. 

You can view a live version of the demo site here and can grab the source code from our GitHub.You’ll also find this tutorial in the included readme file.

Local Environment

For this tutorial, we’ll be using yarn. Before you start please confirm that you’re using the latest version of yarn and that package.json can be used. 

Starting Up

Create a new project with the command.

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

Or

$ git clone https://github.com/getshifter/ionic-react-wordpress.git
$ cd ionic-react-wordpress
$ npm install
$ npm start

You can check the sample site by launching it locally and checking http: // localhost: 8100 /.

3. Preparing and Updating content with Shifter Headless

Log in to your Shifter dashboard and select an existing site or create a new one. Then, locate your WordPress URL and admin credentials under your site’s Overview tab. Use these credentials to log in to WordPress. Make a note of your WordPress URL, you’ll need it in the next step. 

For more about setting up a site on Shifter Headless, be sure to check our official support document. If you don’t have a Shifter Headless site, we encourage you to sign up for a free trial so you can follow along. 

4. Update properties

Locate src/config/ts inside of your local ionic-react-wordpress folder. Replace the URL https://central.wordcamp.org with the WordPress URL of Shifter Headless from the previous step..

class Config {
    get postURLPrefix () {
        return 'news'
    }
    get pageURLPrefix () {
        return ”
    }
    get wordpressURL () {
        return'https: //central.wordcamp.org/wp-json'
    }
    get wpClient () {
        return new wp ({
            endpoint: this.wordpressURL
        })
    }
}

5. Run locally

Ionic provides a local server to customize websites locally.

$ npm run start

Check for updates locally.

6. Build and deploy

The following code will build a production application.

$ npm run build

The production application will be placed in the public directory.

Use a hosting service such as Netlify, AWS Amplify, or Firebase to upload these files and complete your static website.

Next, we’ll create a MacOS application.

7. Creating a Cross-Platform Application

This time, we’ll create and build a MacOS application locally.

Open your MacOS terminal and execute the following command.

$ yarn run build
$ npx cap copy
$ npx cap open electron

Electron is now launched in the local environment and you can now check the desktop application.

8. Create sample application

Build the application with the following command.

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

And we’re done! We now have a sample application. 

Conclusion

Combining the WordPress API and SPA frameworks like Ionic and Capacitor is a powerful and easy way to create cross platform applications. Using this approach, you can utilize your content to reach your customers through new avenues. It’s not just websites anymore,  Ionic and Shifter Headless allow you to reach your customers with your content outside of just a website. This approach makes it easy to take a business-focused approach to native apps, e-books, VUIs, and focus on delivering new experiences and touch point to your customer.

Please give this approach a try for yourself and let us know your experience. We look forward to your feedback.

Ready to take your site to the next level?

Shifter is the solution for fast, maintenance-free WordPress websites.