2sxc for January (2023)

Jan 06, 2023

SUMMARY

0:02 well hello hello it's Dean and Dave and we're here for the 260 for January uh
0:09 meet up or 260 for meetup I don't know what we are really going to call this but I think too sexy for meetup and this is the January 2023 edition of this and
0:18 uh this is our first one ever that's being Live recorded uh well I'll say
0:23 live yeah we're recording it live but yeah you're probably not watching it live
0:29 and sometimes I crack myself up but welcome everybody we've got a few uh live guests here and uh you'll probably
0:37 be seeing this my guess is somewhere on YouTube uh after the fact so if you're joining us after the fact then welcome
0:44 uh feel free to join us for a live event anytime these will be uh every month uh
0:49 the first Friday of every month is the current plan for this at uh 3 P.M
0:55 eastern time uh hopefully that'll accommodate more of an international audience so it's not too late in the
1:01 evening over in Europe and not too early in the morning uh brother out so
1:08 um let me go ahead and share my screen and we'll get things kind of rolling
1:13 here I don't want this thing to get super formal uh but this is one of the months that we had uh slated for
1:20 actually kind of having a bit of a presentation format for this one last month when we got together we kind of
1:27 had a round robin of just people sharing different ideas and kind of different
1:32 tips and tricks and things like that that kind of showcase type things we're going to do multiple different kind of
1:39 formats where this Meetup moving forward um but this month is kind of one of those where we're gonna kind of split
1:45 the time between not really a formal presentation but me just sharing some some
1:51 experiences that I've had with uh using two sexy in the context of source
1:57 control in particular using git and GitHub and then that'll be a little bit more of an interactive session and then
2:04 we'll open it up towards the end uh for kind of an open mic style if you have some you know five minute tips or so and
2:11 we're not like clock watching or anything but you know just kind of short tips and things that you've picked up over the time that you want to share
2:17 with the group and could could make uh uh helps somebody's life be a little bit easier
2:23 so thank you for joining uh we're gonna kick off a little bit with some buzz and
2:29 uh announcements in the community and I if I happen to miss anything let me know
2:34 uh on this but for those that don't know I mean this is all really about uh 2sxc
2:40 and uh in the context of using it within uh DNN instance or an octane instance
2:47 and if you're not familiar with either one of those platforms I encourage you to go out to octane.org that's o q t a n
2:55 e dot org and it's very similar in architecture uh to DNN but is more of a
3:04 modern um stacked there with asp.net core and Blazer and um if you're interested in
3:12 DNN you can learn a lot about it at DNN community.org of course both of those uh
3:19 platforms are on GitHub and you can get to their regular their GitHub instances
3:25 out there as well but to sxc for those that don't aren't too familiar with it or are new to the
3:31 platform is more of a Content management system that sits on top of one of those
3:37 two application Frameworks and gives a nice
3:42 editing experience for the end user at the end or administrators that are editing content on a website and this
3:49 Meetup is really structured to just talk about all things to the 6C and uh so feel free to go out there one thing that
3:56 I looked at before the meeting just kind of in light of announcements and stuff
4:02 and things that have happened um the latest LTS release or long-term
4:08 support release into sexy looks like it is still 14.12.3
4:15 and that was released I'm out on the GitHub uh repo for 2sxc looks like that
4:21 was released right before our last meet up so November the 29th but there's some exciting things happening
4:28 as always I think uh Daniel metler actually joined us last month and
4:33 mentioned that they're trying to work off of a Cadence of having a major release twice a year for this so you can
4:40 kind of expect that we were already working on the version 15 release of
4:45 this and I thought I would highlight a few of the things in it um they don't have an
4:50 LTS release of this because I think it's just too so new and fresh but I would expect that to you know be not too far
4:57 behind over the next couple of months I'm guessing uh they'll get to announce yes version of 15. but there's a nice
5:04 blog article that is posted right here on the release I don't GitHub and I'll
5:10 have that pulled up and it's a very long article to kind of highlight some of the things that I've
5:16 seen on here and if anybody's had any experience with it or has played around with it
5:22 um I have not I haven't even installed it on this system yet so I don't have a whole lot of awareness of these specific
5:29 things but I thought this blog article was really nice I think one of the big things this
5:34 included in it is the inclusion of Google translate within the editing
5:39 experience so if you bring up your normal kind of editor for a a view then
5:47 you get this translation capabilities right in the top right corner I'm assuming that
5:52 applies to all of the fields that are related to that particular content type that's shown for the view
5:59 and you could Auto translate all or don't translate any or not sure what
6:05 translate oh I guess that's just not something that's going to happen automatically when you update the fields
6:10 so I guess that's the difference between those two but that looks looks really neat and he's got an example here of
6:16 going from English to Arabic Arabic wait how did I say that now say
6:23 that right Arabic I think how would you say that in French
6:29 Canadian Daniel erratic Arabic okay all right hunting
6:34 Arabic or are yes oh goodness
6:41 um I see a few more people have joined hey Steve and hey Daniel inhale Sandra the DNN Diva herself has joined
6:50 um let's see in addition to that it looks like there's a
6:56 few small things that they have done like I thought this one was interesting that
7:01 um I think they had followed a convention for a while of always automatically whenever you create a new
7:08 view um that it would automatically have an underscore as a part of the file name and I think that was related to both
7:15 convention and a particular security practice that is typically used to
7:20 render partials and things like that for um for a razor-based uh platforms or
7:27 Frameworks and um they have now by default because that didn't matter or
7:34 apply really anymore to too sexy that they have now changed the default experience to not have the underscore
7:43 but you still can use the underscore uh naming convention if you so desire to do so
7:49 let's see looks like they've gone with a major upgrade to Tiny MCE editor I am
7:56 sure there's a lot of details here that would uh that would mean something to a lot of people but I don't know them
8:03 so I'll just leave it at oh they upgraded tiny MC but evidently that's a big deal
8:09 um has any by the way is anybody that's on actually played with 26015 yet
8:15 yeah I actually have I had a what a whatever the 1403 whatever it was the
8:22 the ltf and it had a little bug that was kind of annoying that when you get a
8:28 bilingual site you could give each side say if a photo a different caption that
8:34 worked great but you couldn't tell the how would the treat the image
8:40 differently so typically French is a little bit longer than English so I
8:45 would often would like to do the photo for its full height on the front side and on the English side to have it uh
8:51 just at the center and that didn't work but I upgraded to 15 and it works
8:58 perfectly now so as far as all the I don't know I can't even count how many new features I haven't really checked
9:05 anything out just that it seems to work as good as 1403 or whatever it was but
9:12 uh without a couple of little bugs so let's step in the right direction that is nice to know I'm always a little bit
9:20 nervous maybe I don't know maybe too nervous but typically for production sites I just don't go on the bleeding
9:27 edge for a lot of these things just because of you know one little feature mishap can can wreak havoc but that
9:33 being said I'm not sure if that's a great strategy or not because the LTS
9:39 sometimes has those same things and there's no fixes that are put right onto
9:44 that version anyway so it's uh you know it's kind of choose your own path there I suppose but uh for right now we
9:51 haven't really touched any uh upgrades to non-lts versions so
9:57 um it it seems to be if that if you report a bug on the ltf and it's a little bug that it that he might decide
10:04 to just shovel it off to the next version but it's the big one then he'll issue another ltf for essentially the
10:10 same version so but if it's a bug you need fixed then you're kind of
10:16 well you can kind of go Gotta Go on the bleeding edge but so far no bruises well that's good
10:23 to know good to know um I I think there's plans for bigger stuff to happen in in the new context or in the context
10:30 of uh tiny MC version six here so at least there's some hints to that uh here
10:36 uh with that um it looks like they upgraded a few of the third party kind of dependencies
10:43 that they've got one of which is Tiny MCE csb Helper and Razer Blade which I
10:49 think is is is theirs right or is that truly a third party I think it's just
10:55 another project within their world that they they have there but I guess they upgraded that within the context of too
11:02 sexy um a bunch of other little details as far as some API changes that have been
11:10 made and some new uh apis related to productivity so it looks like they're a
11:15 little bit more uh involved options here for the uh turn on uh feature within a
11:22 page context so that's nice some image related Service uh
11:30 yep I am yeah for webp support and so forth looks
11:36 like they got some fallback uh type um options there for description as well
11:42 and and some of the tags that are used in the rendered HTML um and I haven't read all this in super
11:48 fine details so sorry if I'm kind of flailing through this but I'm trying to look for things that are kind of Big
11:54 Ticket items uh to
12:00 okay looks like they got some attention on the GPS area there which you know
12:05 this is a great little uh area too sexy that I discovered by happenstance
12:12 because of a field type that's in there but I know many of you probably have used this before where you can leverage
12:19 some of the uh the GPS coordinate type stuff to be able to
12:24 to build maps and so forth for location based uh
12:30 lists or views that you need to look at it's a neat little feature there I think it was called at one point it's called a
12:36 GPS picker is that right or something like that
12:41 really neat little Discovery I made a few years ago uh let's see I don't know
12:48 much about the atom mask that stuff but uh looks like they've based some some new ability there and some other little
12:56 small database cleanup and things like that um I did notice one thing that they're doing and I think this may have happened
13:02 before um version 15 here but it looks like there's a um there's a new Json file
13:10 that's a part of this um if and the reason I'm bringing this
13:15 one up is because of the subject higher today but like as you're working with the get and you know the state of an app
13:23 um everything has been saved in the past in the an app.xml uh format and now there's a new
13:31 uh Json file that holds some of that data but I haven't quite figured all
13:37 that out yet um Alessandra I know you've played around with some of this too or at least maybe have just seen it do you
13:43 know much about that and what it's used for yep I'm sorry you said that again sorry I
13:49 put you on the spot there but you know how the app XML file holds all the data
13:54 you know kind of metadata um associated with a particular app
14:00 I saw on it is that it just kind of gives the XML of the fields and
14:06 everything like when you export your content type that's by the ad there
14:12 yeah I was talking about the new file that shows up in that area now there's like a Json formatted file in addition
14:18 to the XML file now and I'm kind of curious as to yes that is sorry that is
14:23 about like the fields and everything while the XML file is more about the content
14:29 file when you export the the app
14:36 in or or it comes in as a Json Bob Json particular specs I mean so I think it
14:42 just automatically creates the the file now instead of just Windows exporting
14:49 gotcha gotcha okay and we're gonna see that here they're not salt on that please
14:56 yeah we're gonna see that in action here in just a minute to whenever uh we go
15:02 into that area um give me I'm not trying to find something here real quick give me a
15:07 second on another screen um let's see I think that's probably up for those announcements um so I think
15:15 what I'll what I'll do is uh does anybody else know of anything in the community that's uh noteworthy as far as
15:20 announcements or kind of buzz that's going on uh that I might have missed
15:25 you sexy related or yeah I'm more too sexy related but if it's remotely related with DNN and or
15:32 octane that would probably be noteworthy as well so we have Monaco available with
15:37 DNN elements now oh that's a good point yeah so um if you're not familiar with DNN elements uh
15:46 this is something that can be used in the context of too sexy because this is a basically a
15:54 I don't know if you want to call it design system but it's a collection of custom elements essentially for the
16:00 community it's just HTML and CSS in the end that's used but that can be pulled into a too sexy app for instance and
16:09 used so um this will eventually be part of CNN but right now it's a separate repo out
16:18 here that can be consumed and is published on npm but you can see the list of all these different components and uh Daniel you I
16:26 was just giving context here feel free I didn't mean to see your thunder or anything but if you want to talk about that
16:32 oh wow I mean so for those not familiar basically you load up one single JavaScript loader
16:40 file and then everything available here you use just like a new HTML element nothing
16:47 special to it that has properties and attributes Just Like A P tag would have
16:53 so if you need Monaco editor as long as you load that HTML you just need the DNN
17:00 Monaco editor tag and boom it's there so you save on all the setup you need to do
17:07 or these things I you can probably search for the Monaco editor in this HTML file so basically what David
17:15 highlighted is what you'll need to load and then where you use it
17:21 right you just it's a DNN like line 949 there
17:27 it's just DNN Monaco editor we put some code here in the symbol but you don't even have to you can just populate it
17:34 with JavaScript or whatever you want and yeah it's very quick way to integrate
17:39 this for code editing for whatever supported language so it supports
17:45 JavaScript and HTML and typescript and like all kinds of eraser the real really
17:51 cool uh way if you need some code editing yeah so like in the context of anybody
17:59 that's used Visual Studio code you've used Monaco editor because that is the editor that's used in the context of uh
18:06 of Visual Studio code and um also like you can see it in a DNN
18:12 instance on the SQL console the CSS Editor as well as the config editor it's
18:20 integrated in there but that um you know you can do the same type of thing in your in your two sexy app if
18:26 you need a if you need an editor within there so that's really really or a
18:31 custom module or whatever it's a plain HTML element as long as you have those JavaScript files so it's pretty cool
18:39 yeah and I'm we're showing a lot here but all it is is this tag DNN Monaco Dash editor so you import those two
18:45 script files and then um you just put this tag in there and then code can be left blank if you need
18:51 to and it'll be an empty editor there where you can put your own code in and wire up saving and all that kind of
18:57 things yeah so uh let's see here let's um let's
19:04 jump into um I'll call it the presentation portion of this but I this is not meant to be a
19:11 formal presentation by any means it's uh what I what I would encourage you to do if you do have a local instance kind of
19:18 follow along with me and do some of this because it's uh it's it's something that I've noticed is not talked about a whole
19:24 lot in the community and that is if you are working on a project let's say
19:30 You're Building something for your business or for a client um and you need to create it too sexy
19:37 app or you know a series of apps or a collection of apps for a particular
19:42 website one of the things that you'd want to do like if you were creating a custom
19:47 module in DNN or an octane you would Source control that custom module right
19:53 you know you would put it into some sort of source control whether it's um Visual Studio online or using team
20:01 Foundation services or get through there or using GitHub you would use that to
20:07 track all the changes of your files and do version management and things like that but in the context of a two sexy
20:15 app I mean like how would you do that um it may seem trivial you know I'll just put those files in there well I
20:22 mean yeah you can there's probably many different ways that you could go about doing this but working it out in a way that is a
20:29 good workflow for your developers or a team of developers to be able to easily
20:36 update things um you know without too much crazy overhead is a good idea you know to keep
20:43 things in Source control because maybe you've been used to just setting up a
20:49 staging site and then you do all your development in the browser on that staging site but it's hosted somewhere
20:55 else and you don't really have a way to easily Source control that without a
21:00 button jumping through a bunch of manual hoops right of copying and pasting and then well what do you do about all that
21:06 metadata that is configured in the context of two sex you know you're
21:12 setting up your app and you've got settings in there you've got content types you've got fields in the content
21:18 types you've got queries you've got all kinds of stuff you know view
21:23 metadata information well where is all that information stored you may think well that's just in the database well
21:29 what's your backup plan you know for that so I think it's good practice to learn how to use too sexy Within
21:38 you know Source control so I thought I would do a walk through of one way to go about doing this and I was
21:47 going to kind of do it from scratch here what I want to start out with is creating uh
21:55 I've created a folder within you know my C drive Dev and to sxc and I want to use
22:02 just for sake of time here I'm going to use Envy quick site to install local DNN
22:10 instance so let's pretend like I'm the developer on this particular project
22:16 but I'm going to be working with a team of developers but you know I'm going to kind of get things kicked off here so
22:21 I'm going to install a local instance of DNN I've already got that downloaded let me
22:27 just do 2 and 6c
22:34 uh demo or something like that uh let me
22:39 change this to that folder that I just created so I'm gonna create a DNN
22:44 instance now this could just as easily be done with octane um if you are using that so we're not
22:52 going to focus too much oh I forgot my uh my antivirus gets in the way
22:58 sometimes of in the quick site for whatever reason
23:04 and I have to temporarily pause it so don't attack my machine while I'm doing
23:09 this okay here we go
23:15 oh it's a joke I was supposed to really laugh at that
23:20 hmm okay so now we have a DNN instance so
23:26 um it's gonna be too sexy GitHub demo.loke so we'll wait for that to load
23:32 up now while that's oh wow it's already loaded up okay so let's just put in a very password here that's just
23:40 wonderfully secure we'll leave that as is and we'll call this 2sxc GitHub
23:48 demo and we'll leave it as a as a blank website and I'll click continue and
23:56 we'll let that install while that's installing oh wait it's already installed now I'm just kidding for the
24:01 12 seconds this will be installing yeah because this is 911 uh DNN 9.11 so it's
24:08 going to be pretty darn fast oh okay for the 16 seconds yes there we go nice
24:16 we'll go to a website now so we have a local DNN instance I need to install too
24:21 sexy so let me find that now I'm going to use just because I
24:28 don't want to go on the bleeding edge I've got it in a folder over here that I'm just
24:34 going to drag over and install 14.12.3 which is the latest LTS
24:41 so we'll install extension
24:46 I'm going to drag that I'm going to drag that file over to here
24:53 and install too sexy
24:59 so I mean how long did that take me less than two minutes I guess now I've got a local
25:05 development environment set up with too sexy and I'm ready to rock and roll I'm
25:10 ready to develop so I've got DNN installed locally it's all configured I can access it and I've got too sexy
25:17 ready to go so I you know if you're not used to using those tools there it's it
25:23 it is a great great way to do things so now you'll see that in my folder that
25:29 I had showed before Envy quicksite created this folder called too sexy
25:34 GitHub demo and within here you have three folders you have a database folder
25:39 which holds your SQL Server database you got logs which is your IAS logs and you
25:44 got a website folder and that's the root of your DNN instance so what I'm going to do here is I'm
25:51 going to go ahead and get my command line kind of ready to go here but too
25:57 sexy as you may or may not know when you create an app inside of too sexy it's going to create a folder using the app
26:06 name inside of a folder under portals zero in this case because this is my
26:13 first portal that I that I've got so I'm gonna use this one it's going to create a 2sxc folder in here and under that
26:20 2sxc folder it's going to create a folder for each app name so let's go ahead and add two sexy app
26:28 module to a page and let's uh just pretend like we're going to create a
26:36 um well not pretend we're going to do it we're going to create an actual app here so I'm going to get rid of the the HTML
26:41 modules to get put on this page by default by DNN and
26:50 I'm going to add an app module to the page of someone I'm going to build a
26:55 custom map here so I've added this and you know the first thing I need to do is kind of kind
27:02 of create an app because I don't I don't have the app already so I need to go into apps management here so I can
27:09 create an app so let's go ahead and do that in the apps tab here we're going to create an
27:15 app by default 260 has two apps already in
27:20 it if you've got a lighter version of too sexy here like this it has a Content
27:25 app which is kind of I don't know if you call this for beginners or not but it's
27:31 it it's where you have a lot of stuff kind of already put in there in a
27:37 context of a single app and it's it's just more for novice kind of um use I
27:44 would say um if you're if you're creating multiple types of apps for different
27:51 um features or anything like that you're going to probably want to create your own custom maps so but this method that
27:56 I'm using could technically be used for you know either of these built-in apps
28:03 as well but we're just going to do a custom one in this case by the way if anybody has any questions
28:08 or comments or you know hey you idiot that's not the way to do that
28:13 um go ahead and chime in uh this is not meant to be formal um so I'll create an app here and we'll
28:20 call this uh we'll just call this demo
28:26 and create now I've got an empty app here at this point right
28:32 so over in my older structure you don't see anything yet because I haven't
28:38 really interacted with this here but I'll just hit refresh just to make sure
28:43 and that is a bug I think in Windows
28:48 Explorer I've noticed that if I do refresh it shows the context menu here
28:53 in a weird styled way I don't know why it does that interesting yeah yeah I
28:58 don't know if anybody else has experienced that or not but that just started showing up after that last update so here in order to interact with
29:07 this before I do anything before I create anything I'm going to go over
29:13 oops sorry I should have done that I'm gonna go into that app itself so we're now in the admin interface for that demo
29:20 app I'm going to go over to app and here's the the the piece that you may or
29:26 may not know about if you go over in the app to the app tab here
29:32 you'll see at the bottom of this you'll see an app State versioning and this is
29:38 key to working with an app that is in a
29:43 in a git environment you know where you're wanting to Source control it so I'm
29:50 actually going to save the state of this app and what that does here
29:57 is it creates under portals zero it creates that too sexy folder and the
30:06 demo folder for the app so now I didn't have to do anything to create the app at all
30:13 other than just create an empty app and then come in here and save state and the idea here is that
30:21 you're working in your local say I don't have anything in this folder by the way except for the app underscore data
30:26 folder which has that app XML file that we were talking about a little bit earlier
30:32 but the idea here is that as I'm working on this app let's just say I want to
30:37 focus just on the demo app I can go ahead and just open this up in
30:43 Visual Studio code and I can work within here
30:50 so I don't have to work in the UI if I don't want to but I can but I can just you know quickly see
30:56 things in here that I'm I'm working on for the app now the thing that we haven't done is we
31:02 haven't really even though we saved State using too too sexy we have not done anything in this
31:10 oops oops I get to that folder
31:16 okay so so now I need to go into that demo folder that was created I'm going
31:21 to go into the website folder which holds DNN I'm going to go into portals and I'm going to go into zero I'm gonna
31:28 go into 2sxc what I'm wanting to do is get to that folder uh for the demo app
31:34 because I want to well actually I'm not even going to go that far I'm gonna go to the 2sxc folder
31:40 so right here reason I wanted to go to that folder is because we may have
31:45 multiple apps that we want to create within the two sexy folder here right
31:52 and we we created a blank demo app but we may need to create other apps for a
31:57 particular website or something like that so we want a source control all of those apps in the same repo now you
32:04 don't have to you could separate those into multiple repos but we found that that makes sense like if we're working
32:10 on client X then we create a client X repo for structure content and then we
32:16 have all of the structure content for that particular client implementation in one repo
32:22 so what I want to do is I want to make this folder this too sexy folder I want to make it a get repo
32:29 locally so I've got git for windows installed so I'm going to use the command line here
32:35 but you could easily do this in in Visual Studio code as well so kind of teacher they're on there but
32:42 I'm just going to do in this folder I'm going to get a knit and that will set up
32:47 this as a get repo so if I go back and look at the folder now you'll see that I
32:53 have a hidden folder for DOT get and that's going to be where all of our get history and stuff like that is going to
32:59 already get metadata is going to be stored so now I've got my local environment set up
33:06 I've got a local get repo I'm ready to start working on my app but I want to go ahead and get my entire
33:14 environment set up so where are we going to actually you know push this local get
33:21 repo too well I'm gonna use GitHub so I'm gonna go over to
33:27 for right now our Envision native repo here I'm going to create a new repo and we're going to call this
33:35 2sxc Dash GH demo okay and I'll just go
33:40 ahead and make this public that way you know for at least a period of time here you know people will be able to see how
33:46 this looks on GitHub um they just leave it public for a while so we'll create this repository and I
33:52 don't want to put anything in it I don't want to put any git ignore files or anything like that I want a completely empty repo here so now I actually have a
34:01 you know a repo out here on GitHub right so I can take this URL
34:07 and I can set that up as a remote of my local git instance so I'm going to do
34:14 get remote add I'm going to call this Upstream and I'll explain why in just a
34:21 little bit this is just more best practices for GitHub and I paste in that URL that I just copied into my clipboard
34:27 there so that's going to be my oops
34:34 okay yeah it's new with Git You have to make
34:40 it safe yep I forgot about that even though you created it so I'm just going
34:46 to do exactly what it tells me to do and I'm going to add an exception for this particular um yeah if you trust yourself yeah I do
34:54 trust myself so now I'm going to go back up and try to run that
35:00 um adding the remote there so looks like nothing happened but if I type get
35:06 remote now you'll see and I'll do Dash B and if Daniel was doing this he would do Dash BBV
35:12 correct yeah but they they all work with just one V uh and you see that I have an
35:18 up I have a remote named Upstream that ties to our GitHub repo now what I want
35:26 to do from there is even though I haven't set this up on GitHub yet I know that I'm getting ready to so I'm going
35:33 to do this I'm gonna just modify this command I'm going to add another remote called origin and
35:40 this is going to be a fork of the envisionative repo
35:45 um this can be on my personal GitHub account so this is just
35:52 you know you don't have to go through this step and do this but it kind of helps and I think that when
36:00 you're working with a team you'll want to you know you've got your Upstream repo for your organization but
36:07 me as an individual developer I want to work off of my Fork on GitHub and I want
36:13 to make pull requests or the Upstream repo to merge my
36:20 branches from a fork so you know you don't have to do this you could work off the same repo if you wanted to but that
36:27 that's keeps things a little bit cleaner that way if you completely muck up something in your fork you're not you
36:33 know messing with the with the uh Upstream repo there but I could just as
36:38 easily work off of The Envision a repo only and push branches up to it to do
36:44 pull requests on GitHub so I don't want to go into too much of the mechanics of get and GitHub flow and things like that
36:52 or get flow but that's just kind of the way we work
36:58 okay so now I've got I've got two I've got a local get repo and I have got two
37:06 remotes set up so at this point any changes that I make locally which
37:12 it looks like I'm on a main branch here because I haven't configured my local git
37:17 environment to default to develop so this is another kind of get GitHub
37:24 flow thing where we usually work off of a develop branch and then uh switch you
37:30 know that that'll be the working branch and then any kind of release that we do would be on the main branch up there so
37:36 what I'm going to do locally I'm just going to do get checkout Dash B and that's creating a new Branch I'm gonna
37:43 call it develop because that'll be what we kind of use and what I want to do is I want to do
37:50 get status to see what changes have been made well because we initialize this as repo we had created a folder in it
37:56 called demo git already knows about that change so what I want to do is just go
38:03 ahead and push this to the repo so that we have something in GitHub for this so
38:09 basically anytime you know we do something you know here we'll be able to to push it out to that as an update to
38:17 it but this just initializes our work right so I'm going to do get add
38:22 everything from this directory below because it's just what I wouldn't want to do in this case and then I'll do a
38:29 commit message for this and we'll say initial commit
38:36 and then I'm going to do a direct push to the Upstream repo because I don't
38:41 have my Fork set up yet so I can't really do any pull requests because there's nothing been there so this is
38:46 really just kind of the first time but I'll do get push and then by the name of my remote upstream and then the name of
38:53 the branch develop so what that's going to do is it's going to take everything that I have in my
38:59 local directory instance here and it's pushed it up to this repo I can just
39:05 control click that if I want to and that'll open it up over here now on our
39:10 repo we actually have demo app underscore data we actually have a commit here right
39:16 so now that I have a commit here I can go ahead and set up my Fork now I know I'm kind of going fast so you might have
39:23 any questions what is git yeah
39:29 um that one sec on my personal GitHub account
39:36 of this that way any future changes that we make I can push to a branch on my
39:42 fork and then do a PR uh from imaginative okay so in the essence of
39:48 time here because we're going to run out of time here pretty quickly I'm gonna go ahead and go to the Local website and
39:56 we're ready now at this point we don't have any pending changes so if I do get status
40:02 you'll see it think not stash status you'll see that things are clean
40:08 here if I were in Visual Studio code you'll see here on my
40:14 um Source control thing here oops it does not have an awareness yet let me
40:21 reopen that so I'll just do it from here code Dot reopen it sometimes Visual Studio lately
40:28 has been not playing nicely with Git okay so now it's
40:35 just kind of scanning this so it knows that we don't have any changes I'm on my develop Branch so let's say I'm ready to
40:41 start building the app now right so I'm going to implement let's just say I'm going to implement you know a content
40:47 type so what I want to do is locally I want to create a branch so I want to do
40:53 get check out Dash B that's a new branch and I'm going to do you know content
40:59 type that could be any name you want it to be but it needs to be something meaningful for the work that you're doing right so
41:07 now that I have a branch from a get perspective I'm ready to start making changes so this is kind of
41:13 the flow make your branch and then go into your local instance and start making the changes that you want to make
41:20 so in this case I'll go to the admin of the demo app and we'll go to content
41:25 type and let's create a new content type let's call this
41:31 um I don't know um basic
41:36 you know or I don't know what did you say Daniel do
41:42 an FAQ oh yeah that'll be well yeah we can kind of start an FAQ that's fine all right so
41:50 um we'll call it FAQ so in an FAQ we need a couple of fields there right so
41:55 we need to add a field for a oops didn't mean to right click we'll
42:01 do a question and that could be a string that looks good we can do uh an answer
42:07 you know that's the basics of an FAQ anyways right so those two Fields both of those Can Be Strings well actually
42:14 this one here the answer could be let's just go Rich text or something for this
42:19 one right uh wussy wig editor so that way we've got a just
42:26 basic text field for the question and then the answer could be rich text all
42:31 right so we'll go save and now we're we're done we've created
42:36 our content type our two Fields have been added to the content type I think we're ready to to go ahead and commit
42:43 those changes right so in this case always changed is metadata right we
42:50 haven't we haven't created any views or anything so we still don't have any file changes
42:57 right so if I do get status or here you won't see any changes so you're
43:03 probably thinking well how does this work well that's where that Save State comes
43:10 back into play so if you go back into well in this case now that we actually have an app I can go ahead and select
43:16 this app as what this instance of 260 is going to be I may have to refresh let me
43:22 do this oh it's not going to work because we don't have any views in there yet so I have to go back into the the admin demo
43:30 or apps management and go to the app but here now that we've got this data in here we can go back over to the app tab
43:38 scroll to the bottom and we've done the work that we want to do so now we need to re-save the state
43:45 so if we save State what that's going to do is it's going to update that app.xml file that's in the app
43:52 underscore data folder with all the changes that we just made and we're going to go look at that so now if we do
43:59 a get status we see that something changed and there's what we're talking about before so there's that app.json
44:06 file that's kind of new just showed up recently in in 260 14 I believe okay so
44:13 what what does that mean so we can look over here now in our in our Visual
44:19 Studio we can see what kind of changed well web config was added to the root because it realized uh we're working on
44:25 Razer implementation here so it gives us some kind of helper here for visual studio that's great
44:31 um the app Json file this is the new file that I'm not familiar with and I don't know what it all means but it it
44:37 created that and then here is all the changes that we
44:42 just made to the app and all it is is some metadata but you can kind of deduce from this that
44:48 okay we at we created the content type called FAQ cool uh uh we
44:57 created a field an attribute in the case of XML here so the attributes set you know that holds
45:04 the name of the content type and this is a question and that question is
45:11 um an input type of string uh and it has I mean you can just see this is stuff
45:17 that too sexy takes care of for us but we don't ever modify these files directly unless you really know what
45:23 you're doing in here and understand the inner workings of too sexy but it took
45:28 care of it so that allows us to work in the browser for meta data changes it
45:34 allows us to work in our Visual Studio code environment for any views or other
45:39 types of flat files that we're working with on the site but we just let too sexy do the work so we we make our
45:47 changes in the UI come back over to the tab uh for app
45:53 and save State and now we're ready to do a commit locally in our git so I'm good
46:00 with all the changes that was made here so I can just do get add everything
46:07 and we'll do a commit message and we'll say add FAQ
46:14 content type and then what I'm going to do this time instead of pushing it to the Upstream
46:22 I'm going to push it to my Fork with a branch called same thing content
46:27 Dash type so I'm going to push that and now
46:33 oops uh I think I named that wrong should be David Dash Poindexter so pardon me when
46:41 we do get remote set URL for origin to https
46:49 oops github.com
46:56 I probably should have just copied and pasted it but
47:01 uh to sxe dash GH demo Dot
47:07 get that should fix that now I can just do get push origin content type again
47:12 and that should work this time because that should be my Fork so now what I can
47:18 do is right here in the command line I can just control click this and it'll actually start a pull request for me so
47:25 what it did though before we before we do that if we go to my Fork which we're on right now and we
47:33 refresh this we'll see that if we change here content
47:38 type branches out there so that's what I had just pushed out there so now I've got that Branch out there and it would
47:44 have the changes to it so I could either you know compare them to a pull request here or I can just click on that from my
47:52 command line here and that'll automatically open up a pull request
47:57 that tries to pull from my content type branch on my fort repo
48:03 into the Envision native repo the develop Branch so that that would be
48:09 the correct kind of flow there if I scroll down a little bit we can see that it oh okay it added an app.json file and
48:17 it updated app XML to add those two new fields and content type there and it
48:25 added that web config file so that looks good to me so for the sake of time I'm just going to copy and paste this in
48:31 here I'm not going to put any of that stuff on it so I do create pull request
48:37 and then somebody would come and review this and they would approve it and
48:45 ultimately we would merge that into develop um so that we have it so there's the
48:50 kind of the the flow of how we do that and then we can delete that Branch off
48:55 of our fort so now we've kind of covered the creation of the app so you just
49:02 basically rinse and repeat for everything that you want to do uh in into sexy for that app and building it
49:10 out if I could get my browser back open um including your views and your views
49:16 will just become you know CS CS HTML files that are inside of the respective
49:22 app folder so you can work with those just in visual studio if you wanted to just give
49:29 you a bit more context of course too sexy uses Monaco editor for the file
49:34 editing experience in there so you know you have a nice browser experience too but sometimes it's just easier to work
49:41 in Visual Studio code so you may be thinking okay well that's
49:46 all great but what about when you go to get this on another site so because
49:53 we're working on a local instance here right now well that's when you know you would
49:59 actually take let's let's pretend that we've built this app out completely
50:04 and we're ready now to put it on a on another site we can come into apps
50:10 management here go to apps and we can actually oops I'm sorry I was actually already there I wasn't even paying
50:16 attention um we could go to here and we would export the entire app
50:22 when we get it to a state that we believe we've got all of the basic features complete in it and we're ready
50:30 to kind of work with it on a staging site for a client we would export the entire app and that would create a zip
50:38 that we could then come to the other instance of DNN on the staging site and
50:44 we would import that entire app so instead of creating an app from scratch
50:50 you know you could just come into here and instead of creating an app you would import the app and use that and that
50:56 gives you the starting point for that site things get a little bit more complicated now that you're working on
51:02 that site because you might need to make changes on the staging site that also need to be tracked in your get
51:10 environment right so that's when things get a little bit more complicated where
51:16 if you make a change on a staging site you do need to do that locally as well and that's more of a manual thing and
51:22 that's one of the pieces of overhead that you're going to deal with when you're trying to use Source control with
51:28 too sexy but hopefully this helps everybody to know kind of how to protect your development environment and give
51:36 the uh you know nice backup and version history and and all
51:41 that any questions or
51:48 concerns or I'm just looking at the chat now I haven't been able to uh to uh keep
51:55 up with it over here okay it looks like we had one question how would changes to app.xml affect the DNN database if you
52:03 restore an older version or push changes to master Branch wouldn't it create a
52:10 nastly mismatch with the actual DNN database and the 260 app data present
52:16 there if you change the answer type okay that's a different question
52:21 um yeah so the it's a good question but this is just metadata that is ultimately
52:28 stored in the database you're absolutely right on that but that's what the state is for so if
52:37 this is where the extra overhead that I was mentioning comes in so if you already have it on a staging site but
52:44 you also have your local instance when you start working on that staging site if you have have to make changes to any
52:49 of the metadata so let's just say you had to change a field type or you had to you know add some Properties or
52:56 something to it or change properties to it there's a couple ways you can do that if you have access to that hosting
53:03 environment then you could also use the same kind of functionality that we've used here that
53:10 when you make those changes you could save the state there go and grab that Apex mil file there copy that into your
53:18 local get branch that you just created for the changes and it would see the changes and it
53:24 would track the history of those changes so that's one way you can do it but that's only if you really have access to
53:30 those flat files on your on your staging site um so that we always try to like let's
53:36 say we're building an entire website and we have eight apps that need to be created for that website
53:42 we'll actually create all those you know one developer usually is responsible for creating most of those but you know even
53:49 if it's multiple we would do that locally and get it as far as we can to
53:54 get that good strong starting point point first because we know we're going to have to
53:59 deal with that extra overhead you know when whenever we start working on the actual staging site
54:06 there's probably some better ways to do this you know especially if you have better access to the to server
54:11 environment um of course you could um and get control right on the server I
54:19 wouldn't necessarily recommend that but you know depending on your environment you may be
54:24 comfortable with that we don't do it that way just for
54:29 security reasons but um yeah there's multiple ways to
54:35 approach something like this but uh this is one way you can do it and it's a nice little feature with the App State
54:40 versioning stuff hopefully that answers your questions y'all
54:50 well um that took a little bit longer than I thought it was going to take and I apologize for that
54:56 um does um does anybody have any tips or anything they want to share real quick before we wrap this uh this Meetup up
55:10 crickets crickets Daniel I know you've created so many of
55:17 these things that you have all kinds of tips you can just uh share right me
55:22 I'm Noob on this that's pretty much it you know you're
55:28 taught me as well did you answer the question about the database Fields like if you change a
55:34 content type than in the database it you touch that okay sorry yeah so the
55:39 the one piece that I didn't answer and I'm glad you said it like that Daniel because it just triggered me um I may not have answered this real
55:45 well so I talked about the saving state but I didn't talk about the restore state so what you can do is if you make
55:54 a a chain I gotta be careful how I word this but you can actually take so let's say that
56:01 I'm working on this project and I need Daniel to pick up this project because I got to go work on another project and he
56:08 needs to create this local instance for himself and get to the same state that I am at
56:15 well he could literally clone the repo here into his local DNN instance in that
56:24 same folder structure and he would go into to sexy and he
56:31 would just create the blank app do nothing else just
56:36 create the blank app and it has to be named exactly what those folders are because too sexy is not aware
56:42 of what those apps are just by you know there's files being in the folders so if
56:48 he creates an an app for every app that's in there you know if you have those eight apps or whatever you just
56:54 create empty apps and then for each one of those you can come into and come over
56:59 to the app and he would just simply restore State and what that would do is it would pull in everything that's been
57:06 done and it would be working exactly the same way as it is in the other developers environment in my environment
57:12 the only caveat to that is content so if if I had added content
57:20 um so typically when we're developing apps we're just using demo content and that's all we're not building out the
57:27 entire content you know the shoes for every single app it's just that demo content item and you
57:33 know that's not going to be Source control because that's that's stored in a separate folder and I'll show you real quick here
57:43 so
57:49 within here yeah here we go so under portal 0 in addition to the 2sxe folder
57:55 that it created it also created an atom folder so that's where all the images and so forth are going to go and you
58:01 have a folder for each app and we choose not to Source control the images uh
58:08 because it's like where does that start where is it in I mean we could but
58:13 I don't know when you're developing sometimes you just need to load a bunch of content in there that you don't in
58:18 the end won't you know to be on the staging site when you put it there because when you export everything it's going to pull all that
58:24 stuff in as well so it's just one of those decision points we don't Source control this folder because it can get
58:29 unruly in certain more especially more complex apps that have a lot of data
58:35 um and imagery but that's how you would actually restore another instance of DNN to the
58:43 same state is using the restore state if you just plop that Apex Mill and all related folder files
58:51 and folders in there and then restore state that will reset everything to
58:56 exactly what that file is configured to do so it kind of gets rid of your data and
59:03 everything so I would not do that on a staging site if you have built out a
59:08 bunch of stuff on the stating site you don't want to use that feature to restore from your local instance unless
59:13 you're just getting started and you could do that and be okay with it but um we don't use that method for a
59:21 staging or a production site initially it's just for the development
59:26 of the apps themselves not as much for content as when you have more than one person
59:31 whatever is the image I did a date with added it on his instance is not my image
59:38 ID so it's good I can try and look from my image ID in that and then
59:44 the same thing like we've ever content that you added on the sides mine might be ID three four five and here's five
59:51 six eight so it's gonna be like oh my God I don't know where anything is you kind of have to reinstall
59:57 when we do the separating thing Vision if you usually try to each person Works in just one app
1:00:05 so we don't have this stabbing on each other's toes and things like that
1:00:13 that gets quite complicated when you start having more and more content yeah it's true if you do add images you
1:00:21 know to like powered out onto my local instance you would see if you navigate through to the atom folder it's going to
1:00:27 have a bunch of you know good based image names or file names that are in here and those are referenced by IDs
1:00:35 through that app XML file so that that does bloat your app XML file too because
1:00:41 like content references are stored in there as well so um yeah it can get kind
1:00:47 of ugly and you know we we see that it's not perfect the way that we do it that's why I mentioned there's so many
1:00:52 different ways you could go about doing this but we found this this works pretty good uh for for most use cases just with
1:01:00 the caveat that you're going to have that extra overhead there is one other question that was in chat here about
1:01:07 um copying assigned data rose from a from one DNN install to another you know
1:01:12 like if you had 10 FAQ entries um how could you copy this so they display on the on the second DNN site
1:01:19 well that's where you can get into the export of parts
1:01:24 of a particular app so if you're dealing with data you can actually it's the
1:01:30 easier way to do this too if you're inside the app and you're looking at the data itself and if we had let's just add
1:01:36 an item in here so
1:01:42 so let's just say I call this q1 and this is going to be q1 answer
1:01:50 and let's say you had 10 of those in there you could actually just right here the content type level you can actually
1:01:57 take and Export that data from here and if you had the app that matched the
1:02:02 exact same thing you could do the import on the other DNA analysis and it'll pull in that data
1:02:08 foreign I sort of see what you're doing there
1:02:15 but how does it get it how do you attach that then to a particular instance on a
1:02:21 page ah now that that's a good question that's where the replace works you know
1:02:28 that's a bit of a manual process so like you would put that instance on the page
1:02:33 assign it to that app type and then you would use for each content item you're gonna have to replace with an existing
1:02:40 content item so you know how you have the multiple action um kind of buttons that are up there you
1:02:47 know where you got that and things like that there's one called replace and you can use that to replace that current
1:02:53 content item with a new one there's also an ad existing one that you can use to
1:03:00 add an existing content item to that particular instance so that's a bit of a manual process for you know instances of
1:03:08 the of the app on the page because the data could all be back there
1:03:13 but not associated with that instance of the module right exactly yeah yeah
1:03:19 that's been really interesting because I'm scrambling like heck trying to learn too sexy as it continues to evolve and I
1:03:27 know nothing about GitHub so I think this is a video I might watch a few times this is great
1:03:33 well I talked really fast but feel free to ask any questions you know on the side as you go through it
1:03:39 um again uh it's uh it takes a little bit of getting used to and there are
1:03:44 definitely some gotcha spots along the way uh that you that you run into but uh
1:03:50 once you get used to the flow you know it it flows pretty smoothly
1:03:58 so I hope that's helpful for everybody um I I was hoping we'd have a little bit of time for more tips and things like
1:04:04 that but I could see this one was pretty interesting to a lot of people so I may have more questions if we need to kind
1:04:10 of do more of this next next Meetup that's totally fine as well I haven't really planned that one out yet but if
1:04:16 anybody does have ideas on that one it'll be the first Friday in February and uh I'm happy to kind of format that
1:04:24 eat up to to meet everybody's needs it doesn't always have to be a presentation type thing too you can do a workshop or
1:04:32 something like that where you know different people share screens or we could do a a hangout on Discord or something like
1:04:41 that where multiple screens can be shared and all that good stuff too so uh just let me know if you have any ideas
1:04:46 on this we'll let this evolve naturally I'll also try to get this meeting
1:04:53 recording posted out onto YouTube I just need to create a brand Channel out there
1:04:58 for the Meetup and kind of get that set up initially to be able to put out there
1:05:04 but I'll go ahead and get it rendered and ready to go for everybody but thanks everybody for joining
1:05:10 that's great thanks a lot my pleasure thanks and we'll see you next month

RELATED VIDEOS

2sxc for April (2023)
Apr 07, 2023

2sxc for March 2023 (Presentation by João Gomes)

2sxc for March (2023)
Mar 03, 2023

2sxc Show & Tell (Open Mic) for March 2023