Type set to react means we’ll create a React project Next, we can create our Ionic app project by running: ionic start ionic-app tabs -type=react -capacitor
#Livereload react install
We can get started by installing a few things.įirst, we install the Ionic CLI globally by running: npm install -g native-run cordova-res
#Livereload react how to
Voila now you can can access the server remotely!įinally you can also set the host in the angular.In this article, we’ll look at how to get started with mobile development with the Ionic framework with React. You can also be more specific about the IP address: ng serve -host 192.168.50.111 But for development testing it certainly is sufficient. Notice that the server is letting you know that you're exposing the server to the network and is warning that the server is not meant to be a hardened Web server and not secure for external access. So to launch the Angular Dev server with external port access enabled you can use: ng serve -host 0.0.0.0
![livereload react livereload react](https://miro.medium.com/max/1200/1*4lEVE0jxoSEFYiGjY_reOA.png)
![livereload react livereload react](https://i.stack.imgur.com/zRQr6.png)
Turns out - there's an easier way: It's quite easy set up the WebPack Web Server to externally expose an IP address, which would allow your phone to access the live reload server over the local network. Making a change then takes some more time. This works but it's not exactly quick since building the app for final output can take a while. It's not quite obvious, and in the past I've been doing this the hard wrong way, by building the app and then running it through another always on Web server (IIS). By default this server is set up to run as a local Web server, but you can set it up quite easily to also serve IP traffic externally. Live Reload ServerĪngular and a number of other tools use the WebPack development server.
![livereload react livereload react](https://picb.zhimg.com/v2-42558c4f4a2c00565753503671572df7_b.jpg)
The syntax may be different so check the specific CLI documentation for host binding. Bonus: capture the phone output on your desktop screenĪlthough I specifically discuss the Angular Dev Server in this post, most other frameworks like Vue and React also use the same WebPack Dev server, so you can use the concepts described here with those CLIs as well.How to connect to the your server on the local network.Serve content and allow external IP Access.In this post I'll walk you through what you need to know in order to set up the Angular Dev server to: When you get it all going you can happily work like this on a mobile device: What's not so obvious: How do you get the live reload functionality to also work on a phone by connecting to your development machine, in order to be able to preview and tweak the layout quickly and just as easily as in a desktop browser? Turns out it's not that hard, but there's a bit of configuration that's required to connect the phone and desktop machine properly.
![livereload react livereload react](https://i.ytimg.com/vi/3i7E3rKVesE/maxresdefault.jpg)
Angular (and really any of the major JavaScript UI frameworks that integrate with the WebPack Dev Server) provides a built-in Live Reload Web server that makes it quick and easy to see UI changes updated in the browser as soon as you make a change to your code, HTML or CSS content.