Speedrun - Svelte Kit mobile app with Capacitor

hi everyone uh this is the svelt captain's webkit capacitor uh app speedrun um kappa store uh is a way for you to make apps mobile apps whatever apps using uh web technologies and zweatkit is just a really good web framework built on top of felt as well it's pretty good so yeah let's let's do it uh so i have android studio installed because i'm on linux um and we need to start a new sveltkit app so it's uh npm in it as felt at next if i'm not mistaken yes oh i need to create a new directory um new test app or whatever new test app npm init uh yeah i want a skeleton project because i want to use a a code that i already have to test uh capacitor i won't use typescript yes yes lin yes prettier so npm install so then if i run npm run dev we should have a very basic swelt kit app running npm run dev so i have here on localhost 3000 uh this vaudkit app running so cool uh then i'll open this on my preferred text editor which is pycharm i have an alias to it so yeah so now we should have yeah just a base project with an src with routes and this index.felt which is like the home page so if we want to make this an app for the web and for mobile using capacitor we need to install capacitor stuff so npm install at capacitor core and then we need the command line interface capacitor [Music] uh cli and capacitor android since i'm on linux and i'll use geolocation and file system as well capacity file system and capacitor geo location okay so i always write it wrong cool so it's getting stuff um the next step is for us to create a base configuration for a capacitor here so it's npx cap init uh yeah new test app is fine com example app is fine and the webasset directory is going to be built because we're going to generate the static app from the sveltkit adapter uh speaking of it i need to add the svelte kit adapter let me just put this on presentation mode so we can see stuff um so yeah let's read the docs oh i already have it open here cool so adapters uh slotkit has a lot of ways to export the app you can export it to node to cloud flare workers netlife or cell they're already a lot of them i'm going to use adapter static because it's um it's it just makes uh an html and javascript app since we are gonna put the whole app inside of the android package we need to render is that it is static there's no uh dev server um web server in there uh so yeah i'm adding the adapter and then i need to change my swelt config here to use the static adapter so i need to put adapter as adapter and that's mostly it and uh oh let me show you the capacitor config json file this uh this json file was the one that was generated by npx cap in it here for production it's ready uh for development we need to do a couple things yet um so yeah uh but first we need to tell capacitor that we want to use android as the build target as one of the built targets which is cap at android okay oh and i will as well copy uh a spelled component from the other app that i built before so cat oh no i have it open as well here so i already have like this sample here i'm going to put the link on the description uh it's the same thing that i'm doing here i'm using it as a guide so yeah roots index i want this file here this file should run on dev and production because it's just me using capacitor stuff so i'm using the geolocation and the file system modules here so yeah okay so this should give us the file data on an h1 and the geolocation uh if we are doing this on web it should already be working so npm run dev um and voila here we have the dummy text file and we have the geolocation already working if uh if you're running this for the first time it asks you for your permission for geolocation so yep that's that and the file it since it's on the web it's putting it inside an index db uh fake disk here so you see we have uh the path uh with the data here this is a dummy text file this is a dumb text file okay but we do need to make this ready for quote unquote production so if we want to use it only for production we can already do an npm run build which will create what there's a link here oh yeah there's no above page um okay so it uh created the uh static build of my swotkit app here uh and it created this build folder here which we will be used by capacitor to make the app so i can run npx cap sync since we need to synchronize the the build with the capacitor app um oh we do need to add a couple of permissions though um android doesn't let us uh um where is it i don't remember i think it's app src it's it's let me just check here i i think it's just like um oh this is not it uh it's it's an xml somewhere let's see uh probably oh it it it tells me here so it should be on androidmanifest.xml also android manifest it's on android app android app src android main android manifest so we we just need to add the user permissions here cool and we should be ready to sync it again with capacitors since we need to get these new permissions on the capacitor app and then we just run cap open android since i already have android studio here it's going to open android studio and build the app and i'll be able to run the app on an android emulator here we're still not done we still need to configure this to have like hodge module replacement on the android emulator for for development purposes i won't update cutling right now so it's building you see gradle build here so when it's ready it should show us the files here on the project tab that's it and then i have this open and open edit run debug configurations dialog which should open the android emulator yes [Music] i have yeah the android emulator here running takes a little while it's starting so it's going to open yes so you see that i already have the same app running here and it's asking me for geolocation permissions so i will allow and yep there we have our geolocation here it's an uh it's a fake geolocation uh that's why it's different from mine here because i'm i'm running this on on like a real uh browser this is just using the android emulator localization okay so yeah so that's it i have the app running for production so let's get it ready for development for development we have to add a couple of configurations to our capacitor config file it's just this server here because what we want is for when we're developing we should get the the whole app from this url which is the this is localhost 3000 for the android emulator so we need to go to capacitor config and add this cool so if we run npm run dev and and we run npx cap sync and npx cap open android it will do the same thing again but it will enable us to have like hot module replacement i i do have i think a couple of um a couple of uh helpers to do these things that i'm doing manually here uh gradual invocation so it's opening and we have capacitor is beautiful and then we have this is the dummy text file and the geolocation so if we go here to index.felt and let's just do it like this so if i just for example remove this h1 it just removes it and if i change it here it puts it again and if i change the color to green it should change to green so we have the best development experience directly on an android emulator just be mindful that this uh this configuration here is only for development when you're building this for protection you need to remove this server uh thing here or else it will always point to localhost 3000 which won't be running on the production app yeah that's basically it we have now a slotkit app ready to production using capacitor so yeah thanks a lot see you soon [Music]

Channel: Luciano Ratamero

Views: 1,760

Keywords:

Id: If1p7yV1gec

Length: 14min 56sec (896 seconds)

Published: Sat Sep 25 2021