From React Web to Native Mobile App with Capacitor & Ionic

[@galaxies_dev]

Want more? Check out some real Ionic clones here: kzbin.info/aero/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb Make sure to subscribe for more! kzbin.info_?sub_confirmation=1

[@TheLukrify]

Exactly what I needed! I never thought it could be so easy. Thanks!

[@galaxies_dev]

Glad it helped!

[@prashant43240]

Please make tutorial on webrtc in ionic🙂

[@galaxies_dev]

Yes it's on the list!

[@sebastiannietor9724]

​@@galaxies_devhave you done a video about it?

[@jorgetovar621]

What are your thoughts after have been working with Angular? Do you like react?

[@codedevph5528]

Up on this

[@galaxies_dev]

I think I'll record a video about my first impressions. Mixed at this point - I enjoy some things and dislike others!

[@subhampatro4812]

Please add this in video it would be really useful for us

[@Rama-Rama74]

Thanks for your great videos! Had this question on Ionic: so, it would seem ALL the HTML tags will have to be revisited to change to their suitable Ionic versions? Will the Web UI be different from both iOS and Android (here it seemed to use the Android version for the same?). Thanks!

[@chizuru1999]

Keep it up! Also please post every video when you learn. doesn't matter if you dont do commentary much or edit it. ☺️ Will help keep the progress together.

[@subhampatro4812]

How to implement firebase push notification using capacitor ? In react project and test on ios using xcode

[@lacake6152]

How can I run the app on my iPhone when I am developing on a Windows/Linux machine?

[@oyinlolaabolarin4363]

How do you now deploy this to appstore or play store?

[@techTalks-FullStack]

Thanks for the vedio. I build an app using capacitor and i am facing problem that it closes on click of back button. Suggest a solution pls

[@hassanabuya]

Hello, nice tut, in my case i have a vite app with .env for my variables in here i have the backend api_url, which i use in my react project throughout so how can i still use my backend in my .apk because i didn't see anywhere about environment variables....plz help, Thankssss

[@abdelallitahiri7934]

Niice, I really got a lot of new things about this subject, Thank you

[@galaxies_dev]

Glad it was helpful!

[@amd_888]

Hi Simon, thanks for the video. How do I connect to my backend because it seems that it is not connecting to my server and APIs. It is displaying my login screen but not going beyond that. Do I need to include my .env file somewhere or is there something else I must do. Please help me or let me know where I can look to connect my backend. Thank you.

[@galaxies_dev]

A .env file usually won't work with Ionic - but you can talk to an API through a URL like in any application!

[@张浩良]

Simon, I want to ask you if you were to start from scratch, how would you evaluate going react+capacitor VS. react-native+expo to make it work across mobile and web in one code base

[@galaxies_dev]

Really depends on a lot of factors. You can get a good result with both. Capacitor might have more code reuse and easier project setup, while RN result will be more native on iOS+Android.

[@ChenthamizhKUMARANJeyakanthan]

expected one.. good job @Simon

[@RawahulIslam]

Unable to open base configuration reference file, any help?

[@thelegendary4593]

Hello sir, I just created a react js web application with API function but at the time of converting the react js app into android aap that time frontend is working properly but the API is not working in the Android app, and what conditions are required for the converting the APK, can you help me...?

[@aleksandrmatyka3118]

oh man did you try display svg for capacitor native app as background-image? Didn't find topic about this but it's just doesn't work(

[@devendranvemula]

can you please say some pdf viewer that works in ionic capacitor with react, i need it please

[@אלעדר]

Hi man, Does Capacitor support apps that rely on SSR?

[@samahgad241]

very helpful and clear, thanks simon

[@thabisomagwaza4431]

Amazing, this is exactly what I'm looking for!

[@galaxies_dev]

Happy to hear Thabiso! If you got any other questions just let me know 🙌

[@thabisomagwaza4431]

@@galaxies_dev, I'm a web developer and I'm looking to go into mobile development. I just got a job as a React developer and I was worried that I now have to go the "learn React Native" route in order to quickly get into the mobile space. Now I know I can do it entirely in React😁😁. My question is, how can I send push notification using Capacitor? Is it possible?

[@galaxies_dev]

@@thabisomagwaza4431 It certainly is using Capacitor plugins! I'm gonna create a tutorial about that as well :) And congrats to your new job 🎉

[@thabisomagwaza4431]

@@galaxies_dev That would be amazing😁. Also, perhaps you could do one on the limitations of Capacitor compared to approaches such as native development and dedicated cross-platform languages like React-Native and Flutter. We know that the convenience of Capacitor doesn't come for free; the worst thing is finding out its limitations when you've already invested a lot of time and money into going that route. It would be nice to know most of the pros and cons upfront

[@blameItleaveit]

what about ssr ?

[@andresprommel3226]

We have a web application and we need to use push notification, face id, fingerprint. I could solve this issues with capacitor ?

[@galaxies_dev]

Yeah that's very possible with Capacitor!

[@timschannel247]

Well explained! Good Job!

[@galaxies_dev]

Glad it was helpful!

[@maaran_sk7734]

Please sir make more tutorials for React with ionic & Capacitor 🙏🙏🙏🙏

[@galaxies_dev]

Yes I will!

[@JohanMagnusson1]

Really useful, thank you!

[@galaxies_dev]

You're welcome Joham!

[@soulamazing1228]

The npm run build command creates an empty folder for me why is that?

[@soulamazing1228]

Nevermind, I previously updated npm which caused runtime errors with the dependencies

