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 |