Implementing CodePush in React Native | React Native Code Push | #React Native |

hi guys welcome to the another lecture of react native in this lecture we are going to explain about react native code push so what is basically code push code push is an app center cloud service that enables cordova and react native developers to deploy mobile app update directly to their users device we don't want to update the changes every time to app store or play store we can directly push the changes into useless device so as i mentioned code code push is a microsoft solution to update javascript portion it can only update javascript version you cannot update a native ios or android application using code push code push is the fastest way to update your app on any platform if even if it android or ios code would support both uh react native and ionic or cordova platforms apple allow code push as soon as long as you do not dramatically change the way your app function if you change the entire application flow using code push apple will reject these changes now you can check how code push is working now if you have a changes if you have a native changes or if you have a shift in java changes or shift changes you can publish the application into play store and play store will approve the changes then you can download the application so this process will take one or two day delay in the process in the delivery but what is basically app center is doing if you have any react or javascript changes you can just bundle the application and push into app center now app center will check the uh bundle with which you have already installed which user is already installed if there is any changes is available then what we will do app center will automatically download the changes and make the application runnable that means we don't want to push endear code into through the play store our app store we can directly push the changes into users so this time process time taking process we can cover using ups under code pusher we can directly push the any emergency fixes in ui fixes using app center now how code push is working whenever your code pushes whenever you have installed an application what codepush will always check if there is any change in the cloud now if you are changing anything if you are changing any styling or anything if you push that code into code push code push will detect from the cloud and it will automatically download the changes and it will reinstall the application once more so what every time code push listen to the cloud push cloud and it will check whether there is any changes is happening if we push any changes it will automatically download the changes into our bundle installed bundle whatever user is installed so clear so this is the old process of code push code push is very helpful to update the changes immediately so we are going to discuss how to integrate integrate code push in our react native application so we can jump into the installation and other process okay we we can set up the react native code push app center account so for that one what you have to do go to the google chrome just type app center so i have already one account so that's why it's redirecting to app center ms apps if you have downloaded an account log out this one just create an account by clicking get started i have already one account so i'm just going inside the application after login so it will redirect into my application here you can see all apps this is all the app which i have created now what i am going to i'm going to create a new app so just add new organization is there add new app i have already added my organization as jazz academy now i am going to create one app so click add app here i am just creating one application react nature code push okay the platform is android then it is amsterdam for uh just a production and the platform is reactive os is android just add new app so it will create a new application in my app center account now what we need to do we need to install this whole thing so we can just copy all and go to project so i have already created one project npx react native init code push this is the project which i have created so you can see my project on my desktop now what i am going to do here this project is on my desktop here i am going to install this old library so just yarn add code insert minus xr if you are in using npm install you can use npm cell here i am using yarn art because i always used to do with yarn so this is installing all the library meanwhile there are some more changes we need to do create appsenderconfig.js file in my android app src main asset folder so we can just open the application once more new window yes so we need to open the app here so the app is in my desktop i am going to open the app click on open go to the project code push open so it will open the application my vs code yes i trust the others now what we need to do we need to make these changes so first of all what we need to do we need to create this file inside android app src main assets so we can just go android app src main then src main asset folder is not that we need to create i think so we can just create one more folder assets then inside asset we can just create one file here we are going to copy this all the secret file app secret here you can see the secret key now the next thing what we need to do we need to add this all thing into our string.xml so we can go resource values strings.xml here we can paste this all values fine then the next thing is uh yes we have completed the installation we can just check out whether we have installed this old library yes we have installed all the library now we can what we can do we can just npm run on android you can just type this command because we have already made a lot of android change changes so we need to build the application once more also we need to install the app center client for that one what we can do go to the terminal type npm install minus d then app sender client so it will install our app center client or device or on the computer so we can just install center client it is just like aws client so if you have a familiar with a aws client it's just like same like that app center client we can install all the things whatever we need for app center code push so the application is installing once more you can see emulator is opened also click click absentee client we are installing then yeah fine meanwhile we can go to the react native code push documentation we can just check out react native code push documentation so firstly we will instead we install the app center libraries then absentee now we are going to install react native code push so we can just check out the react native code push npm here it is the reactivity code push npm then we need this one to be installed so we can just check out the installation documentation getting started android setup we are not going for ios for now so we will be doing another lecture for ios currently we can just install plugin installation so we have installed this whole thing so we can just install react native code push as well just cause our current bill yarn add react native code bush yes we have added so these changes we need to do so we can just copy this one we need to android app build.gradle add the code push gradle so we can just go here android app uh where is build.gradle so we can just apply this one after our reacting to yes we have added so react daddy i think is already there we can just search react gradle also is there yes here it is already there we need to add below that one so we can just copy here from here paste it here yes then the next thing is in main application.java import this class so we can just import this class so main application dot java is coming here java folder main application.java is it in main activity or no main application. by itself so we can just paste it now the next thing is what we need to do we need to copy this uh private method so we can just search get js bundle so we can just check whether js bundle is there so we we don't have js bundle so we can just copy all this override method copy this all override method paste it fine then what we need to do we need to add these values deployment key so we can just copy this one and paste it here string dot xml file so you can just paste it here and we need to search code deploy code push deployment key for that one what we have to do go here here you can see distribute inside code push create a standalone deployment here you can see all this one now what we need to do is for staging and port push you can see i'm looking for uh the code push key production you can see just copy for staging i'm only doing for state name for now so we can just paste this here deployment key yes pasted now we can just close this one so we have already installed absentee now we can just check out whether it installation is completed yes absentee client is installed successfully and app center files are also installed now the thing is uh sdk which whatever we have done is completed now we can just check is there anything is pending no we have added this one we have added this one fine so this is uh lower than 0.6 we don't want to go there so we can just build the application once more so we can just build npm run android so these are the steps you need to install absentee you need to install app center libraries then you need to install react native core push so also you can get the production and the keys from here deployment keys you can get here if you change into production you can get deployment key here so we can just wait for a moment to application bill again to build just wait for a moment yes application is building now you can see application is successfully compiled and built in my device it see it is running you can see now what we are going to do we are going to add the javascript part in my in our react native project so what we can do we can just remove all the by default code so by default code i am going to remove this one is by default generated by react native we can remove all this code this one also we can just remove make app as a symbol functional component we can remove all this one and then this one now what we can do we can just put a background color v style flex equal to one background color you can just say red then we can just close this dsx fine so we have removed all the unwanted code we can remove this old import also fine we can remove this one remove node yes so we have removed all the unwanted code and we can just check whether this is rendered correctly yes you can see red color now what i am going to do i am going to build the release apk so i am going to create a build ap generators release apk so we can just type generate signed apk in react native generate signed apk so what we need to do we need to release we need to generate the release key first so go to the terminal cd android app so always release key store should be in app folder we can just create a release keystore file here yes just type the password something which we need so i'm just typing my name everything i am giving my name itself yes so it will generate a release key so we can just check out yes you can see release key here now what the next changes we need to add this in my gradle properties so we can just open our vs code go to the android grad gradle so we can just check out gradle.property here we are going to add this one then we need to add the same password alias which we have added in the terminal so we are just giving that one now the next thing is we need to add signing config we can just copy this one after android app build.gradle we are going to add that one so we can just here you can see build type now what we need to inside after default config before build type we need to add so we can just copy this one here we can just paste it so signing config is also already there we need to add at least one also only so we can just copy release one only then paste it fine then what we need to do we can just copy this one build type inside build type we can just paste the release here we are going to release then the next thing is we are going to generally generate release apks for that one we need to run this command so we can just run this command inside our root project yes sorry cd code push clear and then we can just create our release apk so this command will generate our release apk we can wait for a moment release apk what we can do we can add the code push uh usage also so for that one go to the query code push documentation here you can see the usage uh you need to copy this into our code just copy this one and copy this higher order function just copy this higher order function yes so this higher order function will always check with the code push cloud so whether our application is updated is there any new push is available so this is making the function available to update immediately so now what we can do we can build the application once more for that one we need to copy that command so just copy that command build application so it will create a release apk so we can wait for a moment so this will take a little time because we are releasing apk with a lot of native changes now completely released the apk you can see build is successful now what we can do we can install this apk in our ds open our device so go to the android folder code push android app build here generated sorry in the output apk release here is the here is the release apk we are going to install this apk in our device let me check we have already installed i can go and install the application which is already installed now what we can do we can just install the application yes just drag into our device yes install the application so this will install our apk in our device it is a release apk there will be no javascript bundling or there is no package loader is running so we can see i have closed all my terminal see only one terminal is available all other terminal have closed because this is a release apk now let us wait for a moment let's see application is built open the application you can see the red screen so we have given the red screen now the next thing what we are going to do we are going to change the background color in our javascript file and i am going to release this change now we are going to generate another apk we are not going to generate another apk but i need these changes in my released apk which is already released for that one what i am going to do i just changed my color into green now go to the react native documentation here you can see release and update okay so copy this command copy this command just paste it here so go to the root project paste it here it will be duplicating so just copy one once paste it here now if you check out the command you can see app center code push release react minus a the user name here you can see this command definitions absenter code push release react minus a owner name so i have login with the google so that's why jazz academy dot gmail is coming then my application name here you can see my application name is react native code push and the stage name which uh which version we are releasing i am releasing the staging because i have had the release staging key in my deployment right here you can see this is my staging key and i have added in my android file also this staging key itself so you can see here is the resource values string dot xml this is staging so we are going to release a staging release now we can just run the command wait for a moment so here i am not going to generate another apk on another ipa file here i'm just pushing the code into code push cloud let's wait for a moment here you can see the code push is creating the bundle and then it is pushing to the app center just wait for a moment here you can see the code push is pushed creating code push release yes successfully release an update containing this one so we can just go to the code push dashboard just refresh here you can see just now we have released one code push release now what we need to do we need to open the application called close the application just wait for a moment it will reflect you can just kill all the application just open right now if i just refresh let's see now roll back i saw for now we can just wait for a moment so it sometime it will take a little delay so we can just close it all the tab once more nothing to clear cache open the application once more yes the changes are coming right so we have changed our red screen into green's color using the code push now if you just refresh here you can see it's active in one device it's clear it created the roll back on one device if you check into documentation you can see rollout active active installation so we have changed our background color without a release apk so this is a release apk right so we have changed in our release apk without creating a new release apk so that is the advantage of react native core push so before closing this lesson i am i'm am pointing out one thing you need to make sure that only javascript files are changing if you change a single line in native code the code push will crash the application will crash so always remember only code push will change in the javascript function javascript part only okay so we can jump into the next lecture

Channel: JAS ACADAMY

Views: 20,999

Keywords: JASACADAMY, Technical, Coding, React native, nodejs, Devops, News, interview tips, resume format, resume writing, career, communication, social meda, time management, polytechnic, diploma, Perfomance, development, udemy, google, covid, jasacadamy

Id: ejVPtJF3x7s

Length: 23min 15sec (1395 seconds)

Published: Wed Feb 16 2022