[@sunilkumar-xe8ok]

after converting to app 'signup with google' button not working plz help

[@geniux8048]

Is there a way to safe area margins on xcode by not using css?

[@galaxies_dev]

I will check it out!

[@sebastiannietor9724]

Can i use a MacBook air m1 8GB to run this on the iPhone simulator? Or would i need something powerful?

[@DhawalRathod]

It will work fine. 👍

[@andreasstrau3016]

I am starting a New prj, what shoould i use still ang, react orr vue?

[@galaxies_dev]

All of them are great choices - pick the one you are most comfortable with!

[@turkergercik]

Hello sir ,firstly thank you for this great tutorial. I work on an ionic capacitor react app. When i long press on input(not ion-input) a white cut copy paste box with capacitor symbol appears and covers most of the screen. How can i fix this ? Thank you.

[@galaxies_dev]

I will check this out, haven't seen it before!

[@turkergercik]

@@galaxies_dev I can share ss or send you email

[@zentapartner]

Awesome 👊🏻

[@galaxies_dev]

🤙

[@umarjuraev1624]

what about Pod ? i got error

[@AndresSalvadorPrommelGaleano]

Hello friend, I'm trying to use capacitor with create-react-app, I was able to run the app on android and ios but the builds don't recognize the .env with all the environment variables? .. Do you know how to solve this problem, I was searching and I did not find a solution.

[@markvitko2638]

Did you find the solution to this?

[@alastairtheduke]

Great explanation of (web app with react+ capacitor) = mobile app + ionic vs ionic-react + capacitor = mobile app

[@galaxies_dev]

So many options!

[@schurli1614]

Nice Video, I have learned a lot! But I have a question. Is it possible to build the Ionic Application with react first and then install it in capacitor?

[@galaxies_dev]

Yeah you can add Capacitor whenever you want to your React app

[@thisisnotfinancialadvice3803]

Please make a video with the capacitor native interaction

[@galaxies_dev]

Yes working on it!

[@worldbest3097]

is this same with using webview? in ios, android?

[@galaxies_dev]

Yes Capacitor uses a webview to display your app inside a native mobile app.

[@manrikevillalobos6270]

Amazing video! Thank you so much for teaching us how to use Ionic and Capacitor! I really enjoy them! It's possible that in some moment, or maybe you can guide me where to search, how to build apps using Ionic and Capacitor with Svelte? Or framework agnostic, usin plain vanilla JS/TS? It's because I don't use React, nor Angular either, so it's a little difficult to follow the tutorials, try to understand the app internals (like service workers with Capacitor, that use the Angular service worker service, so I don't understand how to use, or configure, a plain service worker with JS). That's the reason that I have not could purchase the book Build with Ionic yet, because use Angular as framework. Thank you! Please, keep your good work!!!

[@galaxies_dev]

Happy to show this way Manrike! Definitely think I could/should do a similar one with Vanilla JS... Meanwhile it would be amazing if you would share the tutorial on your preferred social media channel to help me reach more web devs 🙌

[@manrikevillalobos6270]

@@galaxies_dev Sure!!!!

[@laurentsanson8075]

Hi Simon, thanks a lot for all your videos on Ionic, great work !! Quick question, do you think a real life web application could be easily transform to a mobile app with Capacitor? Or is is better to have kind of clone of the web project and re adjust for mobile with ionic component?

[@galaxies_dev]

Sure, many companies do it already! Check out this app which was part of my review video: kzbin.info/www/bejne/pnKxZ6mnj5lre9Esi=if85CHszVUaPI02v&t=588

[@AndresSalvadorPrommelGaleano]

What happend if I have .env in the react aplication ? . .

[@galaxies_dev]

React is not picking up an .env file, that would only work with NextJS!

[@AGUNGKAYA]

what would you buy if you make a video "Complete React/Ionic 2022" in udemy and sold for 45.8K ? (approximately $10 x 45.8K = $458,000).

[@galaxies_dev]

Haha don't think every subscriber would purchase :D But maybe we could add a membership to the channel as well 🤔

[@thabisomagwaza4431]

@@galaxies_dev I'd join!

[@geniux8048]

You are star

[@adnanhashem6714]

hello i have .js files can make for .js files

[@solomonrajkumar5537]

Hello Sir, it was very wonderful demo, I have few questions... how can we adjust the button size in browser? and do you have any comprehensive course on Udemy React Web to Native Mobile App with Capacitor & Ionic...

[@galaxies_dev]

Hey Solomon, no don't have a React course yet - but will work on it soon! Until then I'm gonna release more free tutorials, so let me know if there's a specific topic that you would like to see in a video/course!!

[@thesheldark7515]

FINALLY!

[@TheSaceone]

Team Angular

[@galaxies_dev]

I won't leave you ❤️

[@vik8382]

when I heard corvoda, then i stopped. never ever i touch stuff similar to it

[@prashant43240]

Angular

[@galaxies_dev]

Will still come Prashant, even more epic tutorials soon!

[@prashant43240]

@@galaxies_dev thanku🙂

[@Matheus_1582]

Simon, you are left-handed

[@galaxies_dev]

Thanks.

[@ahmaat19]

react 👍

[@rolandehiosun2513]

Hmmmm

[@kangqian8288]

Angular is noob ever🤣🤣🤣🤣🤣

[@galaxies_dev]

Naah it's good as well!

[@mostafaosman1437]

Angular 🥲😊

[@galaxies_dev]

Still coming!