00:00:03.066 --> 00:00:08.146 Particular to react, so if you're gonna do a side project.
00:00:08.796 --> 00:00:09.466 So one second.
00:00:14.836 --> 00:00:18.514 So if you're like you know, you're on your home computer and
00:00:18.514 --> 00:00:22.253 you say, hey, I'm gonna build a React Side project. The first
00:00:22.253 --> 00:00:25.991 thing you do is you kind of pull up your terminal, you do NPX
00:00:25.991 --> 00:00:27.016 create React app.
00:00:29.296 --> 00:00:32.800 And then you type in your app name. So like my app and what
00:00:32.800 --> 00:00:36.246 this will do is this will give you the scaffold of a React
00:00:36.246 --> 00:00:40.043 application and the apps name is gonna be my app and so they did
00:00:40.043 --> 00:00:43.664 this kind of one line command. To create this you can look it
00:00:43.664 --> 00:00:47.285 up. This is what everybody runs off. We're running off create
00:00:47.285 --> 00:00:50.906 React app also. Obviously our app is extremely built out now.
00:00:47.646 --> 00:00:47.986 OK.
00:00:52.946 --> 00:00:58.144 But whether you do this or just run a regular, even just, you
00:00:58.144 --> 00:01:03.425 know, stand up your own React app from scratch when you do NPM
00:01:03.425 --> 00:01:08.791 run the start. What that does is let me see into a project real
00:01:08.791 --> 00:01:13.066 quick that opens up a dev server on port 3000 and.
00:01:14.086 --> 00:01:15.956 The idea is.
00:01:17.906 --> 00:01:20.071 See, ours is a little bit different, which makes it
00:01:20.071 --> 00:01:20.946 confusing for people.
00:01:21.866 --> 00:01:25.356 Umm, but normally you would go see ID.
00:01:26.096 --> 00:01:27.926 NPM run start.
00:01:29.006 --> 00:01:32.543 And then this is going to open up a tab in my browser and it's
00:01:32.543 --> 00:01:36.137 gonna be appended with the port 3000. So you get Hut reloading,
00:01:36.137 --> 00:01:39.449 which means as you're making front end edits and you click
00:01:39.449 --> 00:01:40.516 save in the editor.
00:01:41.306 --> 00:01:41.796 Uh.
00:01:43.626 --> 00:01:46.769 The changes will automatically reflect on the page. You don't
00:01:46.769 --> 00:01:49.608 even need the refresh the page, so it's really easy for
00:01:49.608 --> 00:01:50.216 development.
00:01:50.936 --> 00:01:51.546 And.
00:01:53.156 --> 00:01:56.006 As you know, or as you probably seen, we don't.
00:01:59.666 --> 00:02:00.716 You see real quick.
00:02:03.056 --> 00:02:05.904 We don't use the 3000 port, which is what I'm trying to get
00:02:05.904 --> 00:02:06.046 to.
00:02:12.146 --> 00:02:16.012 But when you click MPM run start, you'll see that it opens
00:02:16.012 --> 00:02:19.944 up at 3004, so ours is a little bit different because we're
00:02:19.944 --> 00:02:23.811 doing the injection in the DNN. So on your local, whenever
00:02:23.811 --> 00:02:27.546 you're developing, you'll always have the NPM run start.
00:02:33.476 --> 00:02:36.046 It might not be working because I don't have.
00:02:41.266 --> 00:02:42.056 My apples on.
00:02:46.466 --> 00:02:50.086 You'll you'll use the NPM run start on your local because.
00:02:50.836 --> 00:02:52.406 Beginning source, sorry.
00:02:56.466 --> 00:02:59.780 Because you essentially want that deploy that heart
00:02:59.780 --> 00:03:03.732 reloading. If you weren't to use the NPM run start, you would
00:03:03.732 --> 00:03:07.365 have to do an NPM run build every time. I don't know why
00:03:07.365 --> 00:03:08.576 that's not working.
00:03:10.416 --> 00:03:13.925 You'd have to do an NPM run build, compile all the files,
00:03:13.925 --> 00:03:17.252 wait for it to build and then refresh the page on your
00:03:17.252 --> 00:03:17.736 website.
00:03:18.596 --> 00:03:23.126 Uh, so let me just kind of show you guys so be worth.
00:03:26.896 --> 00:03:28.546 It's probably easier for me to show.
00:03:33.976 --> 00:03:35.206 Should just be.
00:03:51.916 --> 00:03:53.966 I don't know if I'm going crazy or what.
00:04:39.116 --> 00:04:40.926 There was such file open.
00:04:49.176 --> 00:04:50.816 Let me try and.
00:04:55.606 --> 00:04:56.516 For PC's.
00:05:22.866 --> 00:05:25.116 I don't know what happened to my bed folder.
00:05:25.916 --> 00:05:28.436 Uh, alright, we can start this.
00:05:25.946 --> 00:05:26.236 Hmm.
00:05:27.726 --> 00:05:31.098 There's a complain about your SSL certificate. Is that what
00:05:31.098 --> 00:05:32.616 the clarity client.com.pdf.
00:05:32.956 --> 00:05:35.786 Yeah. Yeah, it is. Which?
00:05:37.436 --> 00:05:40.726 Yeah, maybe because I didn't update it to the new SSL
00:05:40.726 --> 00:05:44.077 certificate, but I'd be surprised at that stopping the
00:05:44.077 --> 00:05:44.686 NPM start.
00:05:44.826 --> 00:05:47.056 Yeah, that, that would be surprising.
00:05:47.716 --> 00:05:48.236 Kinda weird.
00:05:49.476 --> 00:05:50.056 Ohh.
00:05:51.216 --> 00:05:52.286 But yeah, so.
00:05:53.486 --> 00:05:56.716 As this boots up in the background, the the reason that
00:05:56.716 --> 00:06:00.061 we do the M10 run start is because essentially the way we
00:06:00.061 --> 00:06:03.810 have it set up is you can make a front end edit save in while it
00:06:03.810 --> 00:06:07.559 doesn't give you the direct hot reloading as the 3000 for it and
00:06:07.559 --> 00:06:08.366 tends to like.
00:06:09.156 --> 00:06:12.302 If you're using just straight create React app, it just
00:06:12.302 --> 00:06:15.673 renders on the page. You don't have to refresh the page. We
00:06:15.673 --> 00:06:19.043 typically just need to refresh the page. I think with newer
00:06:19.043 --> 00:06:22.639 projects we're getting better. I know with the older react ones
00:06:22.639 --> 00:06:26.065 it does require a page refresh, but that's better than going
00:06:23.406 --> 00:06:23.716 OK.
00:06:26.065 --> 00:06:29.211 through this build every time you make a change because
00:06:29.046 --> 00:06:29.496 Yeah.
00:06:29.211 --> 00:06:32.638 otherwise this is how long you would have to wait every time
00:06:32.638 --> 00:06:35.166 you made an edit to see it on the front end.
00:06:35.536 --> 00:06:36.106 OK.
00:06:36.946 --> 00:06:37.566 Gotcha.
00:06:37.386 --> 00:06:39.696 Kind of kind of like how.
00:06:40.646 --> 00:06:44.004 You need to rebuild the back end every time a front end. There's,
00:06:42.596 --> 00:06:43.006 Mm-hmm.
00:06:44.004 --> 00:06:46.905 you know, we're used to just being able to make whatever
00:06:46.905 --> 00:06:49.856 edits we want, seeing it immediately change. We're on the
00:06:49.856 --> 00:06:52.553 back end. You need to be a little bit more strategic
00:06:52.553 --> 00:06:55.352 because you don't want to rebuild every 5 minutes, you
00:06:55.352 --> 00:06:55.606 know.
00:06:55.676 --> 00:06:58.426 OK. Is this so like is it using?
00:07:00.356 --> 00:07:02.066 Webpack or?
00:07:03.416 --> 00:07:06.366 So one one of the various JavaScript.
00:07:07.006 --> 00:07:11.282 Things like every time you save, it's rebuilding those JavaScript
00:07:11.282 --> 00:07:14.716 files and so that's why the change is like OK, cool.
00:07:11.626 --> 00:07:11.916 Yeah.
00:07:14.196 --> 00:07:16.686 Yep, Yep, we're using webpack, so Yep.
00:07:15.386 --> 00:07:15.686 Cool.
00:07:17.836 --> 00:07:24.449 That is correct. Now for like a production site, when you go on
00:07:24.449 --> 00:07:25.586 to staging.
00:07:27.586 --> 00:07:29.326 Any thoughts on how this would be different?
00:07:31.426 --> 00:07:32.426 Anyone can answer that?
00:07:33.486 --> 00:07:33.766 Umm.
00:07:33.986 --> 00:07:34.636 And why?
00:07:36.296 --> 00:07:37.986 Why it would be set up a little bit different.
00:07:39.586 --> 00:07:42.456 In terms of like what the output is.
00:07:43.556 --> 00:07:46.126 Well, I guess why wouldn't we use?
00:07:46.946 --> 00:07:52.086 NPM runs start, say on QA and stage sites and production.
00:07:53.666 --> 00:07:58.028 Well, as far as I understand the run start, these are just
00:07:58.028 --> 00:08:02.685 aliases for other things. For the most part. So like run start
00:08:02.685 --> 00:08:07.268 does your does your build and then does like a watch, so that
00:08:07.268 --> 00:08:09.116 as you edit it it it can.
00:08:10.276 --> 00:08:14.185 Rebuild itself on the fly or parts of the app, and I assume
00:08:13.786 --> 00:08:14.086 Umm.
00:08:14.185 --> 00:08:18.420 on like QA or stage or prod you just want like the most minified
00:08:18.420 --> 00:08:22.395 cut down version getting built once when you're building the
00:08:22.395 --> 00:08:25.066 artifact and just spinning it out there.
00:08:26.286 --> 00:08:28.966 I'm not sure if that goes the right direction of what.
00:08:26.316 --> 00:08:26.716 Right.
00:08:28.676 --> 00:08:32.852 Yeah. Yeah. No. Totally. Yeah. I don't know why this isn't
00:08:29.626 --> 00:08:29.956 OK.
00:08:32.852 --> 00:08:34.976 building. That's really weird.
00:08:36.026 --> 00:08:36.496 Uh.
00:08:44.556 --> 00:08:45.116 There it goes.
00:08:46.136 --> 00:08:50.053 Yeah. So like on the production site, so when you log on to the
00:08:50.053 --> 00:08:53.970 servers, obviously they're not gonna have, you know, a terminal
00:08:53.970 --> 00:08:57.704 running NPM run start for every site. So you run the NPM run
00:08:57.704 --> 00:09:00.948 build and then that will actually populate the build
00:09:00.948 --> 00:09:04.681 folders where we then point the app pools to. So it would be
00:09:04.681 --> 00:09:06.456 this build folder right here.
00:09:07.146 --> 00:09:09.286 So directly into the react.
00:09:10.316 --> 00:09:12.096 And then like if I was to come here.
00:09:13.206 --> 00:09:14.466 Go sights.
00:09:16.346 --> 00:09:17.706 A&E.
00:09:18.706 --> 00:09:22.956 Desktop modules clarity. Ecommerce shop, which is the
00:09:22.956 --> 00:09:24.136 React app pool.
00:09:25.176 --> 00:09:27.416 Ultimately goes to that build folder.
00:09:29.026 --> 00:09:33.320 And like Tristan said, you know, these are published minified
00:09:33.320 --> 00:09:34.636 optimized files so.
00:09:34.566 --> 00:09:34.916 OK.
00:09:36.536 --> 00:09:40.561 Pretty much QA, stage and prod. You'll always be running an NPM
00:09:40.561 --> 00:09:44.712 run build. You would never do an NPM run start, but on your local
00:09:44.712 --> 00:09:47.856 when you're developing you use the NPM run start.
00:09:48.366 --> 00:09:49.196 I see. OK.
00:09:48.926 --> 00:09:52.570 It just it your life much easier and development much, much
00:09:52.570 --> 00:09:53.056 quicker.
00:09:54.256 --> 00:09:54.626 Cool.
00:09:55.346 --> 00:09:56.476 So cool.
00:09:57.146 --> 00:09:58.616 But ask that. Thank you.
00:09:58.556 --> 00:10:02.136 Yeah. Yeah, but yeah, you can see how, like, how this opens
00:10:02.136 --> 00:10:05.656 the 3000 port because that's just kind of how the NPM runs
00:10:05.656 --> 00:10:09.176 start works. But because we're doing the injection in DNN.
00:10:10.386 --> 00:10:13.443 When we started switching over to react, you'll see some
00:10:13.443 --> 00:10:16.661 projects where like this will actually pull up if I have my
00:10:16.661 --> 00:10:19.772 app pools turned on, it looks close to the site, but it's
00:10:19.772 --> 00:10:20.576 really far off.
00:10:21.726 --> 00:10:22.066 Well.
00:10:21.956 --> 00:10:25.205 And so we were. We were using this initially, but then when we
00:10:25.205 --> 00:10:27.836 started deploying the stage and prod, it was like.
00:10:28.636 --> 00:10:31.322 I totally different site, there was just way too big of a
00:10:31.322 --> 00:10:34.286 difference. So we just totally did away with this all together.
00:10:34.566 --> 00:10:35.076 Yeah. OK.
00:10:35.686 --> 00:10:36.116 Sam.
00:10:38.806 --> 00:10:40.196 So the reason we have.
00:10:41.236 --> 00:10:46.210 We do it this way instead of like a vanilla React app is
00:10:46.210 --> 00:10:47.606 because of that.
00:10:49.546 --> 00:10:52.466 Is because of DNN. If I understand that correctly.
00:10:53.536 --> 00:10:58.748 Uh, it we're integrating with DNN and that's why it's not just
00:10:53.946 --> 00:10:54.836 Yeah.
00:10:58.748 --> 00:10:59.906 like straight.
00:11:00.616 --> 00:11:04.876 Brennand on Port 3000 or whatever, OK.
00:11:05.516 --> 00:11:08.396 Yep. Yeah, definitely. Yeah. It's because of the DNN
00:11:08.396 --> 00:11:11.873 integration. Other than that, we would just be able to use that
00:11:11.873 --> 00:11:14.536 dev server and then just do a regular build. So.
00:11:15.726 --> 00:11:20.131 Is they've got some I probably can't even do it justice. It was
00:11:20.131 --> 00:11:23.916 really David started it and that I think Jesse and BL.
00:11:25.766 --> 00:11:29.616 Really took it to another level. I I have to dig for the file,
00:11:29.616 --> 00:11:33.161 but there's a JS file in here that essentially is kind of
00:11:33.161 --> 00:11:36.094 doing the watch on the components and then also
00:11:36.094 --> 00:11:40.128 updating the DNN components with them because the last training I
00:11:40.128 --> 00:11:44.039 went over we kind of saw how the React components were injected
00:11:40.826 --> 00:11:41.166 Ohh.
00:11:44.039 --> 00:11:47.950 into DNN. There is a file that kind of watching for it and then
00:11:45.896 --> 00:11:46.236 Umm.
00:11:47.950 --> 00:11:51.556 doing the injection on the updates. So like when you save.
00:11:52.466 --> 00:11:52.996 Ah.
00:11:53.016 --> 00:11:53.296 Cool.
00:11:53.996 --> 00:11:54.406 So.
00:11:55.496 --> 00:11:58.268 Yeah, it was pretty cool that to see at all actually come
00:11:58.268 --> 00:12:01.182 together for the first time when we were switching over from
00:12:01.182 --> 00:12:04.336 Angular. And then it's just, you know, kind of got more efficient
00:12:04.336 --> 00:12:07.347 over time. And who knows, maybe at some point you will be able
00:12:07.347 --> 00:12:10.214 to use that 3000 port and not even have to reload the page.
00:12:10.214 --> 00:12:11.456 That wouldn't surprise me.
00:12:15.966 --> 00:12:16.286 Nice.
00:12:17.646 --> 00:12:17.996 So.
00:12:21.116 --> 00:12:22.786 Anybody else got a?
00:12:23.896 --> 00:12:26.324 Any questions or anything that they've been kind of running
00:12:26.324 --> 00:12:26.526 into?
00:12:30.876 --> 00:12:31.456 Uh.
00:12:34.816 --> 00:12:38.394 OK, with with regen I I think I made a couple of of mistakes
00:12:38.394 --> 00:12:41.914 with setting up my local and and Tristan actually helped me
00:12:41.914 --> 00:12:43.146 through some of this.
00:12:43.796 --> 00:12:48.600 So I think I had kind of like just a basic misunderstanding of
00:12:48.600 --> 00:12:53.481 the right way to set up a local, so I ran these stuff installer
00:12:53.481 --> 00:12:53.786 and.
00:12:55.956 --> 00:13:00.776 But I think what I did not do is go out to the QA side, grab the
00:13:00.776 --> 00:13:05.299 app settings and and so on and so forth. And I I realize now
00:13:05.299 --> 00:13:09.451 that that the more established the project is, the more
00:13:09.451 --> 00:13:12.046 important that is. So getting the.
00:13:14.036 --> 00:13:14.556 Uh.
00:13:16.026 --> 00:13:18.390 What are my what am I trying to ask? I'm trying to keep this
00:13:18.390 --> 00:13:19.126 front end specific.
00:13:19.786 --> 00:13:20.076 Sure.
00:13:19.806 --> 00:13:21.676 So at app settings.
00:13:23.276 --> 00:13:25.860 Is there anything else like front end related, I guess
00:13:25.860 --> 00:13:26.236 skinned?
00:13:27.576 --> 00:13:30.966 What else front end related for a project?
00:13:32.336 --> 00:13:35.974 Do I need to be thinking about when I'm setting up a local to
00:13:35.974 --> 00:13:39.553 make sure that my site is as far as the front end goes is as
00:13:39.553 --> 00:13:41.196 close to QA as it should be?
00:13:40.726 --> 00:13:41.116 Yeah.
00:13:41.866 --> 00:13:44.016 Yeah, definitely. Pretty sweet question.
00:13:45.316 --> 00:13:48.913 It's gotten better with the installer and it's going to get
00:13:48.913 --> 00:13:52.269 better as we start moving the app settings into version
00:13:52.269 --> 00:13:56.105 control. Because you're right, the app settings are number one.
00:13:56.105 --> 00:13:59.462 You kind of set up a local your app settings, or wildly
00:13:59.462 --> 00:14:03.179 different from you know, the outer box app settings are going
00:14:03.179 --> 00:14:06.835 to be different from what's on QA. And so before we had them
00:14:06.835 --> 00:14:10.431 all in one file and what you needed to do was kind of parse
00:14:10.431 --> 00:14:14.088 through and see which ones are environment specific and then
00:14:14.088 --> 00:14:16.006 which ones are project specific.
00:14:16.376 --> 00:14:21.843 So like if the clarity site root URL and I'm say I'm looking on
00:14:21.843 --> 00:14:27.139 QA is bit dot QA and I just do a full copy and paste and move
00:14:27.139 --> 00:14:32.606 this on to my local while it's not gonna work right cause mines
00:14:31.276 --> 00:14:31.616 Right.
00:14:32.606 --> 00:14:33.716 bid local so.
00:14:35.116 --> 00:14:38.451 Brendan, with the most recent edits in probably other
00:14:38.451 --> 00:14:41.786 developers, they've started splitting those out into.
00:14:44.026 --> 00:14:48.121 Why isn't this one? Have it? There's environment and then
00:14:48.121 --> 00:14:49.886 also client app settings.
00:14:50.756 --> 00:14:52.746 I don't know why.
00:14:56.506 --> 00:14:58.106 And I hadn't been on this project in a while.
00:15:00.786 --> 00:15:04.190 There's typically two different app settings, so there's app
00:15:04.190 --> 00:15:07.762 settings environment dot Jason and then app settings dot client
00:15:07.762 --> 00:15:11.334 dot Jason, and so you'll just be moving the client app settings
00:15:11.334 --> 00:15:15.017 and with those you can just do a full copy and paste from QA onto
00:15:15.017 --> 00:15:18.254 your local. The environment ones would be specific to the
00:15:18.254 --> 00:15:21.770 environment, so like you know that those are the ones that you
00:15:21.770 --> 00:15:25.285 need to kind of parse through and maybe update QA to local, et
00:15:25.285 --> 00:15:25.676 cetera.
00:15:27.226 --> 00:15:30.647 Uh, and then these the client ones will be moved into source
00:15:30.647 --> 00:15:34.012 control, I believe relatively soon, so it should just be as
00:15:34.012 --> 00:15:37.602 soon as you're checking notes. The branch you'll have access to
00:15:37.602 --> 00:15:40.406 those app settings, which will be pretty awesome.
00:15:42.996 --> 00:15:45.792 Tristan, I'll. I'll jump into the other pieces, but Tristan,
00:15:45.792 --> 00:15:48.496 did you have something on that piece or or something else?
00:15:48.096 --> 00:15:51.133 Uh, yeah, yeah. I was just gonna expand on that a little bit.
00:15:50.936 --> 00:15:51.456 Yeah.
00:15:51.133 --> 00:15:52.946 Just as a reminder, slash refresher.
00:15:53.766 --> 00:15:57.374 Umm, basically and this is what we observed when we copy stuff
00:15:57.374 --> 00:16:00.696 and this is what I've been observing recently in terms of
00:16:00.696 --> 00:16:04.361 how the app settings are set up. Technically you can put any of
00:16:04.361 --> 00:16:07.912 the settings and either file right, but luckily we've kind of
00:16:07.912 --> 00:16:11.348 built a pattern. You can copy the environment one, but like
00:16:11.348 --> 00:16:13.696 just there's two things to look out for.
00:16:14.526 --> 00:16:16.997 First thing is the URLs right? Because you're have a bunch of
00:16:16.596 --> 00:16:16.926 Umm.
00:16:16.997 --> 00:16:17.196 like.
00:16:18.416 --> 00:16:22.972 Whatever-stage-qa.clarityclientordemos.com so you need to pay attention to
00:16:22.972 --> 00:16:23.276 that.
00:16:25.496 --> 00:16:29.707 The other thing is obviously, if there's gonna last extra shirts,
00:16:29.707 --> 00:16:33.089 elastic search or like some other kind of Uri for an
00:16:33.089 --> 00:16:37.045 external service. You're gonna wanna, like, eat those and use
00:16:37.045 --> 00:16:40.873 whatever's on your local host. But even with the client app
00:16:40.873 --> 00:16:44.510 settings, Jason, you can't always just copy and paste it
00:16:44.510 --> 00:16:48.084 blindly, as we had seen together, because sometimes the
00:16:48.084 --> 00:16:52.295 path can be different, right? So I know when, especially when new
00:16:52.076 --> 00:16:52.476 OK.
00:16:52.295 --> 00:16:55.166 people are starting, sometimes they have to.
00:16:55.506 --> 00:16:59.755 Do a regen too or or whatever too, or or maybe they just name
00:16:59.755 --> 00:17:04.210 the folder slightly differently, that's gonna affect some things
00:17:04.210 --> 00:17:08.185 sometimes. So basically the things you're looking out for
00:17:05.736 --> 00:17:06.166 OK.
00:17:08.185 --> 00:17:09.076 are you URLs.
00:17:10.496 --> 00:17:13.840 Any kind of like direct reference to like an IP or some
00:17:13.840 --> 00:17:14.616 kind of host.
00:17:15.736 --> 00:17:19.229 And then any kind of folder paths, those are usually the
00:17:19.229 --> 00:17:23.151 things you have to update when you're copying settings off of a
00:17:23.151 --> 00:17:23.886 QA instance.
00:17:24.616 --> 00:17:25.526 OK. Yeah.
00:17:24.896 --> 00:17:28.439 So those are the big three things. And then other than that
00:17:28.439 --> 00:17:30.506 usually just works, which is nice.
00:17:29.706 --> 00:17:34.004 The I the IP's I can recall a specific example that we've
00:17:29.896 --> 00:17:30.166 Yeah.
00:17:34.004 --> 00:17:38.376 looked at, so usually safe to just rip those out of there.
00:17:38.856 --> 00:17:42.929 Yeah. Yeah, cause usually those will be referencing something
00:17:39.796 --> 00:17:40.116 OK.
00:17:42.929 --> 00:17:45.886 like Elasticsearch or Redis or whatever and.
00:17:46.666 --> 00:17:50.731 Generally speaking, if they're not set, which by default they
00:17:50.731 --> 00:17:54.796 aren't, it'll default to local host, which is usually correct
00:17:52.416 --> 00:17:53.146 OK, cool.
00:17:54.796 --> 00:17:57.746 for almost everyone. For our local say yeah.
00:18:00.246 --> 00:18:03.855 I guess just that's a good point. In theory you should just
00:18:03.855 --> 00:18:07.463 be able to copy them, but yeah, there is. It's always worth
00:18:07.463 --> 00:18:11.313 double checking the stuff just to to be sure, because there are
00:18:11.313 --> 00:18:12.636 things that change so.
00:18:14.506 --> 00:18:15.056 Ohh.
00:18:16.836 --> 00:18:20.667 The other things I was gonna say is, I mean, most of the time it
00:18:20.667 --> 00:18:22.966 depends at what stage the projects in.
00:18:24.106 --> 00:18:27.684 It's usually a good idea to just kind of grab a copy of the QA
00:18:27.684 --> 00:18:31.149 database and restore that to your local, but if it's a brand
00:18:31.149 --> 00:18:34.841 new project, sometimes you just you know you'll just use the one
00:18:34.841 --> 00:18:38.590 that you installed it gives you. If that is the case, there could
00:18:38.590 --> 00:18:41.828 be translations that are different, so I'm sure you guys
00:18:41.828 --> 00:18:44.952 have kind of ran into the translation strings that are
00:18:44.952 --> 00:18:45.236 here.
00:18:46.846 --> 00:18:51.459 Those can be updated in a couple different ways. I'm a big fan of
00:18:51.459 --> 00:18:55.793 just always kind of opting for the QA database and using, you
00:18:55.793 --> 00:19:00.127 know, back in that up and then restoring one of the local you
00:19:00.127 --> 00:19:04.111 can go into the database itself and actually look at the
00:19:04.111 --> 00:19:08.445 translation tables, but that's pretty tedious. Or you can use
00:19:08.445 --> 00:19:12.848 these translations spreadsheets. I don't know if does everyone
00:19:12.848 --> 00:19:14.316 have access to these?
00:19:19.566 --> 00:19:20.726 Uh, yeah.
00:19:22.426 --> 00:19:24.296 I do not think I've seen that before.
00:19:22.926 --> 00:19:23.346 Like this?
00:19:23.126 --> 00:19:23.766 This is a.
00:19:25.476 --> 00:19:25.836 No.
00:19:25.596 --> 00:19:27.906 OK. Yeah, let's copy that and chat then.
00:19:26.836 --> 00:19:27.126 OK.
00:19:28.426 --> 00:19:28.766 Yeah.
00:19:28.786 --> 00:19:29.206 Yeah.
00:19:29.536 --> 00:19:30.676 Good thing to know about.
00:19:31.146 --> 00:19:34.776 I've seen something like this before when I was setting up.
00:19:31.256 --> 00:19:31.706 Yeah.
00:19:31.896 --> 00:19:33.096 Yeah, you definitely need that.
00:19:36.356 --> 00:19:38.495 Are there more? Is there more than one of these? I think
00:19:38.495 --> 00:19:40.898 that's my question because I've seen something like this when I
00:19:40.898 --> 00:19:41.836 was doing a manual setup.
00:19:42.386 --> 00:19:45.870 There is an older one, but generally speaking for any new
00:19:42.506 --> 00:19:44.136 And I was like brand brand new.
00:19:44.816 --> 00:19:45.006 Yeah.
00:19:45.870 --> 00:19:49.355 client work, you're usually only have to worry about this
00:19:49.355 --> 00:19:50.256 specific sheet.
00:19:50.776 --> 00:19:51.066 OK.
00:19:51.166 --> 00:19:51.376 Yeah.
00:19:52.996 --> 00:19:53.546 So.
00:19:55.126 --> 00:19:59.672 This has all the translations on here and you can kind of go
00:19:59.672 --> 00:20:02.056 through. I think it's in visits.
00:20:09.266 --> 00:20:09.676 Yeah.
00:20:13.076 --> 00:20:13.476 Right.
00:20:13.546 --> 00:20:17.049 You're adding something that is a translation that goes into
00:20:17.049 --> 00:20:20.207 core. We will add the translation to this file if not.
00:20:20.207 --> 00:20:23.480 If it's a project specific one, you put that translation
00:20:23.480 --> 00:20:26.523 straight into that project database, like whether or
00:20:26.523 --> 00:20:29.451 database or on QA stage, whatever that is. They go
00:20:29.451 --> 00:20:32.782 straight into the project specific database. Sorry I made
00:20:30.616 --> 00:20:30.926 Yeah.
00:20:32.782 --> 00:20:36.342 that mistake, so I just wanted to call that out to you. I put
00:20:36.342 --> 00:20:39.787 several clients, specific ones following another developers
00:20:39.787 --> 00:20:43.289 advice who didn't know what he was talking about. This is no
00:20:43.206 --> 00:20:43.526 Yeah.
00:20:43.289 --> 00:20:45.586 longer with us. Yeah, so don't do that.
00:20:46.356 --> 00:20:49.840 It's it's definitely happened. But yeah, what? What we're
00:20:49.840 --> 00:20:53.143 shooting for is these ones should be just for core. So
00:20:53.143 --> 00:20:55.546 like, if you're building out, you know.
00:20:56.596 --> 00:21:00.572 Bidding functionality for a core staff and like you, need some
00:21:00.572 --> 00:21:04.421 translations. Go ahead and add them here, but like if you're
00:21:04.421 --> 00:21:07.829 working on REGEN and you're doing what was it I I see
00:21:07.829 --> 00:21:11.741 approved status, I'm probably butchering that. Generally like
00:21:11.741 --> 00:21:13.256 that is just for region.
00:21:11.786 --> 00:21:12.546 Yeah, yeah.
00:21:14.166 --> 00:21:18.869 Don't put those translations in this sheet, but what that what
00:21:18.616 --> 00:21:18.926 OK.
00:21:18.869 --> 00:21:23.273 that then poses is the only way to get that translation is
00:21:23.273 --> 00:21:23.796 either.
00:21:25.586 --> 00:21:28.909 You need to back up the QA database and restore it on your
00:21:28.909 --> 00:21:32.006 local or you need to go into the QA database manually.
00:21:34.626 --> 00:21:37.866 And so a common occurrence is say, you've been working on a
00:21:37.866 --> 00:21:41.429 project for a while, you're four months in and Alex just did some
00:21:41.429 --> 00:21:44.777 work on REGEN and he added all these translations, right? And
00:21:44.777 --> 00:21:47.854 now you're looking at your front end. You don't have the
00:21:47.854 --> 00:21:48.556 translations.
00:21:49.166 --> 00:21:51.920 But you've been working on the same database for four months
00:21:51.920 --> 00:21:54.584 for you to go and copy the QA database and overwrite yours
00:21:54.584 --> 00:21:56.706 just for the translations is kind of overkill.
00:21:57.466 --> 00:21:57.956 Uh.
00:21:59.266 --> 00:22:03.349 So you can go into the tables themselves, which I'll I'll just
00:22:03.349 --> 00:22:07.366 show you the two tables real quick. But what we're working on
00:22:07.366 --> 00:22:11.578 and Tristan or Tim or anyone in here is speaking with Eric about
00:22:11.578 --> 00:22:15.402 this actually this morning is we're trying to get a script
00:22:15.402 --> 00:22:18.836 that will essentially just grab out the translation.
00:22:21.466 --> 00:22:24.980 The two globalization tables and that way we can just call it
00:22:24.980 --> 00:22:28.324 from one database and just insert it into another for like
00:22:28.324 --> 00:22:31.839 when we're updating staging or this scenario that I'm talking
00:22:31.839 --> 00:22:34.106 about updating, QA, whatever it may be.
00:22:34.846 --> 00:22:36.016 Yeah, I'm gonna for you.
00:22:35.036 --> 00:22:35.506 Uh.
00:22:37.246 --> 00:22:38.316 It's like I put it in the chat.
00:22:39.316 --> 00:22:39.606 Yeah.
00:22:42.156 --> 00:22:43.166 So.
00:22:44.306 --> 00:22:45.826 Like if we go to.
00:22:46.816 --> 00:22:49.816 GFS set QA.
00:22:55.236 --> 00:22:56.876 Right, there's two.
00:22:58.016 --> 00:23:01.420 But I guess that, yeah, there's the languages, but it's really
00:23:01.420 --> 00:23:04.877 UI key UI translation. So if you look at these, these will give
00:23:04.877 --> 00:23:08.281 you all the translations that are inside the database. So like
00:23:08.281 --> 00:23:11.306 if you need one that Alex created, he put it on QA, you
00:23:11.306 --> 00:23:14.278 can go to the QA database, search for that translation
00:23:14.278 --> 00:23:14.656 string.
00:23:15.576 --> 00:23:18.820 Uh, or search for the key and then you can get the associated
00:23:18.820 --> 00:23:19.186 string.
00:23:20.496 --> 00:23:23.526 OK, so this project just doesn't have translations.
00:23:25.346 --> 00:23:26.056 Looks like.
00:23:28.876 --> 00:23:29.636 Bid.
00:23:33.596 --> 00:23:36.206 I mean, the translations are more just for.
00:23:38.966 --> 00:23:41.901 Visual I mean, they're not going to actually break the site, but
00:23:41.901 --> 00:23:44.701 sometimes you just kind of get frustrated enough and say, OK,
00:23:44.701 --> 00:23:46.056 let me get everything updated.
00:23:46.486 --> 00:23:50.906 Sometimes they break the admin, some pains and stuff won't show.
00:23:48.956 --> 00:23:49.506 Yeah.
00:23:50.276 --> 00:23:50.566 Hmm.
00:23:50.346 --> 00:23:50.936 Do that.
00:23:51.606 --> 00:23:52.076 Yeah.
00:23:51.746 --> 00:23:54.116 Ohh yeah, angular break stuff so.
00:23:54.626 --> 00:23:55.806 OK, that is good.
00:23:55.166 --> 00:23:59.010 I will say as much as you guys might think, like ohh F
00:23:59.010 --> 00:24:01.876 translations, I'm a backhander whatever.
00:24:02.526 --> 00:24:06.199 Just do it because trust me, at least an angular in a couple
00:24:06.199 --> 00:24:09.872 places. There's a basically a helper function as a part of a
00:24:09.872 --> 00:24:13.424 service that's used that just freaks out if you don't have
00:24:13.424 --> 00:24:16.856 like a try catch around it, which isn't something that's
00:24:16.856 --> 00:24:20.770 commonly done on the front end, there's not a lot of try catches
00:24:20.770 --> 00:24:24.202 for error handling for that method, and if you pass in a
00:24:21.236 --> 00:24:21.566 Mm-hmm.
00:24:24.202 --> 00:24:27.875 translation that doesn't exist in the database, it will just
00:24:27.875 --> 00:24:31.729 the component will just. I don't know if it throws a console or
00:24:31.729 --> 00:24:33.836 just breaks, it just doesn't work.
00:24:34.566 --> 00:24:35.016 Yeah.
00:24:34.766 --> 00:24:37.787 And it's not obvious why. It's not like hario translations
00:24:35.666 --> 00:24:36.146 Christian.
00:24:37.787 --> 00:24:41.013 missing in your console. It just like it will quite literally,
00:24:41.013 --> 00:24:44.136 like you'll click on something and a model should pop up and
00:24:44.066 --> 00:24:44.346 Hmm.
00:24:44.136 --> 00:24:47.362 nothing happens. So just yeah, do the translations. It's worth
00:24:47.362 --> 00:24:47.516 it.
00:24:48.696 --> 00:24:49.746 I'll split that way.
00:24:49.066 --> 00:24:53.083 So that that leads to interesting question for me. So
00:24:49.106 --> 00:24:49.546 Yeah.
00:24:50.486 --> 00:24:50.736 Is it?
00:24:53.083 --> 00:24:57.621 you'll see a button and it'll it'll have something like that
00:24:57.621 --> 00:25:02.456 that you're looking at that says UI dot storefront dot whatever.
00:25:03.156 --> 00:25:03.646 Umm.
00:25:05.396 --> 00:25:09.180 So I gather that that when translations have been run, it
00:25:09.180 --> 00:25:13.289 would convert to. You may not receive an order notification et
00:25:13.289 --> 00:25:17.203 cetera, but is that how the code is written is to read that
00:25:17.203 --> 00:25:21.248 custom key and so if there's no value, nothing in the literal
00:25:21.248 --> 00:25:22.096 value column?
00:25:23.186 --> 00:25:23.466 It.
00:25:25.246 --> 00:25:28.084 I'm trying to do the math on how this how the translations are
00:25:27.356 --> 00:25:27.606 Yeah.
00:25:28.084 --> 00:25:29.886 actually used in the front end I guess.
00:25:30.496 --> 00:25:31.786 Yeah. Yeah. We can take a look.
00:25:32.576 --> 00:25:33.066 Uh.
00:25:32.786 --> 00:25:33.086 Yeah.
00:25:34.016 --> 00:25:38.187 There's perfect examples of them. You wrap it in a tea. All
00:25:34.416 --> 00:25:34.866 I think it's.
00:25:38.187 --> 00:25:39.856 right, I think it's tea.
00:25:40.946 --> 00:25:43.556 Yeah. So it would look just like this.
00:25:43.516 --> 00:25:44.036 Yeah.
00:25:43.836 --> 00:25:44.356 Yeah. OK.
00:25:45.436 --> 00:25:51.293 In this tea function is imported from I18N, which I've actually
00:25:51.293 --> 00:25:56.967 seen that on non CEF products. So I guess it's a pretty large
00:25:52.046 --> 00:25:53.076 Ohh that's a.
00:25:55.896 --> 00:25:56.376 Yeah.
00:25:56.967 --> 00:25:59.346 yeah language translation.
00:25:57.466 --> 00:26:01.290 OK. That's like a international. Yeah, I recognize that. I don't
00:26:00.986 --> 00:26:01.326 Yeah.
00:26:01.290 --> 00:26:04.762 know a lot about it, I just it vaguely heard of it. That's
00:26:04.626 --> 00:26:04.926 Yep.
00:26:04.762 --> 00:26:05.056 cool.
00:26:06.116 --> 00:26:10.622 So, but yeah, if there's nothing there, it will literally just
00:26:07.126 --> 00:26:07.446 Laura.
00:26:10.086 --> 00:26:11.146 It's just, yeah.
00:26:10.622 --> 00:26:14.126 render out this string in a span. Yeah, so. Ohh.
00:26:12.136 --> 00:26:12.426 OK.
00:26:13.456 --> 00:26:13.776 Cool.
00:26:14.616 --> 00:26:18.452 So Justin, I just noticed that I actually have one of the changes
00:26:18.452 --> 00:26:22.171 that I was doing for Tom's kind of wrapped in that tea with the
00:26:22.171 --> 00:26:25.891 open close parentheses and then just a regular string inside of
00:26:25.891 --> 00:26:29.261 there, and I'm assuming I'm gonna have to go back and fix
00:26:29.261 --> 00:26:32.225 that because that is specifically for translations
00:26:32.225 --> 00:26:32.516 then.
00:26:33.206 --> 00:26:36.928 Correct. Yes, I think it'll still render right on the front
00:26:34.576 --> 00:26:35.016 OK.
00:26:36.928 --> 00:26:40.712 end. But the idea, yeah, the idea behind is and usually that
00:26:38.166 --> 00:26:39.226 It does, yeah.
00:26:40.712 --> 00:26:44.682 would get picked up in a PR and then people are human and if it
00:26:44.682 --> 00:26:48.466 the PR did go through, it might have went over just you know
00:26:48.466 --> 00:26:52.436 someone overlooked it. But the idea is some sites have language
00:26:52.436 --> 00:26:56.096 switches. So when we do, we're pretty consistent. We never
00:26:56.096 --> 00:26:59.446 really hard code strings. So everything's pretty much
00:26:59.446 --> 00:27:03.044 translations and that way you can switch between English,
00:27:03.044 --> 00:27:04.036 Spanish, French.
00:27:04.136 --> 00:27:05.176 Mandarin, etcetera.
00:27:08.966 --> 00:27:12.803 Umm, I would say one other point that kind of Tristan was hitting
00:27:12.803 --> 00:27:15.942 on was like if you guys are setting up your locals, I
00:27:15.942 --> 00:27:19.198 understand it's like a, you know, you're gonna be doing
00:27:19.198 --> 00:27:22.860 primary back end work. So you're like, I don't really need the
00:27:22.860 --> 00:27:24.546 front end to to be up to par.
00:27:25.376 --> 00:27:29.672 My advice is if you get a you know a local stand up ticket,
00:27:29.672 --> 00:27:34.183 take the time then and there to get your site like as close to
00:27:34.183 --> 00:27:38.336 QA as possible. Like maybe you don't need product images.
00:27:39.066 --> 00:27:42.441 Or or or things like that, but I would argue like that's the time
00:27:42.441 --> 00:27:45.356 that they're giving you to get your project to match QA.
00:27:46.826 --> 00:27:49.688 Both front end and back end, because what's gonna happen is
00:27:49.688 --> 00:27:52.454 you're gonna probably get at work in front ends, a little
00:27:52.454 --> 00:27:55.459 busted. You're like, OK, I can do my work on the back end, but
00:27:55.459 --> 00:27:58.035 a month or two later, you're gonna get something that
00:27:58.035 --> 00:28:01.087 requires you to go to the front end and you're not gonna have a
00:28:01.087 --> 00:28:01.946 working front end.
00:28:03.286 --> 00:28:06.480 Hey, there may have already happened to you guys and and let
00:28:05.526 --> 00:28:11.456 Yes, it has. Yeah, I was working on a feature for PCs and.
00:28:06.480 --> 00:28:07.736 me know if it has. Yeah.
00:28:09.136 --> 00:28:09.326 Yeah.
00:28:12.116 --> 00:28:15.308 Uh, there's a signal arm piece, and there's some other stuff
00:28:14.436 --> 00:28:14.766 Yeah.
00:28:15.308 --> 00:28:18.553 that David Frederick helped me with to actually, you know, it
00:28:16.556 --> 00:28:16.996 Yes.
00:28:18.553 --> 00:28:21.484 wasn't required for what I needed to test, but it would
00:28:21.484 --> 00:28:24.676 have made it much easier had that been working. Is the short
00:28:24.206 --> 00:28:24.496 Yeah.
00:28:24.676 --> 00:28:27.136 version of the story. So yeah, that's similar.
00:28:27.956 --> 00:28:31.247 Yeah, it it's worth putting in that time, because then you're
00:28:28.466 --> 00:28:29.036 Twice now.
00:28:31.247 --> 00:28:34.432 gonna be working on a feature ticket, and you're gonna be 3
00:28:34.432 --> 00:28:37.670 hours over. And you know, if it ever gets asked, like, well,
00:28:37.670 --> 00:28:41.120 what took so long? I never had a working front end. Like, that's
00:28:41.120 --> 00:28:44.517 not the response you wanna give for that. You know what I mean?
00:28:44.346 --> 00:28:45.476 No. Yeah.
00:28:44.517 --> 00:28:44.676 So.
00:28:45.076 --> 00:28:45.386 Right.
00:28:46.926 --> 00:28:49.966 Take the time up front to get it to match as closely as possible,
00:28:49.966 --> 00:28:52.684 and I'll jump into product images in a second, but did you
00:28:52.684 --> 00:28:53.836 have something else, Tim?
00:28:56.246 --> 00:28:59.430 No, I was just agreeing with because I haven't set up the. I
00:28:59.430 --> 00:29:02.771 haven't set up the signal RI was talking. I actually sent you a
00:29:02.771 --> 00:29:05.902 message about it today. I didn't set up the signalr for PCs
00:29:05.902 --> 00:29:09.295 either, and I had tried the bid through the front and I was just
00:29:06.876 --> 00:29:07.246 Umm.
00:29:09.295 --> 00:29:11.696 testing everything in postman and eventually.
00:29:12.396 --> 00:29:15.796 That does get time consuming because you have to hand you
00:29:15.796 --> 00:29:19.255 know, insert all of that data into the database instead of
00:29:18.956 --> 00:29:19.346 Right.
00:29:19.255 --> 00:29:22.889 being able to just go and click a bid button on a lot. Right?
00:29:22.176 --> 00:29:22.396 Yep.
00:29:22.889 --> 00:29:26.700 And so I had just wrote up some quick SQL scripts to insert that
00:29:23.716 --> 00:29:23.966 Yep.
00:29:26.700 --> 00:29:30.276 data for me, but I need to go ahead and set up the front end
00:29:30.276 --> 00:29:33.910 too so that I can, you know, just use the front end. I have a
00:29:33.910 --> 00:29:37.486 matching front end, right? So yeah, that's next point. I was
00:29:37.486 --> 00:29:38.776 just agreeing with it.
00:29:39.516 --> 00:29:42.527 Go. Yeah, I did get that message. And maybe we can spend
00:29:42.527 --> 00:29:46.014 a few minutes towards the end of this if we run out of topics, we
00:29:46.014 --> 00:29:47.916 can switch over to looking at that.
00:29:50.906 --> 00:29:54.861 Cool. The last thing I'd say, I mean this probably more and I'm
00:29:54.861 --> 00:29:57.456 probably forgetting anything, if anybody.
00:29:58.146 --> 00:30:00.866 Things I am jump in, but I would say it's just product images.
00:30:01.816 --> 00:30:05.806 Definitely not needed, but I'll just kind of go through a.
00:30:06.946 --> 00:30:08.876 How the images get linked?
00:30:11.886 --> 00:30:15.197 Just so everyone can at least kind of see it once, because
00:30:15.197 --> 00:30:17.666 when I first started here it was pretty uh.
00:30:19.506 --> 00:30:22.126 I was confused because there's there's two different image
00:30:22.126 --> 00:30:24.924 folders if people aren't aware of that, so it can be confusing
00:30:24.924 --> 00:30:27.366 and I'm just gonna kind of go through that real quick.
00:30:28.716 --> 00:30:29.186 Uh.
00:30:30.746 --> 00:30:32.216 I ain't gonna look at.
00:30:31.156 --> 00:30:31.416 OK.
00:30:33.176 --> 00:30:33.656 What was that?
00:30:35.266 --> 00:30:37.242 I was just saying, OK. Yeah, this is something I'd I'd like
00:30:37.242 --> 00:30:37.506 to know.
00:30:40.806 --> 00:30:43.526 So let's take a look at PCs.
00:30:49.406 --> 00:30:53.814 So I mean, as you know images you know typically are gonna be
00:30:53.814 --> 00:30:58.364 based off the root URL in root URLs. Looking at the site in IIS
00:30:58.364 --> 00:30:59.146 so there's.
00:31:00.036 --> 00:31:00.906 2.
00:31:08.446 --> 00:31:09.766 Why is that not happening?
00:31:11.076 --> 00:31:13.006 Images OK yeah.
00:31:15.966 --> 00:31:16.496 Yeah.
00:31:17.466 --> 00:31:18.636 So I'll look at Gmail.
00:31:20.786 --> 00:31:25.087 When you go to your site sites root folder, there's it, it it.
00:31:25.087 --> 00:31:29.524 I don't think it'll install with the installer but you I believe
00:31:29.524 --> 00:31:33.824 you'll need to add it there. But this image is folder which is
00:31:33.824 --> 00:31:37.988 the third one kind of in your booty at your set and DNN this
00:31:37.988 --> 00:31:40.036 one is where like CEF related.
00:31:41.116 --> 00:31:44.666 Media, including product images should be stored.
00:31:45.446 --> 00:31:49.270 Umm so when you click into here as you can see I have account
00:31:49.270 --> 00:31:52.908 which relates to accounts, categories, products and users.
00:31:52.908 --> 00:31:56.485 And the reason I have all of these is because these these
00:31:56.485 --> 00:32:00.309 objects in Seth can have stored files. So like if you want to
00:32:00.309 --> 00:32:04.255 upload these are just tests but say an account has a tax exempt
00:32:04.255 --> 00:32:08.017 document you can enable the account stored files app setting
00:32:08.017 --> 00:32:11.718 go to the admin and look at the users account and there's a
00:32:11.718 --> 00:32:14.616 stored files tab and you can upload documents.
00:32:15.326 --> 00:32:16.296 And they'll go here.
00:32:16.986 --> 00:32:17.476 Uh.
00:32:18.626 --> 00:32:22.156 Same with categories like categories have can have images.
00:32:22.816 --> 00:32:27.510 UM users, products, stores a lot of different, you know, objects
00:32:27.510 --> 00:32:31.626 inside Seth can have files associated with them. The one
00:32:31.626 --> 00:32:36.392 particular is gonna be products. So then it's images. And this is
00:32:36.392 --> 00:32:40.941 where the product images live that you should see on the front
00:32:40.941 --> 00:32:45.418 end and in the catalog. And it's a bit confusing because it's
00:32:45.418 --> 00:32:46.646 literally images.
00:32:47.306 --> 00:32:50.726 And this isn't just images, this is stored files.
00:32:51.406 --> 00:32:55.164 Uh images. It could be excel sheets. It's pretty much any
00:32:55.164 --> 00:32:59.116 Seth object related media. Then you would go to products and
00:32:59.116 --> 00:33:03.198 then images again. So this name can be a little bit confusing.
00:33:03.198 --> 00:33:07.086 This should probably be like media product images, but this
00:33:07.086 --> 00:33:10.779 is just kind of the naming convention. But this is where
00:33:10.779 --> 00:33:13.176 the actual product images will live.
00:33:14.826 --> 00:33:18.584 Incept should pick these up automatically because it uses a
00:33:18.584 --> 00:33:22.404 cores link that's built into the front end code to look into
00:33:22.404 --> 00:33:24.846 these folders to find these files. So.
00:33:25.666 --> 00:33:29.004 If you're like, hey, I wanna get product images on my site. All
00:33:29.004 --> 00:33:31.976 you should really need to do is come here. Go to images.
00:33:32.796 --> 00:33:36.331 Create a products folder, create another images folder and then
00:33:36.331 --> 00:33:39.810 copy the images from the QA site onto your local and that will
00:33:39.810 --> 00:33:41.136 give you product images.
00:33:44.406 --> 00:33:44.926 Ohh.
00:33:46.016 --> 00:33:46.556 Interesting.
00:33:46.446 --> 00:33:50.318 It it in theory, should just be as simple as that, because like
00:33:50.296 --> 00:33:50.646 OK.
00:33:50.318 --> 00:33:54.251 I said, the linking to these is all done in the database because
00:33:54.251 --> 00:33:58.124 each product has an associated image URL that like you're gonna
00:33:58.124 --> 00:34:01.815 copy down from QA in the cores image link is looking in this
00:34:01.815 --> 00:34:03.146 folder for the images.
00:34:03.966 --> 00:34:09.847 OK, so it's so it's got a in the database is a, is the what the
00:34:09.847 --> 00:34:12.236 relative path from images.
00:34:12.746 --> 00:34:13.146 Right.
00:34:13.116 --> 00:34:17.106 To the to the actual image or video or or whatever it is.
00:34:17.996 --> 00:34:21.424 Yeah. And see, I don't think it's actually stored on the
00:34:21.424 --> 00:34:25.274 product. I believe it's stored in a a relationship products dot
00:34:25.274 --> 00:34:26.116 product image.
00:34:26.906 --> 00:34:31.348 In this would link to the file path which is in media dot
00:34:31.348 --> 00:34:35.636 stored file and then to products dot product I believe.
00:34:37.666 --> 00:34:40.796 It could be OK now, I'm sorry it does have.
00:34:39.656 --> 00:34:40.586 No, you're correct.
00:34:43.216 --> 00:34:43.866 It has.
00:34:43.266 --> 00:34:46.372 Yes. So the different types of stored files, because you'll
00:34:44.786 --> 00:34:45.256 Then.
00:34:46.372 --> 00:34:49.633 notice there's like an enum. If you're looking in the back end
00:34:49.633 --> 00:34:52.376 as to like what kind of store file it is, blah blah.
00:34:50.126 --> 00:34:50.436 Umm.
00:34:53.036 --> 00:34:53.766 Yeah.
00:34:53.696 --> 00:34:56.741 Essentially, the the type itself determines what the path will
00:34:56.741 --> 00:34:56.886 be.
00:34:58.016 --> 00:34:58.786 Hmm, OK.
00:34:58.826 --> 00:35:02.633 So like for example when I was doing JBM registration and they
00:34:59.946 --> 00:35:00.416 Right.
00:35:02.633 --> 00:35:06.501 wanted all this stuff converted to a PDF and they want it saved
00:35:06.501 --> 00:35:10.248 in there. I I saved it as an account stored file and I didn't
00:35:10.248 --> 00:35:13.994 have to specify that it was in slash account slash this slash
00:35:13.994 --> 00:35:15.626 that it just kind of knows.
00:35:16.216 --> 00:35:16.636 Yeah.
00:35:17.406 --> 00:35:17.816 Yeah.
00:35:20.506 --> 00:35:22.556 Yep, that is correct.
00:35:20.786 --> 00:35:21.206 OK.
00:35:25.776 --> 00:35:31.018 Umm. And then the other thing that gets confusing is when you
00:35:31.018 --> 00:35:36.429 go to your root folder you have this images folder and I always
00:35:36.429 --> 00:35:42.009 tell the difference because this one's lower case images and then
00:35:42.009 --> 00:35:46.406 the other ones uppercased images. This is for like.
00:35:48.426 --> 00:35:53.538 Webb 9 files, so this is for DNN images and the reason that this
00:35:53.538 --> 00:35:58.649 gets confusing is because these images are really easy to access
00:35:58.649 --> 00:36:01.716 just based off the sites root URL. So.
00:36:02.786 --> 00:36:06.126 In theory, I think if we go to like branding.
00:36:07.576 --> 00:36:08.626 And then.
00:36:11.386 --> 00:36:16.636 We'll see just slash images Slash brand name I believe.
00:36:26.716 --> 00:36:27.906 It'll give us that load.
00:36:28.666 --> 00:36:32.802 So whenever someone's like I wanna add an image to the front
00:36:32.802 --> 00:36:37.073 end. Typically they end up here because it's so easy. You just
00:36:37.073 --> 00:36:41.344 go slash images Slash branding, logo and whatever it is and so
00:36:38.966 --> 00:36:39.286 Yeah.
00:36:41.344 --> 00:36:45.412 they're putting like product images in this folder which is
00:36:45.412 --> 00:36:46.226 not correct.
00:36:46.886 --> 00:36:47.316 Umm.
00:36:47.106 --> 00:36:47.546 Uh.
00:36:48.566 --> 00:36:53.255 This is typically used for like a I would say like marketing
00:36:53.255 --> 00:36:55.946 content like these these patterns.
00:36:57.676 --> 00:37:00.596 There should be an image here like the logo up here.
00:37:01.526 --> 00:37:05.724 All of that stuff would go into this images folder and as you
00:37:05.496 --> 00:37:10.086 Into the DNN 9 Arabs. Excuse me, DNN images OK.
00:37:05.724 --> 00:37:06.266 can see.
00:37:07.896 --> 00:37:08.426 Right.
00:37:10.686 --> 00:37:13.845 Yeah, like these are just like little, you know, sprites and
00:37:13.845 --> 00:37:15.036 favicons and stuff, so.
00:37:16.986 --> 00:37:20.763 That's kind of what this is used for, and that's that's really
00:37:20.763 --> 00:37:24.720 the difference of the two. So if you're doing marketing and stuff
00:37:24.720 --> 00:37:28.377 in that nature in here product images and Seth would go into
00:37:28.377 --> 00:37:29.396 that root folder.
00:37:30.526 --> 00:37:30.806 OK.
00:37:37.876 --> 00:37:41.917 Yeah, I guess that makes sense because as far as the front end,
00:37:41.917 --> 00:37:43.496 that's really DNN, right?
00:37:44.286 --> 00:37:46.036 Uh, per am, I thinking about that wrong.
00:37:48.476 --> 00:37:50.316 Yeah. Yep. The front end is all DNN.
00:37:51.526 --> 00:37:51.916 OK.
00:37:52.386 --> 00:37:56.034 Yeah. Yeah, because like, if you're going in and I don't know
00:37:56.034 --> 00:37:59.506 if anybody knows, like you can log into DNN, just go into.
00:38:00.296 --> 00:38:01.156 Straight blogging.
00:38:03.496 --> 00:38:03.996 Uh.
00:38:10.286 --> 00:38:10.646 Type.
00:38:21.666 --> 00:38:24.036 Have you played around in here at all, Jeremy?
00:38:26.546 --> 00:38:28.136 No, I really haven't, to be honest.
00:38:28.916 --> 00:38:29.786 Ohh OK.
00:38:30.436 --> 00:38:34.176 Umm I can give kind of a a quick walk through here.
00:38:34.896 --> 00:38:35.636 Yeah, that would be cool.
00:38:36.286 --> 00:38:36.596 OK.
00:38:38.026 --> 00:38:41.622 So yeah, DNN's, I don't know if they call it a content
00:38:41.622 --> 00:38:43.126 management system, but.
00:38:44.296 --> 00:38:48.001 I mean, it doesn't like hold any products, but it does hold pages
00:38:48.001 --> 00:38:48.506 and such.
00:38:49.296 --> 00:38:49.636 Umm.
00:38:50.766 --> 00:38:51.396 So.
00:38:52.416 --> 00:38:55.511 Most of the time, you're going to be working in this this pages
00:38:55.511 --> 00:38:56.236 tab right here.
00:38:57.646 --> 00:39:01.012 And as you can see, we're on the home page, we've got the
00:39:01.012 --> 00:39:01.476 catalog.
00:39:02.246 --> 00:39:06.592 Product details page my orders which is in the dashboard. You
00:39:06.592 --> 00:39:10.096 know your cart, checkout quotes things like that.
00:39:12.866 --> 00:39:17.266 The way that this relates to the front end is.
00:39:18.086 --> 00:39:19.376 If we go here.
00:39:20.726 --> 00:39:25.164 Take a look. We'll go to skins bid. These are all the different
00:39:25.164 --> 00:39:29.325 skin files, right? And if we remember from the last time, I
00:39:29.325 --> 00:39:33.278 was kinda speaking on this and we're injecting the React
00:39:30.946 --> 00:39:31.256 Umm.
00:39:33.278 --> 00:39:35.636 components into these skin files.
00:39:36.926 --> 00:39:41.486 So Dashboard gets the React dashboard component through.
00:39:42.926 --> 00:39:48.222 You know the this line of HTML here. The way that we actually
00:39:48.222 --> 00:39:53.604 get this on to the front end is through this page's tab. So if
00:39:53.604 --> 00:39:58.046 we go to dashboard and we go to advanced or permit.
00:39:59.936 --> 00:40:03.876 Yeah, the balanced appearance we can see we're under JBM.
00:40:04.886 --> 00:40:06.896 And our skin is the dashed skin.
00:40:08.616 --> 00:40:12.802 So if I was to give the dashboard the home skin and then
00:40:12.802 --> 00:40:17.428 go to the dashboard, I should see the homepage and let's let's
00:40:17.428 --> 00:40:18.456 give it a try.
00:40:19.466 --> 00:40:22.916 So this is the home page right here. If I go to the dashboard.
00:40:24.796 --> 00:40:26.006 I'm going to see the home page.
00:40:28.176 --> 00:40:29.606 That kind of cool.
00:40:29.396 --> 00:40:29.646 Yeah.
00:40:30.406 --> 00:40:31.036 Umm.
00:40:34.836 --> 00:40:38.079 And yeah, I mean, you can pretty much create whatever page you
00:40:38.079 --> 00:40:38.336 want.
00:40:39.366 --> 00:40:44.431 Give it the URL for like the slug which is. I believe it's
00:40:44.431 --> 00:40:49.754 under SEO so you can actually choose the slug here, assign it
00:40:49.754 --> 00:40:51.986 the skin under appearance.
00:40:52.916 --> 00:40:57.754 Choose the component that you wanna map into that skin in here
00:40:57.754 --> 00:41:01.978 and that's how you render something from the front end
00:41:01.978 --> 00:41:02.746 onto Seth.
00:41:04.376 --> 00:41:08.477 So we could create a page and call it like you know test
00:41:08.477 --> 00:41:09.556 component page.
00:41:11.396 --> 00:41:12.476 Simply right here.
00:41:18.776 --> 00:41:21.250 Let's just go through this. I guess a good exercise. We got
00:41:21.250 --> 00:41:23.600 time. Unless anybody has anything that they want to jump
00:41:23.600 --> 00:41:23.806 into.
00:41:25.066 --> 00:41:28.977 Typically when when doing the OK, typically when doing these
00:41:25.636 --> 00:41:26.186 That's good.
00:41:25.666 --> 00:41:26.116 Nice.
00:41:28.977 --> 00:41:33.016 display and menu would put it in this top bar menu. So usually
00:41:33.016 --> 00:41:37.183 you're turning this off. You'll create a new page permissions if
00:41:37.183 --> 00:41:39.876 you don't set anything no one can see it.
00:41:40.556 --> 00:41:43.849 So we need to say view for registered users view for all
00:41:43.849 --> 00:41:47.315 users, because you want both logged in and logged out users
00:41:47.315 --> 00:41:50.723 to be able to see it. But we don't want them to be able to
00:41:50.723 --> 00:41:54.247 edit it so we can leave those off and then we will go to add
00:41:54.247 --> 00:41:54.536 page.
00:41:57.286 --> 00:42:01.229 And so now it'll take us to this page test component page. So now
00:42:01.229 --> 00:42:01.946 it's saying.
00:42:03.106 --> 00:42:07.872 Quiroz, default skin home clarity does not exist. OK,
00:42:07.872 --> 00:42:13.256 because it's looking in clarity. So now if we jump into JBM.
00:42:13.926 --> 00:42:14.976 Big go to.
00:42:17.396 --> 00:42:21.206 Skins. Let's create new page.
00:42:26.106 --> 00:42:27.016 Call.
00:43:11.996 --> 00:43:13.096 I don't know how else.
00:43:14.866 --> 00:43:15.926 Uh oh, shoot.
00:43:44.976 --> 00:43:47.426 So that will give us a.
00:43:49.616 --> 00:43:50.546 And the girl?
00:43:54.156 --> 00:43:57.286 I think that's.
00:43:59.526 --> 00:44:01.126 Did I create an alarm folder?
00:44:02.356 --> 00:44:03.406 Test component page.
00:44:05.346 --> 00:44:09.026 And then I choose like the login.
00:44:11.996 --> 00:44:13.536 Right. So if we save that.
00:44:14.746 --> 00:44:16.116 That a JVM.
00:44:43.666 --> 00:44:47.356 And So what this will do is this will give us access to this new
00:44:47.356 --> 00:44:50.762 test component page in that DNN a little editor and this is
00:44:49.486 --> 00:44:49.786 OK.
00:44:50.762 --> 00:44:54.225 angular. So it's a little bit different, but this is how you
00:44:54.225 --> 00:44:57.971 render the angular components in there instead of data react Seth
00:44:57.971 --> 00:45:00.696 login. It'll actually bring us to a login page.
00:45:04.326 --> 00:45:05.976 So now we can go to pages.
00:45:07.666 --> 00:45:11.196 Advanced appearance JBM.
00:45:14.646 --> 00:45:17.156 Test component page save.
00:45:14.806 --> 00:45:15.486 Let's confirm.
00:45:19.646 --> 00:45:20.936 And then refreshing air.
00:45:21.716 --> 00:45:24.426 And so the shipping is to like some type of registration page.
00:45:27.386 --> 00:45:27.886 Yeah, cool.
00:45:30.486 --> 00:45:34.247 Uh, yeah, I think it's gonna give us a 403 because I have a a
00:45:34.247 --> 00:45:37.826 redirect setup on the site for for branding purposes. But.
00:45:39.566 --> 00:45:43.657 That's kind of the the flow of how this would work. It's very
00:45:43.657 --> 00:45:46.626 common that if you're setting up a new site.
00:45:47.346 --> 00:45:51.043 And Tim, I think you ran into this, correct me if I'm wrong,
00:45:51.043 --> 00:45:54.861 the quote cart, if you need to run into quotes, the quote cart
00:45:54.861 --> 00:45:55.406 in quote.
00:45:56.336 --> 00:46:00.576 In submit quote CART page aren't in DNN out of box so anytime you
00:46:00.576 --> 00:46:04.622 stand up a new site and you're doing anything with quotes, you
00:46:04.622 --> 00:46:08.733 need to manually come in here, create the quote page and assign
00:46:08.733 --> 00:46:08.926 it.
00:46:10.366 --> 00:46:14.776 JBM and it would be the quote template, quote cart and I think
00:46:14.526 --> 00:46:15.166 OK.
00:46:14.776 --> 00:46:15.336 they're.
00:46:16.186 --> 00:46:17.816 One more submit quote so.
00:46:17.966 --> 00:46:18.886 Submit quote.
00:46:19.606 --> 00:46:19.796 Yeah.
00:46:22.076 --> 00:46:26.599 And just a regular shopping cart like the just kind of, you know,
00:46:26.599 --> 00:46:27.216 standard.
00:46:30.916 --> 00:46:32.076 Yeah, just the right.
00:46:31.046 --> 00:46:34.642 Uh, for lack of a better term, just the vanilla CEF is that
00:46:34.316 --> 00:46:34.536 Yep.
00:46:34.642 --> 00:46:38.179 feature have to be turned on manually or does it turned on
00:46:38.179 --> 00:46:40.576 manually from somewhere? Or is it just?
00:46:42.696 --> 00:46:44.546 Yep, this is already.
00:46:45.636 --> 00:46:47.176 Out of box so.
00:46:46.996 --> 00:46:50.725 OK, out of box. Gosh. Yeah. I'm struggling to remember simple
00:46:48.716 --> 00:46:49.026 Yep.
00:46:49.746 --> 00:46:50.516 What?
00:46:50.725 --> 00:46:51.086 terms.
00:46:52.466 --> 00:46:56.009 What we need is someone to go in, update the core database,
00:46:53.416 --> 00:46:53.726 Cool.
00:46:56.009 --> 00:46:59.493 the core DNN database that all of these projects are being
00:46:59.493 --> 00:47:03.154 built off. That's really it. Someone's gonna take the time to
00:47:03.154 --> 00:47:06.933 go and just add the quote cart and assign it to the quote skin.
00:47:06.933 --> 00:47:10.653 So anytime someone stands up a new project that's already done
00:47:10.653 --> 00:47:14.137 for you, it's been like that since I got here. And just no
00:47:14.137 --> 00:47:16.676 one's actually got around to doing it. So.
00:47:17.576 --> 00:47:17.896 OK.
00:47:18.506 --> 00:47:19.496 Do you ever do it? Let me know.
00:47:20.596 --> 00:47:21.056 But.
00:47:22.506 --> 00:47:23.756 Uh go?
00:47:24.966 --> 00:47:29.184 And yeah, so like when you're on these different pages, I'll just
00:47:29.184 --> 00:47:33.211 kind of briefly go through, I don't wanna spend too much time.
00:47:33.211 --> 00:47:37.173 So it's unlikely you guys will be doing much of this, but you
00:47:37.173 --> 00:47:41.072 can at drop different modules on here. It's a pretty archaic
00:47:41.072 --> 00:47:45.034 system. This then opens up the content editor which gives you
00:47:45.034 --> 00:47:48.805 like these different layout boxes in most time. What we're
00:47:45.776 --> 00:47:46.336 I don't care.
00:47:48.805 --> 00:47:52.768 doing is just dropping straight HTML modules on here and just
00:47:51.936 --> 00:47:52.176 Umm.
00:47:52.768 --> 00:47:55.516 hard coding code. So like you can come in.
00:47:55.876 --> 00:47:56.926 Edit content.
00:47:59.476 --> 00:48:02.981 This will open up one of the the worst source editors ever, and
00:48:02.981 --> 00:48:06.266 you can write all your HTML and like inline styles in here.
00:48:07.426 --> 00:48:10.730 And if, like you look at this one, it's pretty brutal and
00:48:10.730 --> 00:48:11.186 looking.
00:48:13.816 --> 00:48:14.106 Yeah.
00:48:14.536 --> 00:48:15.696 Like that's the code.
00:48:14.746 --> 00:48:19.026 Two minds me of like SharePoint or something. So this is kind of
00:48:17.486 --> 00:48:17.976 Right.
00:48:19.026 --> 00:48:22.977 a drag and drop wizzywig for building pages. Is that really
00:48:22.866 --> 00:48:23.256 Yes.
00:48:22.977 --> 00:48:24.426 kind of the? Yeah. OK.
00:48:24.786 --> 00:48:28.172 Yeah. Typical rule of thumb is anything that's like static
00:48:28.172 --> 00:48:31.673 marketing content is gonna be built in this manner. Anything
00:48:31.673 --> 00:48:35.346 that's dynamic or pulling data from the back end, you know, men
00:48:32.406 --> 00:48:32.726 OK.
00:48:35.346 --> 00:48:38.961 points, you guys are building, that's gonna be Seth. And we're
00:48:38.961 --> 00:48:41.716 gonna inject the components into the DNN pages.
00:48:42.196 --> 00:48:42.576 OK.
00:48:43.216 --> 00:48:47.128 Umm, because like one thing is, although this has Seth login
00:48:47.128 --> 00:48:50.847 like I can add five other components to this page, all in
00:48:50.847 --> 00:48:54.695 different dives. It make them all different. So say maybe I
00:48:54.695 --> 00:48:58.671 wanted like a user dashboard that's showing like a sales data
00:48:58.671 --> 00:48:59.056 graph.
00:49:00.686 --> 00:49:04.907 You know monthly, you know, say if, like, you're doing a stock
00:49:04.907 --> 00:49:08.995 market dashboard and like you have like a an open price book
00:49:08.995 --> 00:49:12.546 component on the right that's showing like you know.
00:49:13.236 --> 00:49:16.996 Bids and ask spreads for different stocks like that would
00:49:16.996 --> 00:49:20.950 be its own component. We would use the HTML to structure out
00:49:20.950 --> 00:49:25.034 like a rectangle here and then a more vertical rectangle here.
00:49:25.034 --> 00:49:28.405 Paste in the price book component here and then the
00:49:28.405 --> 00:49:29.766 graph component here.
00:49:33.676 --> 00:49:37.343 So you can like drop multiple different set components on
00:49:34.266 --> 00:49:34.516 Well.
00:49:37.343 --> 00:49:41.262 here. So typically at if data is coming from the back end and
00:49:41.262 --> 00:49:45.245 it's dynamic, you're going to be dropping a component into the
00:49:45.245 --> 00:49:48.406 the template itself. If it's static HTML modules.
00:49:52.906 --> 00:49:53.246 OK.
00:49:59.966 --> 00:50:00.756 Ah.
00:50:03.556 --> 00:50:07.702 I can kinda go into just debugging front end code and
00:50:07.702 --> 00:50:08.316 kind of.
00:50:10.066 --> 00:50:10.376 Yeah.
00:50:12.316 --> 00:50:13.906 Like some debugging principles.
00:50:15.316 --> 00:50:16.016 UM.
00:50:17.536 --> 00:50:21.450 I'll do the same react because this is different in probably
00:50:21.450 --> 00:50:22.476 the easiest way.
00:50:26.646 --> 00:50:27.536 So.
00:50:28.876 --> 00:50:32.337 If you guys don't already have it, I would definitely recommend
00:50:32.337 --> 00:50:34.446 getting the React component Inspector.
00:50:35.226 --> 00:50:38.361 I'm not sure if you guys will will need to do this, but it's
00:50:38.361 --> 00:50:41.651 probably worth having to think any probably modern developer at
00:50:41.651 --> 00:50:44.632 this point should probably have this extension if they're
00:50:44.632 --> 00:50:45.506 working in react.
00:50:46.126 --> 00:50:46.806 Umm.
00:50:47.916 --> 00:50:51.853 But this will give you access to look at all kind of the dynamic
00:50:51.853 --> 00:50:53.306 data that's in Seth now.
00:50:54.226 --> 00:50:57.725 When you use the 3000 Port MPM runs start these different
00:50:57.725 --> 00:51:01.043 layers of components will actually render out with the
00:51:01.043 --> 00:51:04.843 real names. So like if I have a component named test component
00:51:04.843 --> 00:51:08.161 this I don't know it's not always accurate but this in
00:51:08.161 --> 00:51:11.358 theory should say test component. So you can kind of
00:51:11.358 --> 00:51:15.038 find what you're looking at. But when we do the build and we
00:51:15.038 --> 00:51:18.598 publish like on a QA site the names get all janky. I don't
00:51:18.598 --> 00:51:20.166 know if that's on purpose.
00:51:20.216 --> 00:51:20.616 Yeah.
00:51:21.976 --> 00:51:26.451 It it's probably for obscurity, but it makes it harder to see
00:51:26.451 --> 00:51:31.070 what you're looking at, so you can use this little selector and
00:51:31.070 --> 00:51:35.256 choose different components that you want to navigate to.
00:51:39.316 --> 00:51:42.730 Say if we choose how to set items like this is the hottest
00:51:42.730 --> 00:51:43.656 items component.
00:51:44.456 --> 00:51:47.877 And over here I mean mainly what you're going to be looking for
00:51:47.877 --> 00:51:51.030 is in two pieces. I'm gonna choose different component for
00:51:51.030 --> 00:51:52.046 this reason though.
00:51:57.776 --> 00:52:00.541 Well, alright, let's start with this one. So typically there's
00:52:00.541 --> 00:52:01.946 hooks and then there's gonna be.
00:52:02.996 --> 00:52:06.575 Props. Ohh, this one just has the hooks which is kind of the
00:52:06.575 --> 00:52:10.272 state data for this component, so you can literally open it up
00:52:10.272 --> 00:52:12.736 and see all the auction information here.
00:52:19.226 --> 00:52:23.113 It probably won't go into too much detail, but it's helpful to
00:52:23.113 --> 00:52:26.938 just be able to to see the data without needing to write like
00:52:26.938 --> 00:52:30.516 console dot logs or C console debug or console rate line.
00:52:27.166 --> 00:52:27.566 Mm-hmm.
00:52:31.116 --> 00:52:32.456 Uh on the?
00:52:31.566 --> 00:52:34.326 So So what each one of these?
00:52:35.896 --> 00:52:40.471 Cards is a like a react component that's made-up of
00:52:40.471 --> 00:52:41.966 child components.
00:52:42.836 --> 00:52:44.586 And you're looking at.
00:52:45.926 --> 00:52:47.846 With the properties on each one the.
00:52:48.496 --> 00:52:50.742 You're drilling into that and looking at the different
00:52:50.742 --> 00:52:52.376 properties there. On the right is that?
00:52:53.296 --> 00:52:54.526 Yeah. So.
00:52:54.386 --> 00:52:55.996 Just making sure what I'm looking at.
00:52:56.006 --> 00:52:59.484 Yep. Yeah. No, I I appreciate it. So this is the parent level
00:52:59.484 --> 00:53:02.906 component. There's gonna be multiple components here. So the
00:53:02.326 --> 00:53:02.616 OK.
00:53:02.906 --> 00:53:06.384 parent level, you're right, this is essentially wrapping this
00:53:06.384 --> 00:53:09.974 full rectangle. And then we have all the cards in here. So this
00:53:09.974 --> 00:53:13.621 is going to have a lot of data. This is holding the data for all
00:53:13.621 --> 00:53:17.211 of the children components for the most part. So if you look at
00:53:17.211 --> 00:53:20.801 auction cards data, we get all four different auctions with all
00:53:17.656 --> 00:53:18.016 Umm.
00:53:20.801 --> 00:53:22.316 of their properties inside.
00:53:22.866 --> 00:53:23.226 OK.
00:53:24.166 --> 00:53:25.796 But as we start drilling down.
00:53:26.416 --> 00:53:28.766 Will work. So now here is just the slider.
00:53:29.776 --> 00:53:30.136 Umm.
00:53:30.166 --> 00:53:33.750 This one has a piece of state, so it has a height and a width
00:53:33.750 --> 00:53:36.698 that's being calculated dynamically, and so that's
00:53:36.698 --> 00:53:40.166 that's all the slider has. But if we go a little bit lower.
00:53:41.196 --> 00:53:43.776 That when also just has the height just the height.
00:53:44.906 --> 00:53:48.476 Eventually, we're going to get to one of the cards themselves.
00:53:51.266 --> 00:53:53.216 Which would be right here?
00:53:54.106 --> 00:53:58.104 And this one just has the auction data for just that card,
00:53:54.116 --> 00:53:54.466 OK.
00:53:58.104 --> 00:54:02.169 like it wouldn't know what the other cards are because, you
00:54:00.836 --> 00:54:01.256 OK.
00:54:02.169 --> 00:54:04.676 know, it's just kind of nested down.
00:54:08.216 --> 00:54:12.499 Dumb if, like you know, I don't know the name wasn't showing up.
00:54:12.499 --> 00:54:16.650 You could start by looking in the parent component being like,
00:54:16.650 --> 00:54:20.538 OK, well, I got all the data like I see auction names here
00:54:20.538 --> 00:54:24.096 and then you start looking down like is auction name.
00:54:24.876 --> 00:54:27.614 Here and you know if it's broken, you could be like. OK,
00:54:27.614 --> 00:54:30.448 well, then that's something broken. That's a really simple
00:54:30.448 --> 00:54:33.330 example, but just a way to actually view the data on before
00:54:31.656 --> 00:54:31.926 Yes.
00:54:33.330 --> 00:54:33.666 an end.
00:54:36.246 --> 00:54:36.716 Uh.
00:54:37.936 --> 00:54:42.559 The other thing in conjunction with this is react made this
00:54:42.559 --> 00:54:47.182 nice and easy is to actually break point on the data. So if
00:54:47.182 --> 00:54:51.960 we need to debug something on the front end before everything
00:54:51.960 --> 00:54:56.506 was compiled into a single set file. So if we take a look.
00:55:03.856 --> 00:55:07.746 In Angular, if I wanted to debug, it would be inside this
00:55:07.746 --> 00:55:11.300 file. This is everything in Seth, all TypeScript not
00:55:11.300 --> 00:55:15.592 minified but just all compiled into or. I think it's transpiled
00:55:15.592 --> 00:55:19.817 technically into a JS file, so looking through this is awfully
00:55:19.586 --> 00:55:20.066 What?
00:55:19.817 --> 00:55:23.841 long. The way to find something is control F like you gotta
00:55:23.841 --> 00:55:28.201 search for for what you want and then find the right one and you
00:55:28.201 --> 00:55:32.359 can kind of look see how it's sales detail controller. It's a
00:55:32.359 --> 00:55:36.047 prototype and then loads discounts which is a function
00:55:36.047 --> 00:55:36.986 based on this.
00:55:37.926 --> 00:55:38.646 This controller.
00:55:38.886 --> 00:55:39.186 Umm.
00:55:39.736 --> 00:55:43.897 And then you can kind of put your break points here and do as
00:55:43.897 --> 00:55:47.923 needed. With react it's much easier. It's actually the file
00:55:47.923 --> 00:55:52.285 names. So if we wanna go to the hottest items component, you can
00:55:52.285 --> 00:55:52.956 control P.
00:55:54.316 --> 00:55:57.288 How to stay items list and it will just take you to that
00:55:57.288 --> 00:55:58.696 component on the front end.
00:56:00.656 --> 00:56:02.276 Cool and you can.
00:56:01.896 --> 00:56:03.866 So you're not. They can do everything.
00:56:03.696 --> 00:56:04.006 Yeah.
00:56:05.156 --> 00:56:06.846 Can you share that one more time, Justin?
00:56:07.756 --> 00:56:11.176 Yeah, the angular piece or just the React piece.
00:56:11.486 --> 00:56:12.746 Just the reacties.
00:56:13.336 --> 00:56:15.126 Yeah. So the react piece.
00:56:16.576 --> 00:56:20.017 Control P well, that's just a general dev tools thing, but
00:56:20.017 --> 00:56:23.458 it'll allow you to search through the files. You can go in
00:56:23.458 --> 00:56:26.666 and search for the React component that you're looking
00:56:26.666 --> 00:56:29.116 for. So we're we want hottest items list.
00:56:30.126 --> 00:56:33.455 You can choose how test items list and you just have this
00:56:33.455 --> 00:56:34.316 component here.
00:56:35.196 --> 00:56:37.366 And you can actually put break points on here.
00:56:35.376 --> 00:56:35.876 OK.
00:56:37.606 --> 00:56:40.922 Yeah, you can set breakpoints and step over and step through
00:56:40.922 --> 00:56:44.184 just pretty, pretty similar to the back end. It's not as in
00:56:44.184 --> 00:56:47.392 depth of debugging as the back end I don't think, but it's
00:56:46.476 --> 00:56:47.536 Yep, no.
00:56:47.392 --> 00:56:50.980 pretty close. You know it's it's pretty close for doing it inside
00:56:48.576 --> 00:56:48.866 Yeah.
00:56:48.786 --> 00:56:49.156 Yeah.
00:56:50.980 --> 00:56:52.176 the browser, you know.
00:56:52.376 --> 00:56:52.636 Yep.
00:56:53.226 --> 00:56:54.796 Yeah, I guess.
00:56:53.446 --> 00:56:56.513 Yeah. Is there anything else besides just setting the break
00:56:56.513 --> 00:56:59.784 point that you need to do to get it to actually pause on there?
00:56:59.784 --> 00:57:02.800 Because in the past I've run into situations where I could
00:57:02.800 --> 00:57:05.969 have been doing something else wrong, but unless I had like a
00:57:05.969 --> 00:57:09.343 console log or something else in the set in the code, it wouldn't
00:57:09.343 --> 00:57:10.876 actually hit the break points.
00:57:13.036 --> 00:57:13.546 Umm.
00:57:14.046 --> 00:57:17.498 Shouldn't need to do anything else, it should just hit it. If
00:57:17.498 --> 00:57:18.556 it's truly hitting.
00:57:19.236 --> 00:57:22.585 Yeah, you just do whatever action triggers whatever piece
00:57:19.316 --> 00:57:19.726 OK.
00:57:22.585 --> 00:57:26.050 of code that you're setting a breakpoint on, right? So that
00:57:26.050 --> 00:57:29.688 function get active auctions at that runs on page load, all we
00:57:29.688 --> 00:57:32.286 should have to do is reload the page, right?
00:57:33.506 --> 00:57:36.474 For whatever action triggers that function to be called, you
00:57:36.474 --> 00:57:38.566 do that and it should hit the break point.
00:57:39.436 --> 00:57:39.726 OK.
00:57:39.806 --> 00:57:43.862 Yeah, I actually think I was wrong cause use control P to get
00:57:43.862 --> 00:57:47.983 to that hottest items list and now I'm remembering what I used
00:57:47.983 --> 00:57:52.169 to do was set a console log in the file and then run it just to
00:57:52.169 --> 00:57:56.094 get that file to actually pop up because I wasn't using the
00:57:56.094 --> 00:58:00.215 control shortcut and then set the break point once. Once I was
00:58:00.215 --> 00:58:03.616 able to get this file populated in the sources tab.
00:58:04.216 --> 00:58:07.405 Yes. Yeah, you you can do that because I think in the console
00:58:07.405 --> 00:58:09.616 dot log it'll give you like the file name.
00:58:10.036 --> 00:58:10.656 Yeah.
00:58:10.296 --> 00:58:13.601 And then you can click on it and it'll open it up here. Yeah,
00:58:13.601 --> 00:58:17.066 definitely a roundabout way, but that's that's what this is for.
00:58:22.136 --> 00:58:26.052 Umm, yeah, I'll I'll refresh this the the one caveat I'll say
00:58:26.052 --> 00:58:30.220 on this is for the most part you should be able to break point on
00:58:30.220 --> 00:58:33.946 most things in here. I don't think you can break point on.
00:58:34.906 --> 00:58:38.556 Looks. So these up here we can give it a try. Maybe I'm wrong.
00:58:39.706 --> 00:58:44.058 And then also this is gonna give you the JSX and here there will
00:58:44.058 --> 00:58:47.942 be times where you want to verify data and and see what's
00:58:47.942 --> 00:58:52.361 inside the HTML. Typically break pointing in these doesn't always
00:58:52.361 --> 00:58:52.696 work.
00:58:54.786 --> 00:58:58.046 These ones look like they will because we have this kind of,
00:58:58.046 --> 00:58:58.206 uh.
00:58:59.036 --> 00:59:02.035 Yeah, these different objects here and then there's some
00:59:02.035 --> 00:59:05.455 JavaScript inside there, so it's auction card data. It's doing a
00:59:05.455 --> 00:59:06.876 fine. So it just finds one.
00:59:07.556 --> 00:59:12.094 Ah, that should work. But like what? It won't actually let me
00:59:12.094 --> 00:59:16.706 click on this to see what lot is being passed into model card.
00:59:19.426 --> 00:59:23.186 So that's probably the biggest gutcha in using this like.
00:59:24.216 --> 00:59:27.568 We can see we have. This is probably an array of lots. It's
00:59:27.568 --> 00:59:30.753 making sure that there's a length, and then it's slicing
00:59:30.753 --> 00:59:34.273 out the first four. So if it's, if it's an array of nine, it's
00:59:34.273 --> 00:59:37.626 saying give me the first four, and then let's start looping
00:59:37.626 --> 00:59:41.258 over those and then passing them into a child component of model
00:59:41.258 --> 00:59:44.666 card. You can't break point on here and say OK, which lot is
00:59:44.666 --> 00:59:48.186 actually going in there. You can probably break point on this.
00:59:48.186 --> 00:59:51.594 See how it just gives me the bottom one and see which one is
00:59:51.594 --> 00:59:54.723 kind of coming off the slice as this is starting to get
00:59:54.723 --> 00:59:55.226 rendered.
00:59:55.516 --> 00:59:57.746 So let's refresh the page real quick and we can.
00:59:58.586 --> 00:59:59.146 Jump there.
01:00:00.466 --> 01:00:03.978 So yeah, you can. OK, I guess you can break point on them,
01:00:03.978 --> 01:00:04.216 but.
01:00:06.876 --> 01:00:08.766 Yeah, alright. I guess it does give you the data maybe.
01:00:11.396 --> 01:00:13.346 It was right. OK, that's cool.
01:00:18.166 --> 01:00:21.596 Uh, so yeah. And then we can kind of check the data here.
01:00:21.596 --> 01:00:25.323 This is obviously coming back from a back end response CB API,
01:00:25.323 --> 01:00:28.871 get auction cards. We're passing in this data. The response
01:00:28.871 --> 01:00:29.936 response dot data.
01:00:31.276 --> 01:00:34.313 Data results and we can see that that different auction
01:00:34.313 --> 01:00:35.506 information coming in.
01:00:36.496 --> 01:00:40.967 Umm. And then yeah, you can step over, like Tim said, definitely
01:00:40.967 --> 01:00:43.306 not as good as the Visual Studio.
01:00:43.536 --> 01:00:45.646 A debugger.
01:00:46.556 --> 01:00:51.461 Usually you gotta kind of add a bunch of different breakpoints
01:00:51.461 --> 01:00:55.276 and then just hit resume to go, but you can see.
01:00:56.616 --> 01:00:59.943 OK, I guess it does give us the one. So there is some weirdness
01:00:59.943 --> 01:01:03.167 when you when you're trying to break point inside the JSX. It
01:01:03.167 --> 01:01:06.026 definitely does occur, but you can see what's kind of.
01:01:04.846 --> 01:01:08.576 Yeah, I think the way that you know, the weird way the
01:01:08.576 --> 01:01:12.849 JavaScript handles scope I think messes with being able to see
01:01:12.849 --> 01:01:15.426 certain data at certain times, right?
01:01:16.106 --> 01:01:16.526 Yeah.
01:01:16.436 --> 01:01:19.985 I I I think that's part of this right here, but I could be wrong
01:01:19.985 --> 01:01:23.043 about that. But I think sometimes you think you should.
01:01:23.043 --> 01:01:26.538 You'll you'll set break points and you'll hover over stuff that
01:01:26.538 --> 01:01:29.978 you think should be in scope and you should be able to see the
01:01:29.978 --> 01:01:33.310 data that's in that object at that time and it won't show it
01:01:33.246 --> 01:01:33.656 I.
01:01:33.310 --> 01:01:36.531 to you, you know. So it's not perfect by any means, but it
01:01:36.531 --> 01:01:39.972 does help tremendously. And the also the components tab or the
01:01:39.972 --> 01:01:43.248 components extension that he was showing earlier, the React
01:01:43.248 --> 01:01:45.596 extension, you can go into the components.
01:01:45.786 --> 01:01:49.214 And they're hard to find like the the top level components are
01:01:49.214 --> 01:01:52.750 hard to find sometimes, but once you find them, you can see what
01:01:52.750 --> 01:01:55.906 state is held at any time. And that is extremely helpful.
01:01:56.596 --> 01:01:56.946 Umm.
01:02:00.666 --> 01:02:04.646 Yeah, I think you know, working in the back end, I I much prefer
01:02:04.646 --> 01:02:08.442 kind of debugging back there, but this will get the job done,
01:02:08.442 --> 01:02:12.361 can be a little little iffy, but should be enough to get you up
01:02:12.361 --> 01:02:13.096 and running.
01:02:30.586 --> 01:02:31.136 Cool.
01:02:35.886 --> 01:02:39.168 Does anybody have anything that they, again any any questions
01:02:39.168 --> 01:02:42.555 that have kind of come up there and development that we can can
01:02:42.555 --> 01:02:43.296 touch on here?
01:02:46.956 --> 01:02:50.091 Umm, I guess I got a topic I can talk about. Do you mind if I
01:02:50.091 --> 01:02:51.406 steal the screen from you?
01:02:51.946 --> 01:02:52.226 Sure.
01:02:53.096 --> 01:02:53.666 Let's do it.
01:03:07.156 --> 01:03:11.583 Umm, so this was a new purchase pane that I had to make for
01:03:11.583 --> 01:03:14.386 Tom's and I was just kind of curious.
01:03:12.646 --> 01:03:12.926 Cool.
01:03:15.696 --> 01:03:19.091 Because I was going through trying to style everything to
01:03:19.091 --> 01:03:22.604 get it to look as close to the mock up as I could and I was
01:03:22.336 --> 01:03:22.656 Mm-hmm.
01:03:22.604 --> 01:03:26.116 kind of just going through like I googled bootstrap spacing
01:03:26.116 --> 01:03:29.336 classes and was just kind of grabbed in some of those.
01:03:30.136 --> 01:03:35.457 Umm formatting classes to get the spacing down? Is there a
01:03:35.457 --> 01:03:39.426 better practice for how we set those up or?
01:03:40.586 --> 01:03:44.487 For each individual kind of pain in the checkout step, is there
01:03:44.487 --> 01:03:48.022 like a certain format we're supposed to follow? For those
01:03:48.022 --> 01:03:51.435 cause, I kind of just was adjusting these separately on
01:03:51.435 --> 01:03:55.458 the fly as I was going trying to get them to look as close to the
01:03:55.458 --> 01:03:56.616 mock up as I could.
01:03:57.436 --> 01:03:58.126 Sure.
01:04:01.376 --> 01:04:04.946 There is no set format. You can definitely kind of pick off
01:04:04.946 --> 01:04:08.397 maybe another form that's on the checkout, but I guess my
01:04:08.397 --> 01:04:12.085 question would be is did they provide you a mock up or a mark
01:04:12.085 --> 01:04:15.596 up for this or you're just they're just saying just create
01:04:15.596 --> 01:04:16.726 the the components.
01:04:19.216 --> 01:04:21.006 Well, the ticket didn't have any.
01:04:21.896 --> 01:04:27.192 Mockups on it, but Brandon sent me a screenshot of something
01:04:22.456 --> 01:04:22.686 It.
01:04:23.566 --> 01:04:23.806 OK.
01:04:27.192 --> 01:04:30.926 that he had access to that I had not seen.
01:04:31.776 --> 01:04:32.176 OK.
01:04:33.396 --> 01:04:33.916 Uh.
01:04:35.906 --> 01:04:36.586 If.
01:04:35.906 --> 01:04:39.916 So Brandon sent me this image is what it's supposed to look like.
01:04:41.176 --> 01:04:41.506 OK.
01:04:43.626 --> 01:04:44.526 Yeah, I mean.
01:04:45.796 --> 01:04:47.266 If if they give us.
01:04:45.976 --> 01:04:46.486 And then.
01:04:47.996 --> 01:04:51.391 Markup. Then I mean, we'll use those exact classes. It sounds
01:04:51.391 --> 01:04:54.566 like you don't have markup, but instead you have markups.
01:04:55.476 --> 01:04:59.506 Which are really just just images, so there's no real.
01:04:55.516 --> 01:04:56.006 Yes.
01:05:00.416 --> 01:05:00.936 I don't know.
01:05:02.036 --> 01:05:06.286 I guess standard or format to to kind of space these out as long
01:05:06.286 --> 01:05:09.817 as it looks close, but you do wanna typically use the
01:05:09.817 --> 01:05:12.236 bootstrap classes whenever possible.
01:05:14.136 --> 01:05:14.566 OK.
01:05:15.946 --> 01:05:16.446 Umm.
01:05:17.956 --> 01:05:21.296 And then I forget what it was. I had to remove something from
01:05:21.296 --> 01:05:24.636 here. So it looks like the phone number has placeholder text.
01:05:25.156 --> 01:05:25.566 Mm-hmm.
01:05:25.866 --> 01:05:30.376 Which I hard coded because it was different than whatever the
01:05:30.376 --> 01:05:31.976 phone translation was.
01:05:33.286 --> 01:05:36.364 And then I think there was something else I had to remove.
01:05:36.364 --> 01:05:37.616 So label text label key.
01:05:39.036 --> 01:05:42.280 Uh, I read remove the placeholder key because that was
01:05:42.280 --> 01:05:44.286 overwriting the placeholder text.
01:05:45.586 --> 01:05:48.486 And this is what they wanted in the placeholder text.
01:05:49.786 --> 01:05:52.016 So is it OK if I have this hard coded?
01:05:49.856 --> 01:05:50.206 OK.
01:05:53.906 --> 01:05:57.683 For a placeholder text you can. I mean we still typically use
01:05:57.683 --> 01:06:01.155 translations for these, but I don't think that would get
01:06:01.155 --> 01:06:04.931 translated to anything. So like for a phone, I wanna say that
01:06:04.931 --> 01:06:08.403 the number is probably fine, right? Because what are you
01:06:08.403 --> 01:06:09.926 going to translate it to?
01:06:10.476 --> 01:06:10.956 Yeah.
01:06:10.616 --> 01:06:11.216 Uh.
01:06:12.386 --> 01:06:16.755 So that one's that one should be fine, but like using the
01:06:16.755 --> 01:06:20.596 translation for the inputs above would be correct.
01:06:22.696 --> 01:06:26.588 OK. Yeah. And then the other values like Max length message
01:06:26.588 --> 01:06:30.286 and everything, I think these were copied straight from.
01:06:32.436 --> 01:06:36.361 Registration. Basic. Yeah, they were copied right from here. So
01:06:36.361 --> 01:06:40.103 registration the very first section for basic info. I copied
01:06:36.526 --> 01:06:36.856 Yep.
01:06:40.103 --> 01:06:44.089 the first name, last name, phone number and e-mail straight from
01:06:44.089 --> 01:06:44.396 here.
01:06:45.056 --> 01:06:48.548 So I'm guessing that those don't need to be hard coded for any
01:06:45.076 --> 01:06:45.726 Yep.
01:06:48.548 --> 01:06:48.936 reason.
01:06:49.696 --> 01:06:50.616 Yeah, yeah.
01:06:49.886 --> 01:06:51.796 Placeholder tags and Max link message.
01:06:52.496 --> 01:06:56.351 Yep, typically the the validation messages are hard
01:06:56.351 --> 01:06:57.166 coded also.
01:06:59.346 --> 01:06:59.826 OK.
01:07:03.326 --> 01:07:06.446 You want to take a look at what the front end looks like. Have
01:07:06.446 --> 01:07:07.536 you have you actually?
01:07:08.516 --> 01:07:10.836 You know, spun this up to see what the spacing looks like.
01:07:12.946 --> 01:07:14.556 Uh, yes.
01:07:14.686 --> 01:07:14.986 OK.
01:07:16.976 --> 01:07:20.446 So this was what Brandon said, the.
01:07:21.186 --> 01:07:24.216 This is the current mock up for Tom's Truck Center.
01:07:25.066 --> 01:07:25.256 I.
01:07:25.606 --> 01:07:29.096 And this was the most recent version that I sent in.
01:07:30.726 --> 01:07:31.126 OK.
01:07:33.056 --> 01:07:36.508 That looks pretty close. Uh. Can you jump back to Tom's real
01:07:36.508 --> 01:07:39.734 quick? What was the ticket for creating those those four
01:07:39.734 --> 01:07:40.356 components?
01:07:41.026 --> 01:07:44.576 Uh, yeah, it's a new purchase pane, so it's like step.
01:07:45.706 --> 01:07:49.459 In this example, it's Step 2. Contact information has a
01:07:49.459 --> 01:07:53.748 heading up here for text boxes for first name, last name, phone
01:07:53.748 --> 01:07:57.501 number, e-mail and then a continue button. So it's just
01:07:57.501 --> 01:07:59.176 that section right there.
01:07:57.876 --> 01:07:58.176 OK.
01:08:00.286 --> 01:08:00.676 Cool.
01:08:02.166 --> 01:08:06.048 Yeah, if that is what it looks like, I would say that that is
01:08:06.048 --> 01:08:07.426 probably pretty close.
01:08:08.646 --> 01:08:12.267 And then was the ticket just for building it out or actually
01:08:12.267 --> 01:08:13.276 wiring it up too?
01:08:14.906 --> 01:08:18.836 Uh, I think everything. I think it's wiring it up.
01:08:20.496 --> 01:08:21.046 As well.
01:08:20.546 --> 01:08:20.826 OK.
01:08:22.206 --> 01:08:23.696 Did you?
01:08:24.426 --> 01:08:28.266 Guess which would be probably pretty useful. I know Tim has a
01:08:28.266 --> 01:08:32.291 lot of experience with this. The use form hook. Were you able to
01:08:32.291 --> 01:08:34.706 use that and have any success with it?
01:08:36.336 --> 01:08:39.596 I don't believe I used to use form hook.
01:08:40.396 --> 01:08:40.766 OK.
01:08:42.906 --> 01:08:47.946 Let's I think you are. So let's take a quick peek.
01:08:48.716 --> 01:08:49.336 OK.
01:08:49.126 --> 01:08:49.726 Yeah.
01:08:50.816 --> 01:08:55.247 So if you Scroll down to those. Uh, yeah. So see. Yep. You got
01:08:55.247 --> 01:08:59.748 you use form right there in 38. And if you Scroll down a little
01:08:59.748 --> 01:09:03.686 bit into those inputs, see how you're registering them.
01:09:05.826 --> 01:09:10.436 On 55 and then 58, which is the form identifier.
01:09:11.246 --> 01:09:11.786 Yes.
01:09:11.346 --> 01:09:15.964 That's essentially registering these inputs into use form,
01:09:15.964 --> 01:09:20.740 which is used quite extensively throughout the front end for
01:09:20.740 --> 01:09:25.515 pretty much all our forms. It essentially manages all of the
01:09:25.515 --> 01:09:28.176 inputs for validation submission.
01:09:29.436 --> 01:09:33.311 You know, whatever it may be, cause the forms can get pretty
01:09:33.311 --> 01:09:35.916 complex, so this is using use form hook.
01:09:37.726 --> 01:09:38.836 If you.
01:09:41.066 --> 01:09:44.066 Let me see. This whole component was created.
01:09:45.126 --> 01:09:45.636 Yes.
01:09:46.496 --> 01:09:46.846 OK.
01:09:48.726 --> 01:09:50.616 Can you Scroll down just a little bit more?
01:09:57.216 --> 01:09:57.626 OK.
01:09:58.226 --> 01:09:59.006 Umm.
01:10:00.166 --> 01:10:04.177 So what this would actually need to do, and if if we want, we
01:10:04.177 --> 01:10:08.381 could spend a little bit of time looking at this, but this would
01:10:08.381 --> 01:10:11.810 probably be its own thing. Is these registered these
01:10:11.810 --> 01:10:15.820 registered inputs would need to be likely set as to part of a
01:10:15.820 --> 01:10:18.796 parent form which is the checkout as a whole.
01:10:19.936 --> 01:10:20.416 Uh.
01:10:21.716 --> 01:10:25.294 So can you scroll up just a little bit for me? I guess to
01:10:25.294 --> 01:10:26.836 the top of the component?
01:10:29.846 --> 01:10:30.896 Keep scrolling up.
01:10:31.566 --> 01:10:33.236 Code complete checkout step.
01:10:36.296 --> 01:10:36.826 Cool.
01:10:44.016 --> 01:10:46.644 And then you wanna jump to another checkout step real
01:10:46.644 --> 01:10:46.936 quick.
01:10:49.836 --> 01:10:51.366 Maybe just wanted Jason to this.
01:10:52.726 --> 01:10:53.176 Yeah.
01:10:58.836 --> 01:11:02.046 Go up to the top.
01:11:03.436 --> 01:11:05.216 Tape payment method.
01:11:07.326 --> 01:11:08.456 Scroll down a little bit.
01:11:13.466 --> 01:11:17.760 Use the address book. There should be a register form of at
01:11:17.760 --> 01:11:21.911 the top of the check out component. I could probably look
01:11:21.911 --> 01:11:26.205 at my own, but if you open up your document explorer to the
01:11:26.205 --> 01:11:30.713 left or if any I don't know Tim, if you remember exactly where
01:11:30.713 --> 01:11:31.286 this is.
01:11:33.996 --> 01:11:36.866 I don't. I would have to pull it up. Let's.
01:11:39.636 --> 01:11:41.766 Try going to.
01:11:48.326 --> 01:11:52.036 Is it checkout shared? Try opening the shared folder.
01:11:52.746 --> 01:11:53.406 Under steps.
01:11:54.636 --> 01:11:55.726 Yet I click that.
01:11:57.016 --> 01:11:59.766 That's probably not it. Let me take a quick look.
01:12:07.246 --> 01:12:08.396 Yes.
01:12:26.056 --> 01:12:28.656 PCs doesn't have a lot of front end override yet.
01:12:29.516 --> 01:12:30.416 Which is the couple.
01:12:29.556 --> 01:12:30.416 No.
01:12:31.286 --> 01:12:32.256 Doesn't.
01:12:33.266 --> 01:12:37.289 It should be a pretty large object of all the data that's
01:12:37.289 --> 01:12:41.312 getting passed over when you actually submit the checkout
01:12:41.312 --> 01:12:43.116 form, unless it's changed.
01:12:44.756 --> 01:12:46.656 And it'll be good to see one of the register.
01:12:46.016 --> 01:12:49.236 Is it this one that you're looking for that has the?
01:12:50.966 --> 01:12:54.196 Data with the billing stat methods that payment stat.
01:12:54.786 --> 01:12:58.570 Uh, yeah, that does look like it. And if you Scroll down a
01:12:58.570 --> 01:12:59.276 little bit.
01:13:01.596 --> 01:13:04.626 So yeah, I added an entry for Tom's contact.
01:13:01.976 --> 01:13:02.326 Return.
01:13:02.306 --> 01:13:03.126 Thank you, Sir.
01:13:05.486 --> 01:13:08.546 Oh, cool. OK. Yeah, I think this is it. Sweet.
01:13:12.086 --> 01:13:13.386 Scroll down a little bit more.
01:13:15.386 --> 01:13:19.127 OK, cool. Yeah, I think this is building the form. I think
01:13:19.127 --> 01:13:22.931 before it was a lot of hard coded individual inputs or like
01:13:22.931 --> 01:13:27.115 individual form identifiers, but I think it's since been a little
01:13:27.115 --> 01:13:28.066 bit refactored.
01:13:31.176 --> 01:13:31.666 OK.
01:13:31.476 --> 01:13:34.966 Cool. So there should be.
01:13:38.006 --> 01:13:39.466 Yep, Scroll down a little bit more.
01:13:43.636 --> 01:13:47.206 Use reducer checkouts. The factory I keep going.
01:13:52.646 --> 01:13:53.536 Keep going.
01:13:59.856 --> 01:14:04.144 Purchase. There should be a an actual submit function and I'm
01:14:04.144 --> 01:14:08.293 guessing it may be in the JSX itself, so you may have to go
01:14:08.293 --> 01:14:12.166 down a little bit further. Yeah, try taking and submit.
01:14:20.276 --> 01:14:22.656 May very well be one of the last ones.
01:14:31.706 --> 01:14:32.276 Umm.
01:14:33.396 --> 01:14:34.336 See my end.
01:14:57.726 --> 01:14:59.286 Button types submit.
01:15:10.106 --> 01:15:14.376 Try searching for this right here neck.
01:15:19.936 --> 01:15:23.802 Is the on submit should take you to the top of the form. And I
01:15:23.802 --> 01:15:27.606 know for myself I typically use this to kind of see where the
01:15:27.606 --> 01:15:31.226 form starts, because sometimes there's gonna be components
01:15:31.226 --> 01:15:31.656 inside.
01:15:32.426 --> 01:15:34.376 Uh, nested child components.
01:15:35.046 --> 01:15:35.536 Uh.
01:15:38.546 --> 01:15:42.726 And then there should be one. So check out confirmation step.
01:15:44.056 --> 01:15:45.686 This was in checkout, right? Yeah.
01:15:46.356 --> 01:15:46.856 Yes.
01:15:47.396 --> 01:15:51.506 Yeah. OK. So this kind of goes at the top.
01:15:53.056 --> 01:15:55.306 Of the component itself.
01:15:58.106 --> 01:16:02.896 Which is the form I'm trying to think how this is done.
01:16:04.016 --> 01:16:07.839 Essentially, the on submit should be on the form HTML
01:16:07.839 --> 01:16:11.873 component that wraps around everything that the use form
01:16:11.873 --> 01:16:16.333 hook is kind of being contained within. So like I said, you'll
01:16:16.333 --> 01:16:20.722 have multiple form inputs and you know child components, then
01:16:20.722 --> 01:16:24.898 child components of those and they should all register and
01:16:24.898 --> 01:16:29.287 ultimately relate to where the handle submit form is wrapping
01:16:29.287 --> 01:16:30.066 everything.
01:16:31.026 --> 01:16:33.796 OK, I don't look like I have that form.
01:16:34.806 --> 01:16:36.356 So does that need to be added here?
01:16:37.246 --> 01:16:37.776 I'm guessing.
01:16:37.496 --> 01:16:37.876 It's.
01:16:38.636 --> 01:16:42.332 Shouldn't need to be added there, but what I'm wondering
01:16:42.332 --> 01:16:42.526 is.
01:16:42.606 --> 01:16:42.876 This.
01:16:44.496 --> 01:16:47.216 But in step confirmation.
01:16:48.896 --> 01:16:51.286 He handles the Mitchell confirmations.
01:16:52.886 --> 01:16:53.956 Let me see something.
01:17:11.906 --> 01:17:14.522 That Jesse sent to now a probably a better description
01:17:14.522 --> 01:17:15.426 than I can provide.
01:17:15.116 --> 01:17:15.276 And.
01:17:21.996 --> 01:17:23.666 So form paired running.
01:17:24.746 --> 01:17:28.316 Children call type continue text.
01:17:31.186 --> 01:17:35.039 Now I guess that is the correct component or that is the correct
01:17:35.039 --> 01:17:38.536 handle submit, but essentially yeah, the form should wrap.
01:17:39.476 --> 01:17:41.546 And will submit on submit.
01:17:43.186 --> 01:17:46.086 And then on completed checkout confirmation step.
01:17:46.866 --> 01:17:48.106 Just props.
01:17:49.396 --> 01:17:50.246 This function.
01:17:51.286 --> 01:17:54.693 No, I think that isn't the right component. So you're probably
01:17:54.693 --> 01:17:55.126 all set.
01:17:55.906 --> 01:17:56.616 But.
01:18:01.326 --> 01:18:05.062 Yeah, the the checkout steps can be a bit confusing even for
01:18:05.062 --> 01:18:08.920 myself, but usually the way I kind of look at this, maybe this
01:18:08.920 --> 01:18:12.901 is a bad example, but typically the form's gonna wrap all of the
01:18:12.901 --> 01:18:16.085 other form child form components. This one does use
01:18:16.085 --> 01:18:19.821 step so it must be set up a little bit differently, but it's
01:18:19.821 --> 01:18:23.679 usually a good way to kind of tell where the start of the form
01:18:23.679 --> 01:18:27.354 is and then all components inside kind of relate to that on
01:18:27.354 --> 01:18:30.906 submit. And then like if you were to click handle submit.
01:18:31.616 --> 01:18:34.556 And then on submit, it's likely going to take you to some type
01:18:34.556 --> 01:18:34.696 of.
01:18:34.806 --> 01:18:38.396 Uh, like complete checkout step function?
01:18:41.306 --> 01:18:44.476 Yeah, on complete checkout confirmation stuff.
01:18:44.836 --> 01:18:45.766 Yeah, there you go.
01:18:46.996 --> 01:18:49.286 And like you would have to probably click in there and kind
01:18:49.286 --> 01:18:51.576 of click through to find out where it's actually, you know.
01:18:53.556 --> 01:18:55.666 That is the type itself.
01:18:58.076 --> 01:18:58.986 I think it's.
01:19:04.756 --> 01:19:09.546 Yeah, calls dispatch with a confirmation step complete.
01:19:10.136 --> 01:19:14.826 Right. Yep. And so that would send it to likely Redux.
01:19:15.916 --> 01:19:16.776 Which is where the.
01:19:16.356 --> 01:19:19.589 Yeah, I was also wondering what this dispatch call was because I
01:19:19.589 --> 01:19:20.186 wasn't sure.
01:19:21.606 --> 01:19:25.316 What that did or how to recreate it exactly?
01:19:23.256 --> 01:19:23.876 Yep.
01:19:26.166 --> 01:19:31.288 Yeah, try doing a control shift F for the confirmation step
01:19:31.288 --> 01:19:32.056 complete.
01:19:35.716 --> 01:19:38.076 Uh, do the one that's next to the type.
01:19:41.096 --> 01:19:44.096 So wine for 20? Or is that the same one?
01:19:45.416 --> 01:19:46.726 Next to check out, type.
01:19:47.326 --> 01:19:49.756 No. Can you go back to that component you were just at?
01:19:52.606 --> 01:19:55.576 Umm, see line for 20, yeah.
01:19:53.616 --> 01:19:54.196 This one.
01:19:59.156 --> 01:19:59.886 You want me to do it?
01:19:59.596 --> 01:20:01.906 Do a control shift that for it.
01:20:02.366 --> 01:20:02.776 Gotcha.
01:20:13.326 --> 01:20:14.186 Tease.
01:20:14.266 --> 01:20:18.246 Ohm that is in checkout dispatch.
01:20:19.676 --> 01:20:22.566 But at the other fines for it at the top of this.
01:20:25.526 --> 01:20:26.876 Just, uh constant.
01:20:27.836 --> 01:20:28.636 Come from me.
01:20:27.956 --> 01:20:28.926 And then.
01:20:30.376 --> 01:20:31.766 This return state.
01:20:35.576 --> 01:20:39.216 Scroll up just a smidge to the top of this switch statement.
01:20:42.336 --> 01:20:45.406 OK, so he's using your reducer here.
01:20:46.766 --> 01:20:50.016 Manage the check out is is a beast.
01:20:52.036 --> 01:20:57.206 So he's using a reducer here. Typically this is used in redox
01:20:57.206 --> 01:20:57.706 which.
01:20:58.616 --> 01:21:02.707 Is kind of a global state management for react, so all of
01:21:02.707 --> 01:21:06.164 you know the different components have their own
01:21:06.164 --> 01:21:10.537 individual state, but you can actually have global state that
01:21:10.537 --> 01:21:11.666 you used across.
01:21:13.616 --> 01:21:15.925 The the platform we actually you mind if I share my screen,
01:21:15.925 --> 01:21:16.656 you'll probably be.
01:21:17.516 --> 01:21:18.906 Easier to show this real quick.
01:21:19.556 --> 01:21:20.216 Yeah, no problem.
01:21:23.196 --> 01:21:24.996 So probably be fairly useful.
01:21:30.576 --> 01:21:32.786 So let's see.
01:21:34.506 --> 01:21:38.619 Source Redux store, so I probably won't do this justice,
01:21:38.619 --> 01:21:42.588 but yeah, essentially you can have global state that's
01:21:42.588 --> 01:21:46.628 accessed through all the different components in react,
01:21:46.628 --> 01:21:50.814 and there's really kind of two different ways to do this.
01:21:50.814 --> 01:21:54.999 There's Redux and then there's also something else called
01:21:54.999 --> 01:21:55.576 context.
01:21:56.636 --> 01:22:01.006 Context. You kinda have to wrap around different components that
01:22:01.006 --> 01:22:05.040 you want to have access to that semiglobal wide state where
01:22:05.040 --> 01:22:09.410 redox you can kind of inject it into whatever component you want
01:22:09.410 --> 01:22:13.579 it in and then be able to access different data. So like Seth
01:22:13.579 --> 01:22:17.747 Config obviously is what the configs that are coming from the
01:22:17.747 --> 01:22:22.050 back end. So like we don't want to have to generate a new state
01:22:22.050 --> 01:22:25.815 hook in each individual component every time we use CEF
01:22:25.815 --> 01:22:26.286 config.
01:22:26.386 --> 01:22:27.916 So like reacts perfect for that.
01:22:29.086 --> 01:22:34.348 I think the original rule of thumb was if a piece of data is
01:22:34.348 --> 01:22:39.351 getting used more than four times within the platform, it
01:22:39.351 --> 01:22:44.526 was a candidate to go into Redux. So if we take a look for.
01:22:45.666 --> 01:22:46.896 That config.
01:22:47.966 --> 01:22:49.656 We can see.
01:22:52.006 --> 01:22:54.556 In this component.
01:22:57.916 --> 01:23:02.276 Redoux this is PCs OK. Yeah, this one a little bit newer.
01:23:03.666 --> 01:23:07.236 We can see that we're importing Seth config from Redux types.
01:23:08.516 --> 01:23:12.202 And then we're generating a custom use Seth Config hook here
01:23:12.202 --> 01:23:15.949 and then this is the type that's being generated in from from
01:23:15.949 --> 01:23:19.816 Redux because obviously we need, yeah, the type for TypeScript.
01:23:22.826 --> 01:23:25.832 I won't get into the inner workings of how the actual
01:23:25.832 --> 01:23:29.116 custom hook works, but this is similar to like use effect.
01:23:31.196 --> 01:23:34.897 Or use context. Even use state like you can create your own
01:23:34.897 --> 01:23:38.166 hooks in react with really just a getter and setter.
01:23:39.546 --> 01:23:43.716 And so this is happening right here and it's just being
01:23:43.716 --> 01:23:48.334 assigned to set config so you can then go and actually access
01:23:48.334 --> 01:23:51.536 set config directly from this this object.
01:23:53.416 --> 01:23:58.115 And like so, this is saying key set config Google Maps API key.
01:23:58.115 --> 01:24:02.740 You could do like Seth Config dot feature set dot products dot
01:24:02.740 --> 01:24:06.998 account stored files, dot, enabled whatever it may be. So
01:24:06.998 --> 01:24:11.770 you have access to the full CEF config through this global state
01:24:11.770 --> 01:24:13.826 without needing to actually.
01:24:14.446 --> 01:24:20.438 Uh create a set state variable here where you need to call in
01:24:20.438 --> 01:24:25.656 Seth config, set it and then use you know the actual.
01:24:27.216 --> 01:24:29.676 Variable part of the use state.
01:24:30.866 --> 01:24:31.546 Uh.
01:24:32.966 --> 01:24:34.896 Let me see if we jump in here.
01:24:40.086 --> 01:24:41.676 If we go back to.
01:24:45.636 --> 01:24:53.196 Redux store, so typically with Redux there's slices and.
01:24:54.106 --> 01:24:54.996 Factories.
01:24:58.006 --> 01:25:01.699 The wallet slice. Let me read through this. So create slice
01:25:01.699 --> 01:25:04.776 equals new wallet initial state while it reduces.
01:25:05.536 --> 01:25:08.026 Set wallet state dot walking.
01:25:20.196 --> 01:25:21.936 While it reduce Sarah.
01:25:28.916 --> 01:25:30.946 So set wallet. See maybe?
01:25:36.856 --> 01:25:37.336 OK.
01:25:38.106 --> 01:25:38.986 Yeah. So.
01:25:40.316 --> 01:25:44.406 With the global state you can get data and you can set data.
01:25:46.506 --> 01:25:51.530 The wallet factory will create will actually generate the
01:25:51.530 --> 01:25:52.136 wallet.
01:25:53.966 --> 01:25:57.779 On load and then we'll give you different functions to be able
01:25:57.779 --> 01:26:01.774 to interact with the wallet then there and after. So like you can
01:26:01.774 --> 01:26:05.405 add a wallet entry, you can deactivate a wallet entry, mark
01:26:05.405 --> 01:26:07.826 an entry as default, reload the wallet.
01:26:09.896 --> 01:26:10.606 Umm.
01:26:11.346 --> 01:26:14.856 And then inside the wallet slice with this has is reducers.
01:26:16.356 --> 01:26:19.959 And then you can dispatch different actions to the
01:26:19.959 --> 01:26:24.340 reducer. So if we come here we can see that we're dispatching
01:26:24.340 --> 01:26:28.297 set wallet response data dot result. So what's probably
01:26:28.297 --> 01:26:32.677 happening is they're creating a user wallet entry, passing in
01:26:32.677 --> 01:26:37.058 the data, then our response is coming back from the back end.
01:26:37.058 --> 01:26:41.227 It's dispatching this function to Redux and saying set the
01:26:41.227 --> 01:26:45.183 current wallet as the data that's coming back from this
01:26:45.183 --> 01:26:45.466 API.
01:26:45.786 --> 01:26:48.156 And then that would set it inside the global state.
01:26:50.886 --> 01:26:55.061 I know that that's probably not the best description, but that
01:26:55.061 --> 01:26:59.104 is how Redux kind of works. It'll give you that global state
01:26:59.104 --> 01:27:03.345 variable so you can access like, yeah, wallet, set config. Just
01:27:03.345 --> 01:27:05.466 kind of throughout the platform.
01:27:09.916 --> 01:27:12.206 Umm that reducer?
01:27:11.536 --> 01:27:12.286 That word.
01:27:13.686 --> 01:27:17.051 So at that word slice is that a React keyword or is that just
01:27:17.051 --> 01:27:18.896 like a clarity naming convention?
01:27:19.736 --> 01:27:25.201 That's a React keyword, UM, we recently moved to slices and I
01:27:22.116 --> 01:27:22.466 And.
01:27:25.201 --> 01:27:30.402 forget what the other actual name we were using prior, but
01:27:30.402 --> 01:27:35.956 this is kind of the newer React version, so slice is typically
01:27:35.956 --> 01:27:37.366 used with Redux.
01:27:38.376 --> 01:27:38.856 OK.
01:27:41.906 --> 01:27:45.651 But essentially it gives you, yeah, global state, global
01:27:45.651 --> 01:27:49.725 setters, global getters in ways to interact with those global
01:27:49.725 --> 01:27:50.776 state variables.
01:27:56.426 --> 01:28:01.324 OK. Yeah. The portion of Redux code that relates to a specific
01:28:01.324 --> 01:28:05.056 set of data and actions within the store state.
01:28:07.166 --> 01:28:09.296 For this slice, that's the definition.
01:28:09.626 --> 01:28:10.226 Yeah.
01:28:10.846 --> 01:28:12.606 Yeah, that sounds about right.
01:28:27.726 --> 01:28:32.156 Full 10 did you wanna look at that signal R piece?
01:28:33.096 --> 01:28:35.721 Which I guess is probably still kind of front end. I know we've
01:28:35.721 --> 01:28:36.706 only got 2 minutes left.
01:28:39.176 --> 01:28:41.076 Yeah, we sure can.
01:28:45.566 --> 01:28:49.496 And it just a second. So we'll we're gonna. I got to after this
01:28:49.496 --> 01:28:53.365 rebuilds. I gotta run the front end T4S real quick for this PR
01:28:53.365 --> 01:28:57.110 that I pushed up, I forgot to run them again after I changed
01:28:57.110 --> 01:28:57.356 the.
01:28:58.476 --> 01:29:00.636 The DTO from front end.
01:29:01.366 --> 01:29:03.286 So I gotta run the the store front.
01:29:04.746 --> 01:29:05.186 Ohh.
01:29:05.386 --> 01:29:05.816 OK.
01:29:07.676 --> 01:29:12.134 They for real quick and then we'll add the and then anybody
01:29:12.134 --> 01:29:14.066 can bounce of course that.
01:29:15.496 --> 01:29:16.206 Wants to.
01:29:18.886 --> 01:29:19.346 Sure.
01:29:20.646 --> 01:29:22.106 This is for.
01:29:22.876 --> 01:29:23.556 PCs.
01:29:23.456 --> 01:29:24.496 The ECS.
01:29:25.236 --> 01:29:29.240 Yes, this is what Jeremy was talking about doing yesterday
01:29:29.240 --> 01:29:29.986 with David.
01:29:31.666 --> 01:29:34.606 I just hadn't tried to get on and use any of the bidding yet
01:29:34.606 --> 01:29:37.257 on the front end I was just testing. I've been testing
01:29:37.257 --> 01:29:38.366 everything and postman.
01:29:39.076 --> 01:29:39.416 Umm.
01:29:40.676 --> 01:29:41.586 Excuse me, Josh.
01:29:42.636 --> 01:29:46.096 But I need, like you said, it's important to have a matching
01:29:46.096 --> 01:29:49.726 front end. I'm so I can test the other stuff and we'll have to.
01:29:50.456 --> 01:29:53.356 You know, add everything manually in the database. I'll
01:29:53.356 --> 01:29:54.806 speed things up for someone.
01:29:58.436 --> 01:29:59.576 Alright, let's see.
01:30:00.296 --> 01:30:03.246 Should be good. Yeah, let's run this.
01:30:05.636 --> 01:30:06.986 A custom tool.
01:30:08.546 --> 01:30:11.866 You know, looks here's PCs PCs.
01:30:13.946 --> 01:30:14.366 Maybe.
01:30:15.726 --> 01:30:16.196 Nothing.
01:30:20.566 --> 01:30:23.646 Are you just trying to set up the the portal itself?
01:30:27.306 --> 01:30:31.286 I think he's trying to publish and connect to signal R.
01:30:31.886 --> 01:30:36.470 OK, at least for me it was pretty. It was not like bend, it
01:30:36.470 --> 01:30:37.616 just worked so.
01:30:37.676 --> 01:30:39.326 Yeah, yeah, sure.
01:30:38.646 --> 01:30:39.266 Uh, yeah.
01:30:43.066 --> 01:30:46.976 So yeah, all I really had to do is obviously build it and then
01:30:46.976 --> 01:30:50.762 publish it to the root folder and add that app pool and that
01:30:50.762 --> 01:30:52.686 application and it just worked.
01:30:54.456 --> 01:30:55.266 That's pretty neat.
01:30:55.016 --> 01:30:55.306 So.
01:30:56.306 --> 01:30:59.566 Signal R is like a websockets thing, right? So it's not.
01:30:56.456 --> 01:30:57.036 Surgery.
01:31:00.266 --> 01:31:04.059 Like react words manipulating the Dom, it's doing what sending
01:31:04.059 --> 01:31:05.986 an update to all the clients or.
01:31:06.576 --> 01:31:08.456 What is it doing actually OK.
01:31:07.016 --> 01:31:07.466 Yeah.
01:31:08.166 --> 01:31:08.526 Yeah.
01:31:08.176 --> 01:31:08.496 Mm-hmm.
01:31:09.316 --> 01:31:09.526 Cool.
01:31:09.586 --> 01:31:13.426 He broadcasts messages to to clients, yeah.
01:31:10.746 --> 01:31:13.146 Broadcasts. Yeah, all.
01:31:12.696 --> 01:31:13.096 OK.
01:31:13.966 --> 01:31:15.676 All. Uh, what's it called?
01:31:14.256 --> 01:31:16.717 That way, like the client doesn't have to have like
01:31:16.717 --> 01:31:19.556 something on a loop asking constantly signal, I can just be
01:31:19.116 --> 01:31:19.586 Yeah.
01:31:19.556 --> 01:31:22.016 the one sending the messages instead of the client.
01:31:20.536 --> 01:31:24.421 So it's like a pub sub service, right? Like a publisher
01:31:24.206 --> 01:31:24.576 Yeah.
01:31:24.421 --> 01:31:26.156 subscriber service, yeah.
01:31:26.266 --> 01:31:26.506 Umm.
01:31:28.036 --> 01:31:29.066 That's the way I look at it.
01:31:31.546 --> 01:31:32.206 Our eyes.
01:31:34.156 --> 01:31:35.546 No, I don't want to do that.
01:31:37.166 --> 01:31:39.456 I am good to go here.
01:31:43.336 --> 01:31:44.226 Just stone.
01:31:45.586 --> 01:31:51.169 Yep, what I would start by doing is do you have all the app
01:31:51.169 --> 01:31:57.310 settings in the the PCs channel? There should be a pinned message
01:31:57.310 --> 01:32:00.846 with all the stuff that you gotta do.
01:31:58.886 --> 01:31:59.236 Sure.
01:32:01.876 --> 01:32:03.086 She is she.
01:32:03.126 --> 01:32:04.066 To get it up and running.
01:32:05.366 --> 01:32:07.186 You know, I would just do all that first.
01:32:08.526 --> 01:32:09.336 OK.
01:32:12.186 --> 01:32:14.346 Where do you see pinned messages that?
01:32:16.466 --> 01:32:19.236 Well, go to that that chat so.
01:32:19.206 --> 01:32:22.156 Ohh sorry I was in the teams channel.
01:32:25.696 --> 01:32:26.546 Here's the chat.
01:32:26.146 --> 01:32:27.806 Right up, right up the top.
01:32:28.766 --> 01:32:29.176 Let me.
01:32:33.426 --> 01:32:34.036 Ah.
01:32:34.696 --> 01:32:36.706 So add these to the client.
01:32:42.116 --> 01:32:45.286 And just before I drop just just as an aside.
01:32:46.016 --> 01:32:48.533 I didn't even have to do this because I didn't copy the QA
01:32:48.533 --> 01:32:48.746 apps.
01:32:50.346 --> 01:32:53.520 So it's always. That's why it's always good. You're like, hey,
01:32:53.520 --> 01:32:56.492 why is this not working? Why does this look different from
01:32:54.766 --> 01:32:55.126 Yeah.
01:32:56.136 --> 01:32:56.426 Yeah.
01:32:56.492 --> 01:32:59.515 QA? Like 90% of the time it's gonna be your app settings or
01:32:56.956 --> 01:32:57.666 Ohh that's.
01:32:59.515 --> 01:33:00.976 the data in your database so.
01:33:02.386 --> 01:33:02.926 Yeah.
01:33:03.636 --> 01:33:04.266 Yeah.
01:33:05.516 --> 01:33:06.086 Wrong.
01:33:08.656 --> 01:33:09.416 Wrong window.
01:33:10.396 --> 01:33:13.666 Had this too, I think that's already in my.
01:33:15.556 --> 01:33:16.326 Could be wrong.
01:33:17.886 --> 01:33:18.686 That would be.
01:33:18.146 --> 01:33:20.786 Of a lot. I do have it, yes.
01:33:20.956 --> 01:33:21.886 OK, cool.
01:33:22.016 --> 01:33:25.356 And then there's a couple of rolls. Is that correct?
01:33:26.706 --> 01:33:27.066 Thank you.
01:33:26.866 --> 01:33:28.816 I mean the roles are for managing.
01:33:29.516 --> 01:33:31.906 In accessing the lots in the back end. So I guess you don't
01:33:31.906 --> 01:33:34.337 need to add those right the second you could probably do the
01:33:34.176 --> 01:33:36.766 OK. Yeah, I think I've already added.
01:33:34.337 --> 01:33:34.536 math.
01:33:40.876 --> 01:33:45.092 See, I go ahead and right click the signal R project and then
01:33:45.092 --> 01:33:46.656 we're gonna publish it.
01:33:52.096 --> 01:33:53.966 React signal or reactor?
01:33:52.356 --> 01:33:52.806 Core.
01:33:53.806 --> 01:33:54.536 A signal our.
01:33:56.466 --> 01:33:58.716 OK, so we published the core project.
01:33:59.306 --> 01:33:59.586 Yep.
01:34:03.076 --> 01:34:04.896 The folder, yeah.
01:34:03.436 --> 01:34:03.906 Folder.
01:34:08.746 --> 01:34:14.639 Yeah, I always. I always put it to like 07 portal signalr slash
01:34:09.026 --> 01:34:09.366 Is that?
01:34:14.639 --> 01:34:15.376 publish.
01:34:18.026 --> 01:34:18.246 Right.
01:34:27.336 --> 01:34:27.866 That's weird.
01:34:28.656 --> 01:34:32.176 That's super weird. I don't know why, so it would be.
01:34:34.066 --> 01:34:34.896 See.
01:34:41.116 --> 01:34:43.106 Project.
01:34:44.046 --> 01:34:46.516 Yes, Seth.
01:34:47.966 --> 01:34:50.096 7 portals.
01:34:51.856 --> 01:34:53.336 And then what did you say? I'm sorry.
01:34:55.766 --> 01:35:01.036 I think it's 07 portal slash signal R slash publish.
01:35:02.446 --> 01:35:03.366 Believe.
01:35:04.496 --> 01:35:08.946 Let's see. So portal slash signaler.
01:35:11.216 --> 01:35:14.026 Yeah. Yep, slash signalr slash slash.
01:35:15.216 --> 01:35:16.406 I don't know, OK.
01:35:22.216 --> 01:35:25.086 Like here we want to turn this to true.
01:35:22.996 --> 01:35:23.466 Ah.
01:35:26.366 --> 01:35:27.006 I'm just.
01:35:27.056 --> 01:35:32.950 I yeah, I always do. True release. I think it's debug any
01:35:32.950 --> 01:35:33.966 CPU, yeah.
01:35:34.906 --> 01:35:40.046 That six should be fine. I think everything else should be good.
01:35:37.386 --> 01:35:37.796 Yeah.
01:35:40.706 --> 01:35:42.996 Yeah, that should be right here.
01:35:43.926 --> 01:35:44.186 Yep.
01:35:45.396 --> 01:35:47.226 I publish.
01:35:49.206 --> 01:35:54.742 And then you'll need to create an app pool in desktop modules
01:35:54.742 --> 01:35:57.956 that points to that publish folder.
01:35:59.056 --> 01:35:59.396 Right.
01:36:05.156 --> 01:36:06.506 It's this little thing.
01:36:07.426 --> 01:36:12.536 Gonna stop modules clarity commerce. Create a new.
01:36:13.996 --> 01:36:15.696 Virtual or a new application?
01:36:16.336 --> 01:36:17.746 Yeah, yeah. And application.
01:36:18.276 --> 01:36:22.056 Yeah, OK, that's gonna be signal R.
01:36:22.936 --> 01:36:23.236 Yep.
01:36:24.576 --> 01:36:29.186 And the physical path is going. Why? What is going on?
01:36:28.356 --> 01:36:28.856 That's weird.
01:36:31.296 --> 01:36:34.256 Do you need to actually create the app pool though?
01:36:31.556 --> 01:36:32.326 Geez.
01:36:34.876 --> 01:36:36.646 Oh yeah, yeah, I better do.
01:36:37.646 --> 01:36:39.036 Create the apple first.
01:36:39.576 --> 01:36:39.976 It.
01:36:40.866 --> 01:36:41.836 So it's gonna be.
01:36:41.916 --> 01:36:42.446 You.
01:36:43.926 --> 01:36:45.716 PCs.
01:36:53.396 --> 01:36:56.006 And then do signal R like that.
01:36:58.006 --> 01:36:59.786 But not enough bracket.
01:37:01.626 --> 01:37:02.286 That's a great.
01:37:06.156 --> 01:37:06.946 Or is that incorrect?
01:37:17.836 --> 01:37:18.406 That drop.
01:37:19.716 --> 01:37:21.936 No, no, you're good. I think everybody's on mute.
01:37:19.886 --> 01:37:21.846 Oh. So no, no. Yeah.
01:37:22.666 --> 01:37:25.126 Yeah, OK, I I I got it.
01:37:25.976 --> 01:37:26.566 Yeah. OK.
01:37:27.816 --> 01:37:32.186 Here we go. We're going to clarityclient.com, yeah.
01:37:29.446 --> 01:37:31.006 Just follow the naming convention.
01:37:33.496 --> 01:37:35.346 It's been a while since I've made one by hand.
01:37:35.616 --> 01:37:36.106 Right.
01:37:37.836 --> 01:37:41.296 So dot and then it'll be signal R.
01:37:42.486 --> 01:37:45.896 Well, it's that I think Justin disappeared on us.
01:37:47.196 --> 01:37:50.134 Clarityclient.com PCs local thought and then signal. I
01:37:50.134 --> 01:37:51.416 believe that is correct.
01:37:52.576 --> 01:37:59.996 So now let's go to here where I was create the at application.
01:38:00.996 --> 01:38:06.051 And I'm going to select which app Pool that's gonna be PCs
01:38:06.051 --> 01:38:07.336 local signal R.
01:38:08.276 --> 01:38:13.506 Yes, Alias is signal RI guess.
01:38:17.466 --> 01:38:17.956 Uh.
01:38:18.796 --> 01:38:20.586 In the physical path is gonna be.
01:38:22.916 --> 01:38:24.086 No, no, no, no.
01:38:25.306 --> 01:38:26.016 See.
01:38:27.306 --> 01:38:28.046 Data.
01:38:29.036 --> 01:38:32.956 OK, I can tab maybe what is going on now I can't tab.
01:38:37.336 --> 01:38:40.906 Projects PCs.
01:38:45.046 --> 01:38:45.656 Sir.
01:38:48.286 --> 01:38:50.156 We'll 7 portals.
01:38:53.056 --> 01:38:55.896 Uh. Signal R.
01:38:54.076 --> 01:38:54.956 Signal R.
01:38:58.146 --> 01:38:58.916 Publish.
01:39:00.906 --> 01:39:01.856 And took long enough.
01:39:02.846 --> 01:39:03.576 Nice.
01:39:04.676 --> 01:39:05.656 Yeah, there he is.
01:39:06.306 --> 01:39:08.216 Yeah. Sorry, stepped away.
01:39:11.256 --> 01:39:12.516 You're able to preload.
01:39:15.796 --> 01:39:17.366 That will do it.
01:39:19.246 --> 01:39:22.866 I think is that the right naming convention for the application.
01:39:23.426 --> 01:39:24.936 Yes. Yep, that is.
01:39:24.596 --> 01:39:27.576 And then OK, and then let's see if the.
01:39:29.206 --> 01:39:30.226 The apple.
01:39:31.316 --> 01:39:32.156 Probably.
01:39:33.856 --> 01:39:36.546 Stop it and.
01:39:39.116 --> 01:39:39.986 What's next?
01:39:41.016 --> 01:39:43.946 I think that's it. I think you can just start them.
01:39:43.206 --> 01:39:43.626 Ohh.
01:39:45.216 --> 01:39:47.236 OK, no rebuild or nothing.
01:39:46.636 --> 01:39:46.936 Good.
01:39:49.386 --> 01:39:52.399 I don't think you need to rebuild because that that's just
01:39:52.399 --> 01:39:55.566 a published point in the app pool at it, so shouldn't need to
01:39:53.036 --> 01:39:55.236 Yeah. Yeah, right. Yeah, yeah.
01:39:55.566 --> 01:39:56.536 build the back end.
01:39:57.586 --> 01:39:58.086 Gotcha.
01:39:59.256 --> 01:39:59.566 Yeah.
01:39:59.326 --> 01:40:00.286 Let's find out here.
01:40:06.386 --> 01:40:09.986 The typical errors with these are are good old cores errors,
01:40:09.986 --> 01:40:12.406 so let's hope we don't get any of those.
01:40:16.176 --> 01:40:18.946 PCs was pretty pretty straightforward though.
01:40:25.956 --> 01:40:29.391 Oh, I bet I I better do have to build. I don't know if I. Yeah,
01:40:29.391 --> 01:40:32.826 I rebuilt cause. Then I ran the T4. Yeah, so it should be good.
01:40:32.166 --> 01:40:33.866 Yeah. Is that you would just confirm with me?
01:40:34.136 --> 01:40:37.605 Yeah, yeah, half the time. I can't remember if I rebuilt or
01:40:35.576 --> 01:40:36.156 Do you?
01:40:37.605 --> 01:40:37.836 not.
01:40:40.826 --> 01:40:41.566 What would you say?
01:40:42.956 --> 01:40:45.116 I just say, do you have any lots set up?
01:40:45.886 --> 01:40:47.106 Yeah, I got three of them.
01:40:47.336 --> 01:40:47.936 Yeah, cool.
01:40:50.096 --> 01:40:52.976 I don't have my images.
01:40:54.976 --> 01:40:56.516 And got nothing in the console.
01:40:59.896 --> 01:41:01.146 It's still love, man.
01:41:00.516 --> 01:41:00.836 What?
01:41:04.816 --> 01:41:07.603 I don't know if it'll actually hit signal R on this page that
01:41:07.603 --> 01:41:09.176 you may need to go to the catalog.
01:41:10.446 --> 01:41:12.916 Yeah, but it's not the catalogs not come up yet.
01:41:14.316 --> 01:41:16.854 Ohh I I bet I didn't rebuild the front end after bringing. I
01:41:16.854 --> 01:41:18.476 didn't. I gotta rebuild the front end.
01:41:19.606 --> 01:41:21.496 After bringing in QA changes.
01:41:23.146 --> 01:41:26.676 I just pulled for QA and I was doing that fix on the backing,
01:41:26.676 --> 01:41:28.726 but I didn't rebuild the front end.
01:41:31.196 --> 01:41:33.076 There was like 50 some changes.
01:41:34.336 --> 01:41:35.726 I bet that.
01:41:37.546 --> 01:41:38.726 And this is not built.
01:41:47.876 --> 01:41:51.268 I hate sometimes it does this on me and like see, I can't see my
01:41:51.268 --> 01:41:51.946 build folder.
01:41:53.226 --> 01:41:54.296 Go in here.
01:41:53.446 --> 01:41:53.746 Huh.
01:41:56.126 --> 01:41:56.966 PCs.
01:41:57.046 --> 01:41:57.716 Yes.
01:42:00.266 --> 01:42:02.846 Store shrug our pool and store front.
01:42:06.826 --> 01:42:07.496 Yeah.
01:42:09.726 --> 01:42:10.896 Where is the build folder.
01:42:24.706 --> 01:42:25.086 That's.
01:42:29.576 --> 01:42:31.806 Suppose right now shut that long.
01:42:38.426 --> 01:42:39.316 That is traded.
01:42:41.736 --> 01:42:43.596 Permission. What is going on?
01:42:46.076 --> 01:42:46.656 Uh.
01:42:47.556 --> 01:42:48.876 I don't know what.
01:42:49.866 --> 01:42:51.576 But it's gonna help cuts.
01:42:53.416 --> 01:42:54.126 I gotta.
01:42:57.486 --> 01:42:58.446 But in here maybe.
01:43:04.616 --> 01:43:07.726 What's the the error in the console saying?
01:43:08.736 --> 01:43:10.736 Ohh it's it's.
01:43:11.656 --> 01:43:14.026 Operations not permitted copy file.
01:43:15.396 --> 01:43:16.366 And then it says it.
01:43:17.826 --> 01:43:18.986 We try.
01:43:18.026 --> 01:43:20.935 It's always. It's always with brand filters and I just always
01:43:20.935 --> 01:43:23.515 just delete the build and build source folders and and
01:43:23.515 --> 01:43:26.236 rebuilding it builds fine when it does this. But for some
01:43:26.236 --> 01:43:28.066 reason it's not letting me delete the.
01:43:29.496 --> 01:43:33.533 You can maybe instead of trying to delete it, maybe copy that
01:43:33.533 --> 01:43:37.635 that file path and open an admin terminal and then try and NPM
01:43:37.635 --> 01:43:38.286 run build.
01:43:43.796 --> 01:43:46.710 See, I'm trying to call. I tried closing Visual Studio here twice
01:43:46.710 --> 01:43:48.256 and it's like not even responding.
01:43:48.956 --> 01:43:49.476 Hello.
01:43:50.886 --> 01:43:51.716 You know why?
01:44:09.936 --> 01:44:11.876 Yeah, just say the reason is cause.
01:44:12.576 --> 01:44:17.606 The NPM run build and run start deletes the build source.
01:44:19.446 --> 01:44:22.792 And I believe the build folder too, although it doesn't seem
01:44:19.636 --> 01:44:20.066 Yeah.
01:44:21.666 --> 01:44:24.500 It should. It should delete them both. I'm pretty sure, but I
01:44:22.792 --> 01:44:23.066 that.
01:44:24.500 --> 01:44:25.186 could be wrong.
01:44:24.896 --> 01:44:28.063 Yes, is the build might not have been there is it got deleted
01:44:28.063 --> 01:44:29.596 from this but then it stopped.
01:44:31.126 --> 01:44:31.446 Hmm.
01:44:35.846 --> 01:44:38.986 And it was trying to delete the build folder that wasn't there.
01:44:40.216 --> 01:44:40.646 Right.
01:44:48.426 --> 01:44:49.446 It's going now though.
01:44:50.426 --> 01:44:51.156 Building now.
01:44:52.486 --> 01:44:53.526 Give them back up.
01:44:57.536 --> 01:45:00.893 Something you as an add in which it should have been opened in
01:45:00.893 --> 01:45:01.586 admin anyway.
01:45:02.826 --> 01:45:03.476 Those are wrong.
01:45:25.656 --> 01:45:26.126 So.
01:45:27.016 --> 01:45:31.354 For standing up signal R, There's a few apples that you,
01:45:31.354 --> 01:45:35.921 or sorry, a few app settings that you have to add. You have
01:45:35.921 --> 01:45:39.346 to add an app pool and a application and IS.
01:45:40.546 --> 01:45:43.504 And then you just publish the signal R project. They'll
01:45:43.504 --> 01:45:45.036 publish the signal R project.
01:45:45.756 --> 01:45:47.856 Right. Yeah. Yep. It should be a.
01:45:48.676 --> 01:45:48.996 OK.
01:45:52.706 --> 01:45:53.796 Let's see if this is done.
01:45:55.386 --> 01:45:55.866 Wrong.
01:45:57.126 --> 01:45:59.786 Wrong. Wrong, wrong turn.
01:46:01.276 --> 01:46:04.346 Striker, knowing that where? Ohh yeah, that's the right terminal.
01:46:05.946 --> 01:46:08.706 Yeah. So the build is done there. So let me do.
01:46:15.126 --> 01:46:16.326 I didn't have the.
01:46:19.076 --> 01:46:20.996 Dev Server running a minute ago either.
01:46:21.836 --> 01:46:22.136 Mm-hmm.
01:46:22.786 --> 01:46:24.816 When we were and I was trying to.
01:46:25.826 --> 01:46:28.836 Load up the front end. I forgot to start the disks or.
01:46:27.826 --> 01:46:28.206 Umm.
01:46:32.306 --> 01:46:32.976 That will do it.
01:46:41.376 --> 01:46:42.346 Anything this time.
01:47:15.056 --> 01:47:15.456 Sure.
01:47:28.386 --> 01:47:29.436 We have.
01:47:31.866 --> 01:47:32.736 Issue.
01:47:35.756 --> 01:47:39.688 Signal R connection error error failed to negotiate connection
01:47:39.688 --> 01:47:40.686 with the server.
01:47:49.426 --> 01:47:50.706 The scroll up to the top.
01:47:56.536 --> 01:47:58.126 That's the first error.
01:48:00.246 --> 01:48:01.406 What does it matter?
01:48:03.956 --> 01:48:08.227 You're looking to use a base name, not pages. Your oil path
01:48:08.227 --> 01:48:12.427 does not begin with the base name. Expect it forward Slash
01:48:12.427 --> 01:48:12.996 catalog.
01:48:15.436 --> 01:48:15.976 What's that?
01:48:21.226 --> 01:48:22.016 Images.
01:48:24.346 --> 01:48:25.596 Hello. Strike here.
01:48:27.096 --> 01:48:27.936 Oh shoot.
01:48:29.456 --> 01:48:31.866 You mean the high there were open in the new tab?
01:48:34.086 --> 01:48:37.676 Think David was running into the same error.
01:48:39.106 --> 01:48:42.738 Failed to start and then it says failed to complete negotiation
01:48:42.738 --> 01:48:43.646 with the server.
01:48:49.676 --> 01:48:51.316 Or hubs negotiating.
01:48:53.736 --> 01:48:56.093 Could there be like an app setting or something that's
01:48:56.093 --> 01:48:56.736 pointed to the?
01:48:57.426 --> 01:49:00.926 Incorrect address for your signal our server.
01:49:04.116 --> 01:49:09.039 I don't know. I Tim, if you can maybe get an image of that out
01:49:09.039 --> 01:49:13.728 to David or real quick, I I believe ran into the exact same
01:49:11.906 --> 01:49:12.336 OK.
01:49:13.728 --> 01:49:15.056 one you can just.
01:49:16.136 --> 01:49:19.111 For the attack me in there and just say hey, Justin thinks here
01:49:19.111 --> 01:49:20.226 maybe she's seeing this.
01:49:21.816 --> 01:49:22.916 Uh.
01:49:25.036 --> 01:49:26.326 HTTP error.
01:50:10.756 --> 01:50:12.116 Supposed to be off work, Justin.
01:50:17.526 --> 01:50:18.256 Would you say Tim?
01:50:18.956 --> 01:50:20.816 I said that, oh, you're supposed to be off work.
01:50:23.336 --> 01:50:24.296 I'd probably get another.
01:50:23.476 --> 01:50:26.556 It's Tony. After five. Yeah. What you doing?
01:50:26.256 --> 01:50:29.456 So that's 10 minutes before I gotta. I gotta bounce.
01:50:30.176 --> 01:50:30.756 Umm.
01:50:30.586 --> 01:50:33.439 Yeah, it's alright man. And make a big deal. I'll get it sorted
01:50:33.439 --> 01:50:34.286 out. Somebody will.
01:50:35.646 --> 01:50:37.216 I've run across this, I'm sure.
01:50:38.156 --> 01:50:43.316 I believe it was David and we looked at together.
01:50:43.366 --> 01:50:44.556 Failed to start.
01:50:51.216 --> 01:50:56.437 Yeah, but I'd say, uh, we're going to break guys, it's 520.
01:50:56.437 --> 01:50:58.526 It's the weekend, right?