From React Web to Native Mobile App with Capacitor & Ionic

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 100

  • @galaxies_dev
    @galaxies_dev  2 года назад

    Want more? Check out some real Ionic clones here: ruclips.net/p/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb
    Make sure to subscribe for more! ruclips.net/user/simongrimmdev_?sub_confirmation=1

  • @TheLukrify
    @TheLukrify 2 года назад +11

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

  • @Rama-Rama74
    @Rama-Rama74 9 месяцев назад +1

    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!

  • @prashant43240
    @prashant43240 2 года назад +7

    Please make tutorial on webrtc in ionic🙂

  • @jorgetovar621
    @jorgetovar621 2 года назад +2

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

    • @codedevph5528
      @codedevph5528 2 года назад

      Up on this

    • @galaxies_dev
      @galaxies_dev  2 года назад

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

  • @subhampatro4812
    @subhampatro4812 Год назад +1

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

  • @techTalks-FullStack
    @techTalks-FullStack 4 месяца назад

    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

  • @张浩良
    @张浩良 Год назад

    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
      @galaxies_dev  Год назад +1

      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.

  • @abdelallitahiri7934
    @abdelallitahiri7934 2 года назад +1

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

  • @maaran_sk7734
    @maaran_sk7734 2 года назад +2

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

  • @hassanabuya
    @hassanabuya 8 месяцев назад

    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

  • @thelegendary4593
    @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...?

  • @amd_888
    @amd_888 Год назад +1

    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
      @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!

  • @aleksandrmatyka3118
    @aleksandrmatyka3118 4 месяца назад

    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(

  • @lacake6152
    @lacake6152 Год назад

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

  • @alastairtheduke
    @alastairtheduke Год назад

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

  • @samahgad241
    @samahgad241 Год назад

    very helpful and clear, thanks simon

  • @chizuru1999
    @chizuru1999 2 года назад

    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
    @subhampatro4812 Год назад

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

  • @manrikevillalobos6270
    @manrikevillalobos6270 2 года назад +1

    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
      @galaxies_dev  2 года назад +1

      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
      @manrikevillalobos6270 2 года назад

      @@galaxies_dev Sure!!!!

  • @oyinlolaabolarin4363
    @oyinlolaabolarin4363 9 месяцев назад

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

  • @RawahulIslam
    @RawahulIslam 6 месяцев назад

    Unable to open base configuration reference file, any help?

  • @laurentsanson8075
    @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
      @galaxies_dev  Год назад +1

      Sure, many companies do it already! Check out this app which was part of my review video: ruclips.net/video/pAN6vqZ48Eo/видео.htmlsi=if85CHszVUaPI02v&t=588

  • @turkergercik
    @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
      @galaxies_dev  Год назад

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

    • @turkergercik
      @turkergercik Год назад

      @@galaxies_dev I can share ss or send you email

  • @ChenthamizhKUMARANJeyakanthan
    @ChenthamizhKUMARANJeyakanthan 2 года назад +1

    expected one.. good job @Simon

  • @schurli1614
    @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
      @galaxies_dev  Год назад

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

  • @thisisnotfinancialadvice3803
    @thisisnotfinancialadvice3803 2 года назад

    Please make a video with the capacitor native interaction

  • @אלעדר
    @אלעדר Год назад

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

  • @andresprommel3226
    @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
      @galaxies_dev  Год назад

      Yeah that's very possible with Capacitor!

  • @devendranvemula
    @devendranvemula Год назад

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

  • @thabisomagwaza4431
    @thabisomagwaza4431 2 года назад +1

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

    • @galaxies_dev
      @galaxies_dev  2 года назад +1

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

    • @thabisomagwaza4431
      @thabisomagwaza4431 2 года назад

      @@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
      @galaxies_dev  2 года назад

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

    • @thabisomagwaza4431
      @thabisomagwaza4431 2 года назад

      @@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

  • @sunilkumar-xe8ok
    @sunilkumar-xe8ok Год назад

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

  • @timschannel247
    @timschannel247 2 года назад +1

    Well explained! Good Job!

  • @JohanMagnusson1
    @JohanMagnusson1 Год назад +1

    Really useful, thank you!

  • @soulamazing1228
    @soulamazing1228 Год назад

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

    • @soulamazing1228
      @soulamazing1228 Год назад +1

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

  • @blameItleaveit
    @blameItleaveit 3 месяца назад

    what about ssr ?

  • @AndresSalvadorPrommelGaleano
    @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.

  • @sebastiannietor9724
    @sebastiannietor9724 Год назад

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

    • @DhawalRathod
      @DhawalRathod 8 месяцев назад

      It will work fine. 👍

  • @andreasstrau3016
    @andreasstrau3016 2 года назад

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

    • @galaxies_dev
      @galaxies_dev  2 года назад

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

  • @geniux8048
    @geniux8048 2 года назад

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

  • @vik8382
    @vik8382 7 месяцев назад

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

  • @AGUNGKAYA
    @AGUNGKAYA 2 года назад

    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
      @galaxies_dev  2 года назад

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

    • @thabisomagwaza4431
      @thabisomagwaza4431 2 года назад

      @@galaxies_dev I'd join!

  • @solomonrajkumar5537
    @solomonrajkumar5537 2 года назад

    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
      @galaxies_dev  2 года назад

      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!!

  • @umarjuraev1624
    @umarjuraev1624 Год назад

    what about Pod ? i got error

  • @zentapartner
    @zentapartner 2 года назад +1

    Awesome 👊🏻

  • @geniux8048
    @geniux8048 2 года назад +1

    You are star

  • @worldbest3097
    @worldbest3097 2 года назад

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

    • @galaxies_dev
      @galaxies_dev  2 года назад

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

  • @AndresSalvadorPrommelGaleano
    @AndresSalvadorPrommelGaleano Год назад

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

    • @galaxies_dev
      @galaxies_dev  Год назад

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

  • @adnanhashem6714
    @adnanhashem6714 Год назад

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

  • @TheSaceone
    @TheSaceone 2 года назад +1

    Team Angular

  • @thesheldark7515
    @thesheldark7515 2 года назад

    FINALLY!

  • @Matheus_1582
    @Matheus_1582 2 года назад

    Simon, you are left-handed

  • @prashant43240
    @prashant43240 2 года назад +1

    Angular

    • @galaxies_dev
      @galaxies_dev  2 года назад +1

      Will still come Prashant, even more epic tutorials soon!

    • @prashant43240
      @prashant43240 2 года назад

      @@galaxies_dev thanku🙂

  • @ahmaat19
    @ahmaat19 2 года назад +1

    react 👍

  • @rolandehiosun2513
    @rolandehiosun2513 2 года назад

    Hmmmm

  • @kangqian8288
    @kangqian8288 2 года назад

    Angular is noob ever🤣🤣🤣🤣🤣

  • @mostafaosman1437
    @mostafaosman1437 2 года назад

    Angular 🥲😊