Posts

Showing posts with the label Ionic and Capacitor

Setting up environment variables for React Ionic Capacitor app

Image
Hello everyone, in this tutorial we are going to learn how can we use environment variable in React-Capacitor mobile app. If you want to set up react-capacitor application, please refer to this article : How to Make a Mobile App with React, Ionic and Capacitor Let's walkthrough the App.js code, which only consists of a button ,clicking on that button app calls an endpoint. import React from 'react' ; import axios from 'axios' ; const App = () => { const getData = () => { console . log ( "Current environment : " , process . env . NODE_ENV ) axios . post ( `${process.env.PUBLIC_URL}/getdata` ) . then ( response => console . log ( response )) . catch ( err => console . log ( err )) } return ( < div > < button onClick = { getData } > Get Data </ button > </ div > ); } export default App ; In this example, process.env.VAR_NAME is...

How to Make a Mobile App with React, Ionic and Capacitor

Image
Hi everyone, in this article we are going to make a mobile application using regular react code, we will use ionic framework for getting native ui fill of mobile application. Later we will use capacitor to give it a native wrapper, we can build for iOS , Android and Electron platform using the same. So let's start. Prerequisites : Node.js should be installed, create-react-app should be installed globally, Xcode(for iOS) or Android Studio(for Android) should be installed. For android platform final application will look like below. If you don't have the settings install nodejs from nodejs.org. Use command : npm i -g create-react-app@latest for installing create-react-app globally. Let's initialise a create-react-app application instance with typescript template. It will install all the dependencies required, then open the project in your preferred code editor, I am using VS code. Then install below dependencies. Once they are installed you are good ...