Ionic with wordpress

As in the IT sector now we have millions of websites made in WordPress. But the WordPress website is working slow so mainly the person wants to make it in another language but it’s hard to create all code and functionality again so mostly the people can use this WordPress as a backend of the website and for the front end, they use another framework.  In this article, we will create a project in ionic 4 with WordPress.
Ionic is a hybrid HTML5 mobile app framework. It’s used for both mobile and web apps. In this article, we will cover the following topics
1) Install Ionic
2) Create Ionic Project
3) Use Rest API in ionic
4) Integrate your ionic project with WordPress project
5) Add PWA in ionic
6) Add SCO tags in the ionic web app
7) Create Build
8) Deploy your ionic app on the server
9) Deploy app on free hosting Netlify

1) Install Ionic

Before installing ionic you need to install two main things on your system. If it did not install yet you can install it by the below guideline. Make sure if your system is Mac or Linux then you can use sudo before all the command but as I am working on a window, in that case, you don’t need to add sudo
1) Node (you can download it by this link Download Nodejs)
2) NPM (Install NPM globally on your system by below command)

//For window system
npm install npm -g

//For Linux or Mac system
// you need to add the password after hit the below command 
sudo npm install npm -g

After installing this you need to check this with below command. Open a new command line window and type the below command

node -v
npm -v

You will get the response like below image

Now your system is ready for installation of ionic
1) Type the below command then Enter for install Cordova packages globally.

npm install -g cordova ionic --unsafe-perm quickscrape

2) Type the below command then Enter for install ionic packages globally.

sudo npm install -g ionic --unsafe-perm node-sass

Ionic is installed on your system. Now you should start to create the project.
2) Create Ionic Project

ionic start NameOfTheProject 

If you don’t know the template name you can just be Running ionic start without any arguments it will prompt you for information about the project.
Like in the below image it will clear more.
1) In the command window type the ionic start then press Enter button

2) Type the project name and then press the Enter button.

3) Then it will ask you about the template you can choose a template by arrow keys and then press Enter.

Ionic provides the following official templates:

  • tabs : a simple 3 tab layout
  • sidemenu: a layout with a swipable menu on the side
  • blank: a bare starter with a single page
  • <code”>super: starter project with over 14 ready to use page designs
  • tutorial: a guided starter project

4) Now enter in the project directory

//cd foldername/projectname
cd ionicwp

5) Install NPM dependancy by below command

npm install

6) Run your ionic project

ionic serve

7) Your ionic project is ready now. You will see a port on the command window. Open this URL on your browser you will see the ionic page

http://localhost:8100/

In your project directory, you have the src folder in this folder your code files are listed.
Inside the src folder, you have the following file structure

  • app : All your web pages are in the app folder
  • assets: All your images should be store in assets folder
  • environment:`ng build –prod` replaces `environment.ts`
  • <code”>theme: Ionic Variables and Theming.

8) In the app folder, you have a home page you can change the home page content from home.html file

Use Rest API in ionic
For using rest API in ionic you need to add the HTTP headers request. Copy the below line in you home.page.ts file

Integrate your ionic project with WordPress project


import { Http, Headers, RequestOptions, Response } from '@angular/http';

const ENDPOINT_URL = 'YOUR WEBSITE DOMAIN HERE';

Add this in the constructor



  items: any[];

  constructor(private http: Http) {		
  }

Then use the below code in ngOnInit function for getting data from rest API


ngOnInit() {
        
        this.http.get(ENDPOINT_URL + 'wp/v2/posts?filter[posts_per_page]=30')
            .map((response: Response) => response.json())
            .subscribe(data => {				
			this.items = data;
            });
    }

Now in the HTML File home.page.html, you can use the show this data in the loop



   <ion-col *ngFor="let item of pageOfItems" size-md="8" size-lg="4" >
      <div class="post_block">	
	  <a href="/{{item.slug}}">
		
		<div class="blog-box">
		<ion-card-title [innerHTML]="item.title.rendered"></ion-card-title>  
		<ion-card-subtitle>{{ item.date | date:dateFormat }}</ion-card-subtitle>
		<div [innerHTML]="item.cat_names" class="tags"></div>
		<div [innerHTML]="strip_html_tags(item.content.rendered | slice:0:200)" class="discription"></div>
		</div>
		<ion-button href="/{{item.slug}}" routerDirection="root" color="primary" size="small">Read more...</ion-button>	
	</a>
	</div>
    </ion-col>

Add PWA in ionic
Adding the PWA is as simple as running the following command in your project. With this command, some of the files will be created and update in your project.


ng add @angular/pwa --project app

At the end of this command is the name of your project, it is defined in the angular.json file. By default, this will be an app but if your project has a different name make sure to change that here.

If you check in the app.module.ts file, you will see the following new import file:


imports: [
    ...
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],

Create Build

To create the build of your Ionic app, you can just run the following command


ionic build --prod

This will run the build process, and output will be store in the www folder. The contents of this folder are your completed project (Note: if you serve your application again or create another build the contents of this folder will be overwritten). You could upload these files to a web server for hosting.

Deploy your ionic app on the server
Upload your ionic app on the server is very easy. For this, you just need to install the www folder on the server and the website will be work.

Deploy app on free hosting Netlify

You can easily launch your site on Netlify free of cost. First you need to create the netlify account from here. If you have already then you just log in to the account.

1) For Create a New Project on netlify, Click on Add A New Project button shown above.

2) Now you have 2 options to deploy your app. First, you can drag and drop the www folder on the below window and Second link to GitHub. In this article, we will show you to link your GitHub project to netlify and deploy. The advantage of a link with git is whenever you commit your changes on git it will auto-update on netlify and published.

3) Clicking the Authorize Application button. Like it says in the image below, Netlify doesn’t store your GitHub access token on our servers.

4) Now you need to select the github rapo that you want to deploy

5) In the end, you just need to add the build command and the folder name where the project is compiled like in ionic its compile on the www folder

Your website is ready on with netlify, Now you can set a domain name for it, dont’worry if you dont have domain name netlify provide you a temporary domain with netlify.app name so you can use default name or change this name in setting option

Thank You for reading my article.

Demo website : http://ionic.thecodepractice.com/
I deploy this website in my hosting server

Full Source Code : ionic with wordpess is available on github you can use this, you just need to change the domain name with your wordpress domain in the enviroment.ts file.
Github link : https://github.com/thecodepractice/ionic-wordpress/

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

*