Payload CMS - Headless CMS with Vue - Deploy Mobile App with Ionic Capacitor
Payload CMS Ionic Vue - Deploy To IOS and Android
In this video series, we will set up PayloadCMS Headless CMS, create a Customers collection, log in as a Customer, create an account as a Customer. Then build a simple vuejs website that can log in using the API created by PayloadCMS and finally look at the changes needed to go from website to mobile application with Ionic Framework.
In this video, Part 4, we show how to get the application deployed on IOS and Android devices using Ionic Framework Capacitor
Payload CMS - The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS. @payloadcms
Ionic Framework - The mobile SDK for the Web.
An open-source mobile UI toolkit for building modern, high-quality cross-platform mobile apps from a single code base in React.Vue.Angular. @IonicFramework
The Series
==========
Part 1 will take us from setting up the project through logging in with Customer collection from a vuejs web application - • Payload CMS - Headless CMS with Vue -...
Part 2 will handle checking for existing user's session, and discussing cookies - • Payload CMS - Headless CMS with Vue -...
Part 3 - Creating a user/customer account - • Payload CMS - Headless CMS with Vue -...
Part 4 - Get the application deployed on IOS and Android devices - • Payload CMS - Headless CMS with Vue -...
💥 Sign Up For Our Newsletter - https://buff.ly/3lAk2jL
💥 Chapters
--------------------------
00:00 - Intro
00:32 - Reviewing tools used in application
01:52 - Using vscode extension for setting up Ionic Capacitor project starting with IOS
03:09 - Setting up debuggung for IOS app using Safari
04:49 - Updating authservice and consolidating API calls
09:38 - Changing url to Payload CMS and resolving CORS
10:30 - Testing sign-in and getUser on IOS
12:31 - Using JWT for authentication with server API routes, Saving JWT locally
23:40 - Signout and clearing stored JWT
25:40 - Deploying and debuggung on Android
28:30 - Configuring android scheme, resolving CLEAR TEXT issue
31:00 - Setting localhost on Payload CMS server to support android
34:50 - Final test
💥 Links
--------------------------
Payload CMS - https://payloadcms.com/
MongoDB Atlas - https://www.mongodb.com/atlas/database
MongoDB Compass - https://www.mongodb.com/products/tool...
Ionic Framework - https://ionicframework.com/
Ionic Capacitor - https://capacitorjs.com/
🚀 SOURCE CODE - https://github.com/aaronksaunders/pay...
🚀 BLOG POST - Coming Soon
💥 Social Media
--------------------------
Twitter - / aaronksaunders
Facebook - / clearlyinnovativeinc
Instagram - / aaronksaunders
Dev.to - https://dev.to/aaronksaunders
#payloadcms #vue #ionic #typescript #cms #nuxtjs #mongodb #capacitor #mobileapp #mobileappsrt
