How to use backend with ionic-react for deployment?

Hi, I’m new to ionic, in fact I heard about it yesterday and I want to use it at work because i think it’s very cool to code once and run across all platforms.
The thing is I’m confused on how it works. I did a tutorial about ionic-react yesterday and I find it great but it did not show any server side code and that’s exactly what I’m planning to do.

In my use case I need my frontend to connect to a socket. Precisely, I have data in the cloud and i need to pull them over socket and show them at the frontend. For this I will need a server (probably node js) to pull the data over a socket and them show these data in the frontend.

Now this is confusing since the ionic app is started with the

ionic serve

command but node js server must also be started with the

npm start

command. Which one of them should run here?

Also how to deploy my app to ios or android if a node js is needed? should the entry point be ionic serve or npm start ? I assume the app will not work if the node js server is not running in the background, and how would it run on mobile!?

Should I maybe deploy the node js server in the cloud (for example in heroku) and then expose the IP adress, which I ll connect to in my frontend? or connect to the socket from my mobile? is that the right way to do it?

I’m very confused, I would appreciate it if someone can guide me on this.

You can run either ionic serve or npm start, it’s pretty much the same thing. Both commands run react-scripts start that starts a local development server for the React app.

That server is only used for local development. It gives you nice features like automatically reloading the app in the browser whenever you edit the code in a file.

You don’t need the dev server (and therefore Node.js) to run the app in production. When you’re ready to deploy your app, you build it with ionic build (or npm run build, again they do the same thing) and this creates a build folder containing static files that you can simply upload to any web server or hosting provider.

Building Android and iOS apps is done using Capacitor, following the Build a Native App steps.

1 Like

Alright thank you for clearing this app. However, that was the first part of the question. Do you have any knowledge about how to deploy the app when i have server side code?

I mean what you described is ideal for deploying frontend code but what if I’m using nodejs to make a socket connection and pull data from the cloud. How would that be deployed on my mobile?

You should treat your backend as a completely separate application, deployed separately. All the frontend needs to know is the URL of the server where to connect to.

1 Like

Mirkonassato it is good to having you here and I am so glad to be in this forum. My question is: what editor do I need to start learning ionic? Does one need to be online or having internet connection to use ionic? I downloaded node.js, installed it but I can’t put it to use. I tried downloading Android studio but could not. Please I need your help. That is all for now. Thank you.