| Topic | Presenter | Summary | Duration | Tags | Certification Quiz | Captions |
| ----------------------------- | ------------- | ---------------------------------------------------------------------------- | -------- | ---------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- |
| Cross-Origin Resource Sharing | Chris Reddick | Overview of CORS, or Cross Origin Resource Sharing; AKA "Headless eCommerce" | 30:52 | #DevTrainings, #CORS, #FridayTrainings, | N/A | CORS_AutoGeneratedCaption.txt |00:00:01.160 --> 00:00:06.022 - Is it going Chris? What what can you tell me about? 00:00:06.030 --> 00:00:09.230 - Shouldn't do, but I believe, uh, so cores, uhm, I'm 00:00:09.230 --> 00:00:12.750 - actually just gonna let you guys read here for a second. 00:00:14.060 --> 00:00:15.940 - And look at the picture. 00:00:20.960 --> 00:00:26.560 - So this line right here is probably one of the 00:00:26.560 --> 00:00:28.800 - most concise way page. 00:00:31.670 --> 00:00:37.313 - So the idea is basically that you tell your browser that. 00:00:38.670 --> 00:00:44.013 - It's OK to trust a resource from a different domain or sub name, 00:00:44.013 --> 00:00:49.356 - and in our case is most of the time it's a different sub 00:00:49.356 --> 00:00:53.466 - domain, but sometimes it's an actual different domain. We use 00:00:53.466 --> 00:00:55.110 - cores alot to handle. 00:00:55.120 --> 00:00:59.782 - The scenario where we want to do what I would refer to as a 00:00:59.782 --> 00:01:04.415 - headless E Commerce. Are you guys all familiar with headless 00:01:04.415 --> 00:01:08.915 - concept? OK, great, thank you um. So the concept behind a more 00:01:08.915 --> 00:01:12.665 - popular phrases, a headless EMS. It's really sounds just sounds 00:01:12.665 --> 00:01:16.790 - complicated. It's like all these JavaScript terms that I heard in 00:01:16.790 --> 00:01:20.915 - the JavaScript raining earlier. OK so anyway. The point is that 00:01:20.915 --> 00:01:24.665 - it's kind of a confusing terminology, but all it is 00:01:24.665 --> 00:01:29.915 - saying is you know how in most VMS is you have to physically go 00:01:29.915 --> 00:01:34.040 - into edit the content like you have to do content editing 00:01:34.040 --> 00:01:38.682 - somewhere. And you set up pages and you put the content on 00:01:38.682 --> 00:01:42.884 - pages. It's like Tide to a page contents idea page. Well, 00:01:42.884 --> 00:01:46.704 - headless content management is like what we have with liquid 00:01:46.704 --> 00:01:50.142 - content. If you guys are familiar with Blues liquid 00:01:50.142 --> 00:01:54.726 - content. If you're not, it's OK. Basically all it does is the 00:01:54.726 --> 00:01:58.928 - content is separated from the pages and the actual TMS itself. 00:01:59.430 --> 00:02:03.590 - OK, so the idea is that your content is capable of living in 00:02:03.590 --> 00:02:07.430 - multiple places, not just the one one page. The one site. So 00:02:07.430 --> 00:02:10.630 - if you think about it from a marketer's perspective, if 00:02:10.630 --> 00:02:14.470 - you're making a headless EMS, why would you do that? Well, if 00:02:14.470 --> 00:02:18.310 - you have a big enterprise and you have 20 websites and you 00:02:18.310 --> 00:02:22.150 - need them all to have the same basic information on them, you 00:02:22.150 --> 00:02:25.990 - might not want to have to repeat putting that content on every 00:02:25.990 --> 00:02:29.670 - single site. OK, so that's the same thing for headless 00:02:29.670 --> 00:02:33.635 - e-commerce. What if you have a set of products that you want to 00:02:33.635 --> 00:02:37.600 - sell on 20 different websites? You don't want to have to make a 00:02:37.600 --> 00:02:40.650 - new E Commerce for every single website that would be. 00:02:40.650 --> 00:02:44.970 - But a lot of people have to do that because the technology 00:02:44.970 --> 00:02:48.210 - doesn't exist. If you're not doing something like headless 00:02:48.210 --> 00:02:51.450 - e-commerce, just sharing the data in the database. Basically, 00:02:51.450 --> 00:02:55.050 - affectively, yeah, it's nothing. It's like cloud, it's like, oh, 00:02:55.050 --> 00:02:58.290 - we're doing cloud computing. It's a freaking server, man. 00:02:58.290 --> 00:03:00.810 - It's in Iraq somewhere. Do not a 00:03:00.810 --> 00:03:05.657 - cloud. You on lunch some stuff into space and now we're doing 00:03:05.657 --> 00:03:06.878 - computing on it. 00:03:06.890 --> 00:03:11.180 - All of that to go back to course. So of course, is really 00:03:11.180 --> 00:03:13.490 - interesting because it's essentially it's. It's not 00:03:13.490 --> 00:03:16.790 - technically what I would refer to as headless e-commerce. The 00:03:16.790 --> 00:03:20.750 - way that we're doing it, but it's kind of a precursor to 00:03:20.750 --> 00:03:24.380 - what's now being referred to as headless headless E Commerce. So 00:03:24.380 --> 00:03:28.340 - what we're doing is we're using angular and let me actually show 00:03:28.340 --> 00:03:30.650 - an example of this in the wild. 00:03:31.320 --> 00:03:33.385 - So I'm on Dev Force One here. 00:03:33.890 --> 00:03:40.208 - And, uh, we're using a clarity client, right? So we set up a. 00:03:41.080 --> 00:03:43.340 - Um, what you call it? 00:03:43.860 --> 00:03:49.996 - What do you call a website? Thank you. We set up a course. 00:03:49.996 --> 00:03:52.828 - We set up a core system. 00:03:52.840 --> 00:03:59.696 - Almost forgot that we set up a course 00:03:59.696 --> 00:04:03.124 - um website for this 00:04:03.124 --> 00:04:07.900 - client an. I'll just kind of point out a couple of things 00:04:07.900 --> 00:04:11.098 - that we did, so it's kind of interesting so you can go to 00:04:11.098 --> 00:04:13.379 - spot see. Say right here. 00:04:13.950 --> 00:04:19.014 - So this is the client's death site and this is a WordPress 00:04:19.014 --> 00:04:23.656 - site. So what we're doing for this client is we're putting. 00:04:23.660 --> 00:04:26.212 - We're putting our ecommerce platform into their already 00:04:26.212 --> 00:04:29.721 - existing site, so they already have a site. Why would they 00:04:29.721 --> 00:04:33.868 - rebuild all of this? Why would we throw all this stuff away and 00:04:33.868 --> 00:04:37.377 - get rid of it and rebuild it? They're comfortable editing with 00:04:37.377 --> 00:04:41.205 - this. They're comfortable using all of this the way that it set 00:04:41.205 --> 00:04:45.671 - up. OK, all they need is to be able to buy things and then 00:04:45.671 --> 00:04:48.861 - integrate that purchasing back to their ERP system. They don't 00:04:48.861 --> 00:04:52.689 - need to change all the marketing content, so enter Kors now. So 00:04:52.689 --> 00:04:53.965 - how do you get? 00:04:54.040 --> 00:04:57.300 - This site here to have advanced E Commerce functionality that 00:04:57.300 --> 00:05:01.212 - actually does all of that. Well, you could you could do some 00:05:01.212 --> 00:05:04.472 - hacking of this database, but then you have to process 00:05:04.472 --> 00:05:07.406 - payments securely and maybe have shipping integration and you 00:05:07.406 --> 00:05:10.992 - start to get very complicated all of a sudden. Now you're 00:05:10.992 --> 00:05:14.578 - building an E Commerce inside of WordPress that you didn't want 00:05:14.578 --> 00:05:18.490 - to have to rebuild from scratch. OK, so the idea behind our 00:05:18.490 --> 00:05:22.076 - korsan what I'm going to loosely call headless E Commerce is. 00:05:22.660 --> 00:05:27.587 - You don't have to do all of the E Commerce wiring from scratch. 00:05:27.587 --> 00:05:31.756 - You can take RE Commerce platform and all of the work 00:05:31.756 --> 00:05:35.167 - that we've done with setting up payment providers, shipping 00:05:35.167 --> 00:05:37.820 - providers, tax calculations, integrations to ERP systems, 00:05:37.820 --> 00:05:41.989 - user dashboard to manage their orders, blah blah blah blah blah 00:05:41.989 --> 00:05:43.884 - blah email, just the database. 00:05:43.890 --> 00:05:48.770 - Well, yeah, it's literally the the application is. 00:05:48.770 --> 00:05:52.400 - APIs and so we can, 00:05:52.400 --> 00:05:59.802 - uh? So the point is that what we did was we took just 00:05:59.802 --> 00:06:03.138 - as a very quick, very quick. 00:06:03.140 --> 00:06:06.390 - Spot test. 00:06:06.390 --> 00:06:12.680 - There. OK, so, uh, we literally took all of their code 00:06:12.680 --> 00:06:15.606 - an grabbed it off of their site. 00:06:16.150 --> 00:06:20.470 - And we're actually going to be pulling this into this WP engine 00:06:20.470 --> 00:06:25.870 - site next, but we set up a site here. 4 cores where you can dump 00:06:25.870 --> 00:06:29.830 - this code into already existing code, so it says in Odienne 00:06:29.830 --> 00:06:34.150 - site. It's not some special, you know, I it's driven thing that 00:06:34.150 --> 00:06:38.470 - we're having to do. This is all running off of JavaScript. Anne, 00:06:38.470 --> 00:06:44.230 - I can show you in the code what we had to add to get this to 00:06:44.230 --> 00:06:46.750 - work. So we added these lines of 00:06:46.750 --> 00:06:51.040 - code. Their their code if your front end are, and you're 00:06:51.040 --> 00:06:54.960 - cringing, definitely agree with you 'cause that's This is some 00:06:54.960 --> 00:06:59.664 - WordPress float going out there, but this is what we added. Now 00:06:59.664 --> 00:07:04.368 - these can all be. These are the default files that were included 00:07:04.368 --> 00:07:07.112 - with our clarity implementation that we had. 00:07:07.120 --> 00:07:11.696 - Let me see if I have this. Is it in there? I don't think it's in 00:07:11.696 --> 00:07:15.700 - there. Let me see if I can find it here. So I'm actually going 00:07:15.700 --> 00:07:19.704 - to show you taking the CSS out of here and I'm just going to 00:07:19.704 --> 00:07:21.706 - see if I can quickly do this. 00:07:22.630 --> 00:07:28.900 - Is this this particular page looks not as good as the. 00:07:28.900 --> 00:07:34.780 - Is the spots he site by default, so we have the CSS from the 00:07:34.780 --> 00:07:39.400 - clarity files and I think that's what's causing that issue. So 00:07:39.400 --> 00:07:41.920 - let me just take those out 00:07:41.920 --> 00:07:44.920 - really fast. Bless you. 00:07:44.920 --> 00:07:47.560 - Also How dare you? 00:07:47.560 --> 00:07:51.478 - So why not? 00:07:51.760 --> 00:07:56.410 - It's not cool man. OK there we go so you can see that looks a 00:07:56.410 --> 00:07:59.510 - little bit better and all the formatting issues just went 00:07:59.510 --> 00:08:01.680 - away. So one of the things with. 00:08:01.680 --> 00:08:05.568 - Uh, using cores, the way that we're using it is we're trying 00:08:05.568 --> 00:08:08.808 - to embed components into the site, and that's really the 00:08:08.808 --> 00:08:13.344 - summary, and all I have to do to do that, technically is bring in 00:08:13.344 --> 00:08:16.584 - the JavaScript files for Seth and then whatever CSS files 00:08:16.584 --> 00:08:19.824 - apply. But functionally I'm just bringing in the JavaScript file, 00:08:19.824 --> 00:08:21.444 - so this is their site. 00:08:21.970 --> 00:08:26.632 - And I put our JavaScript files in there and you can see one of 00:08:26.632 --> 00:08:30.295 - the recent optimizations that we made is we split out our 00:08:30.295 --> 00:08:33.958 - JavaScript files so they're more in numbers, so this looks like 00:08:33.958 --> 00:08:37.288 - it's somewhat complicated, but if you're if you're on the 00:08:37.288 --> 00:08:40.951 - development team, you know that putting code in like this into 00:08:40.951 --> 00:08:45.280 - the head is really, really quick and easy, so I can take a 00:08:45.280 --> 00:08:49.276 - WordPress site, put that code in there, and now this is the 00:08:49.276 --> 00:08:51.274 - powerful part I have access to 00:08:51.274 --> 00:08:56.377 - all of chefs. Directives, so on the angular side, all of the 00:08:56.377 --> 00:09:02.266 - directives that I can use, and I think is called cart. Let me 00:09:02.266 --> 00:09:04.531 - just mini card or something. 00:09:04.550 --> 00:09:08.438 - OK, um, OK. 00:09:08.440 --> 00:09:14.376 - People think you OK there it is. Thank you guys. So the so I 00:09:14.376 --> 00:09:19.464 - appreciate the help. OK so any who these? This is the little 00:09:19.464 --> 00:09:24.128 - card that you see up there, so technically this little cart 00:09:24.128 --> 00:09:28.792 - will update its contents using step and this will store the 00:09:28.792 --> 00:09:33.880 - data in this app database even though it's on the spot. See 00:09:33.880 --> 00:09:37.696 - site kind of cool, right? So it's super powerful. 00:09:37.730 --> 00:09:42.734 - But basically, in order to get this to work securely, we could 00:09:42.734 --> 00:09:48.155 - do a couple of different things. We could say, hey, um, stuff you 00:09:48.155 --> 00:09:53.576 - can allow all of the sites in the world to access your API 00:09:53.576 --> 00:09:54.827 - endpoints this way. 00:09:55.390 --> 00:10:00.499 - So then we could have some sites in Russia or elsewhere and I 00:10:00.499 --> 00:10:05.608 - have to be careful that I make fun of all voice tones and 00:10:05.608 --> 00:10:09.538 - nationalities, and I apologise. So anyways, point being that we 00:10:09.538 --> 00:10:14.254 - don't want to do that, so that's why cores is important. So 00:10:14.254 --> 00:10:17.398 - within our E Commerce application, an within the 00:10:17.398 --> 00:10:21.721 - angular application there are settings and we can tell it we 00:10:21.721 --> 00:10:25.651 - can give it a ********* of sites that have access. 00:10:25.730 --> 00:10:29.708 - To this capability and essentially the idea behind a 00:10:29.708 --> 00:10:33.686 - white list is everything is blocked and less you 00:10:33.686 --> 00:10:39.432 - specifically add it to the list so you can turn the service on 00:10:39.432 --> 00:10:43.624 - and off. Yeah, absolutely. So, um, so that's conceptually what 00:10:43.624 --> 00:10:47.341 - we're talking about with tours Ann. It's really nice 00:10:47.341 --> 00:10:52.297 - capability. I will say that from a CSS perspective. One of the 00:10:52.297 --> 00:10:56.427 - wonderful technical challenges of this is you can see here 00:10:56.427 --> 00:11:01.383 - we're inheriting their CSS files and this is what it's doing with 00:11:01.383 --> 00:11:05.100 - the formatting, which is actually not that bad. Yeah, 00:11:05.100 --> 00:11:10.056 - it's pretty nice, but if you get into some of the other 00:11:10.056 --> 00:11:14.310 - components, like. This one uhm. OK, so, uh, whether that's 00:11:14.310 --> 00:11:20.260 - awesome or not I don't know. But this is this is the car page. 00:11:20.260 --> 00:11:24.510 - Uhm, and will just wait for this to load here. 00:11:24.530 --> 00:11:28.547 - This is using their. This is using our CSS right now, so once 00:11:28.547 --> 00:11:32.255 - it gets done loading you'll see what I'm talking about and then 00:11:32.255 --> 00:11:36.272 - I'm going to take that out and you'll see the difference in the 00:11:36.272 --> 00:11:39.362 - formatting and this is one of the logistical challenges of 00:11:39.362 --> 00:11:43.997 - using cores the way that we have it set up. So let me while we're 00:11:43.997 --> 00:11:47.396 - waiting for that to load, I'm going to comment that you. 00:11:48.060 --> 00:11:51.804 - So of course you need to do this on every single page. 00:11:52.320 --> 00:11:56.368 - That you want something of ours in there. Typically you just. 00:11:56.368 --> 00:12:00.784 - Typically you just put it in the site header, but then within 00:12:00.784 --> 00:12:05.568 - each page, just like you would do with Seth inside of like DNN 00:12:05.568 --> 00:12:09.984 - or whatever you do have to put your components where you want 00:12:09.984 --> 00:12:11.456 - to be sure, but. 00:12:11.470 --> 00:12:14.280 - Like two different or notice. 00:12:14.280 --> 00:12:18.696 - I'm just going. I'm just giving you an example by doing this 00:12:18.696 --> 00:12:20.168 - this way and it's. 00:12:20.180 --> 00:12:24.019 - Killer JS issue because angular all of your CSS is encapsulated 00:12:24.019 --> 00:12:27.509 - to your component itself. So yeah, I mean technically like 00:12:27.509 --> 00:12:32.046 - CSS itself. And this is mostly for the front end and I'll try 00:12:32.046 --> 00:12:35.885 - to make this quick, but CSS itself like technically we can 00:12:35.885 --> 00:12:40.422 - just put some prefixes on it in our problem is solved right? So 00:12:40.422 --> 00:12:43.912 - it's not like it's rocket science, I'm just pointing it 00:12:43.912 --> 00:12:48.449 - out. But this is what it looks like with our styling. And then 00:12:48.449 --> 00:12:50.543 - if I save this bad boy. 00:12:50.550 --> 00:12:54.307 - Uhm, you can see what it looks like with their styling and so 00:12:54.307 --> 00:12:58.064 - it's just something for you to keep in mind so it fixes their 00:12:58.064 --> 00:13:01.532 - header in everything. OK, we have to wait like 12 minutes for 00:13:01.532 --> 00:13:02.688 - this load now again. 00:13:02.700 --> 00:13:06.942 - And then I was gonna ask James if you don't mind pulling up the 00:13:06.942 --> 00:13:10.578 - OR just kind of backs eating me through on the settings for 00:13:10.578 --> 00:13:14.214 - cores with this version and where to go for all those. And 00:13:14.214 --> 00:13:18.759 - this is an DF. Oh, in case you want to just pull it up really 00:13:18.759 --> 00:13:22.395 - fast, either is fine, but you'll see once this loads it's very 00:13:22.395 --> 00:13:24.213 - flat and doesn't have the same 00:13:24.213 --> 00:13:29.350 - formatting. So now getting into the settings for how do you 00:13:29.350 --> 00:13:33.992 - ********* this bad boy up? So the settings are in two 00:13:33.992 --> 00:13:35.680 - different places, correct still? 00:13:35.700 --> 00:13:38.864 - So that's going to be in the 00:13:38.864 --> 00:13:40.160 - settings, right? OK. 00:13:40.810 --> 00:13:45.100 - And I think most of the team has seen this, and just so you know, 00:13:45.100 --> 00:13:48.532 - this is all documented in our wiki, so we can also access 00:13:48.532 --> 00:13:51.964 - there. Is it better for me to open Visual Studio right now? 00:13:51.970 --> 00:13:55.490 - That's it. OK. 00:13:57.460 --> 00:14:02.440 - So basically what we've done inside of our application is 00:14:02.440 --> 00:14:06.424 - heavily focused around IIS settings and essentially IS 00:14:06.424 --> 00:14:11.902 - let's You set values that will. You can ********* four cores. 00:14:12.490 --> 00:14:17.165 - So by default, we've told our application, hey, we don't want 00:14:17.165 --> 00:14:21.840 - anybody using our stuff that isn't on the exact same domain, 00:14:21.840 --> 00:14:27.365 - but if we ********* it, you can make an exception for them. So 00:14:27.365 --> 00:14:32.465 - within IIS itself it has that capability and this is the same 00:14:32.465 --> 00:14:37.140 - for Azure. Azure also has this capability of white listing for 00:14:37.140 --> 00:14:41.390 - cores and so this is just mechanically how we're sending 00:14:41.390 --> 00:14:42.665 - information to IES. 00:14:42.720 --> 00:14:47.964 - And then, uh, also to angular. And there are two separate sets 00:14:47.964 --> 00:14:51.897 - of criteria, so this is mechanically how we're telling. 00:14:53.090 --> 00:14:57.566 - IS in angular to allow us to ********* and let me just 00:14:57.566 --> 00:15:02.042 - explain that for a moment both the browser and the server are 00:15:02.042 --> 00:15:06.891 - set up now. They used to get hacked all the time and so 00:15:06.891 --> 00:15:08.010 - they're like, oh. 00:15:08.040 --> 00:15:11.760 - So now by default everything that tries to do, have you guys 00:15:11.760 --> 00:15:15.170 - heard of cross browser cross site scripting? If you're that a 00:15:15.170 --> 00:15:18.580 - lot of people have probably heard that if you haven't, it's 00:15:18.580 --> 00:15:22.300 - OK. Don't worry about it. The point is that have you guys 00:15:22.300 --> 00:15:23.850 - heard of security hacks on 00:15:23.850 --> 00:15:29.310 - browsers? Yeah, OK, that's one of 'em and it's a bad one. So 00:15:29.310 --> 00:15:33.010 - all the browser people were like, uh, yeah, we're gonna 00:15:33.010 --> 00:15:35.970 - update your browsers automatically now. An one of 00:15:35.970 --> 00:15:40.040 - those things that gets updated as security stuff an long time 00:15:40.040 --> 00:15:44.850 - ago one of them was course an. It's like you can't load stuff 00:15:44.850 --> 00:15:48.550 - from a different domain because that's how people get hacked. 00:15:48.550 --> 00:15:52.990 - It's that's simple, so that's on the browser side, so you can't 00:15:52.990 --> 00:15:57.060 - have a script trying to load something inside of a website 00:15:57.060 --> 00:16:00.770 - domain. And less you explicitly say that located. 00:16:01.270 --> 00:16:03.937 - OK, within JavaScript, that's just fundamentally conceptually. 00:16:03.937 --> 00:16:08.128 - I know this isn't perfect accuracy, but trying to get the 00:16:08.128 --> 00:16:12.319 - idea and then IIS same concept you can't have things loading 00:16:12.319 --> 00:16:16.129 - from a different domain or sub domain from a security 00:16:16.129 --> 00:16:20.320 - perspective for certain types of calls and so blah blah blah 00:16:20.320 --> 00:16:24.130 - blah. Long story short, this is how are mechanically telling 00:16:24.130 --> 00:16:26.035 - both IS in the browser. 00:16:26.660 --> 00:16:30.902 - That hey, for this domain is OK, and so we're going to be going 00:16:30.902 --> 00:16:34.538 - through a couple of files here and it might seem a little 00:16:34.538 --> 00:16:37.871 - confusing. There are several places for IES that we have to 00:16:37.871 --> 00:16:41.507 - tell it that everything is OK and a couple of places for 00:16:41.507 --> 00:16:44.840 - angular within the browser side that we have to tell it 00:16:44.840 --> 00:16:48.476 - everything is OK as well, so that makes sense to everyone. So 00:16:48.476 --> 00:16:52.718 - we're just kind of having to go and tell it like Hey Unlock the 00:16:52.718 --> 00:16:56.051 - front door, unlock the Bolt on the front door, unlocked the 00:16:56.051 --> 00:16:57.869 - foot Bolt on the front door. 00:16:57.930 --> 00:17:01.482 - And open the front door and let's just this person in. I 00:17:01.482 --> 00:17:04.146 - mean, that's kind of conceptually so. OK. So then 00:17:04.146 --> 00:17:07.698 - here is you can see probably well, I was blabbering on you 00:17:07.698 --> 00:17:11.250 - probably read this and saw how it works, so it's pretty easy. 00:17:11.250 --> 00:17:14.506 - You just add whatever domains you need to ********* and you 00:17:14.506 --> 00:17:16.282 - can see that we've got a 00:17:16.282 --> 00:17:20.830 - triplicate here. Um, just if you take lines four through six, you 00:17:20.830 --> 00:17:25.263 - can see that we've got HTTPS HTTP and then just clean, and so 00:17:25.263 --> 00:17:28.673 - that's the pattern that you would follow for every domain 00:17:28.673 --> 00:17:29.696 - that you ask. 00:17:30.320 --> 00:17:33.565 - And if you're not understanding that and you're not on the 00:17:33.565 --> 00:17:36.810 - technical team, it's OK if you didn't understand that you're on 00:17:36.810 --> 00:17:40.790 - the technical team. Maybe not. 00:17:41.070 --> 00:17:43.629 - All right, uhm? 00:17:44.200 --> 00:17:44.630 - Next 00:17:45.950 --> 00:17:49.502 - Can I go to the app 00:17:49.502 --> 00:17:56.278 - settings? OK, so you can see right here 00:17:56.278 --> 00:17:59.774 - we have another one. 00:17:59.780 --> 00:18:02.540 - Yeah one 921. 00:18:04.270 --> 00:18:08.560 - So the API requests origin ********* allows the API to talk 00:18:08.560 --> 00:18:14.410 - to it. If it's from one of those domains at HP or HPS, the cores 00:18:14.410 --> 00:18:18.700 - resource ********* that's on 21 out to the what was originally 00:18:18.700 --> 00:18:20.650 - discussed stores here or stuff. 00:18:20.680 --> 00:18:24.130 - So that the typescript knows what domains allowed to pull 00:18:24.130 --> 00:18:30.780 - stuff from. So if right now I want to go add the JavaScript 00:18:30.780 --> 00:18:36.540 - files to the spot, see WP engine or spot see dev.wpengine.com or 00:18:36.540 --> 00:18:39.970 - whatever. This would throw a bunch of red error messages and 00:18:39.970 --> 00:18:43.204 - say something about cores. If you seek or there's like that 00:18:43.204 --> 00:18:46.732 - it's probably going to be in these files, so just note that 00:18:46.732 --> 00:18:49.966 - when you're setting things up, you can see in this case 00:18:49.966 --> 00:18:53.494 - whichever team members set this up actually took the time to go 00:18:53.494 --> 00:18:56.728 - through and modify these, and make sure that they were correct 00:18:56.728 --> 00:19:00.256 - so that they could be used for this particular domain. But if 00:19:00.256 --> 00:19:03.784 - you see a bunch of cores errors, it's probably because you just 00:19:03.784 --> 00:19:07.018 - hadn't caught one of these settings. But like I said, the 00:19:07.018 --> 00:19:09.076 - person who set this up that are 00:19:09.076 --> 00:19:12.268 - really good jobs. Uh, what you call it? Let's see here. 00:19:12.820 --> 00:19:14.880 - Alright, next sure great. 00:19:15.930 --> 00:19:16.850 - Um? 00:19:20.770 --> 00:19:24.088 - Does that make? 00:19:24.090 --> 00:19:27.408 - Yeah, so then you have to build 00:19:27.408 --> 00:19:32.590 - and then. This falls into always in the server needs it. 00:19:32.590 --> 00:19:37.634 - And you do need copy the three right files into the skin folder 00:19:37.634 --> 00:19:41.902 - so those three files that he's letting right there, you get 00:19:41.902 --> 00:19:46.946 - copied into your skin folder, so this is. If you're using DNN and 00:19:46.946 --> 00:19:50.826 - you're setting up cores with indianen or just using Seven 00:19:50.826 --> 00:19:54.318 - general right? Need to put these in that folder. 00:19:54.340 --> 00:19:58.084 - About right, so where did you guys put these words so you 00:19:58.084 --> 00:20:01.828 - don't? And that's what I was. That's a great question. So for 00:20:01.828 --> 00:20:04.948 - the WordPress site it's not going to apply, but there's 00:20:04.948 --> 00:20:08.692 - probably going to be an HT access rule that we're going to 00:20:08.692 --> 00:20:10.564 - have to turn on for WordPress, 00:20:10.564 --> 00:20:14.222 - WordPress will do. Different than I guess settings now. Keep 00:20:14.222 --> 00:20:20.012 - in mind that you're not going to have to do the same things on to 00:20:20.012 --> 00:20:23.486 - WordPress side necessarily. It depends on what's happening. If 00:20:23.486 --> 00:20:28.118 - we're not running a bunch of API calls, even server. This is 00:20:28.118 --> 00:20:31.978 - because we're running API calls against our server, right? Yeah, 00:20:31.978 --> 00:20:36.610 - so for not running those API calls. The main thing is the 00:20:36.610 --> 00:20:40.856 - browser has to know not too, and we're loading the UI. 00:20:40.890 --> 00:20:48.380 - From Bard OK, so then the UI might be the. 00:20:48.380 --> 00:20:51.108 - Why files need to have those rewrite rules? 00:20:52.170 --> 00:20:57.630 - Hey, look at that and I just I did this really awesome thing. I 00:20:57.630 --> 00:21:01.140 - just totally put the folder in there like that. 00:21:01.160 --> 00:21:05.080 - Actually wait a second, wait, wait, wait, wait, wait, wait, 00:21:05.080 --> 00:21:10.568 - hold on a second. Yeah, 'cause I put the UI in its normal place 00:21:10.568 --> 00:21:12.136 - right? Yeah, so that's. 00:21:13.210 --> 00:21:19.177 - Yes. Do you think if anybody needs to leave at 00:21:19.177 --> 00:21:23.653 - 5:00, do you think they I will only be slightly offended, but 00:21:23.653 --> 00:21:25.518 - not in a personal way? 00:21:25.540 --> 00:21:28.348 - Also play personally. 00:21:28.350 --> 00:21:30.878 - In the singular number. 00:21:30.880 --> 00:21:35.164 - This is just pointing out you're not doing a skin file here, 00:21:35.164 --> 00:21:39.091 - right? Those three files are already gonna be in your bin 00:21:39.091 --> 00:21:41.233 - folder where they need to be. 00:21:41.520 --> 00:21:46.562 - It. This was this was partying. If you have skin folder that's 00:21:46.562 --> 00:21:50.358 - where you need to make sure that they copy that. Now let's talk 00:21:50.358 --> 00:21:53.278 - about the angular side of things. It's the app settings 00:21:53.278 --> 00:21:56.198 - that we modified. Take care of that and it builds. 00:21:56.510 --> 00:21:59.670 - Angular application in the browser is pulling that from the 00:21:59.670 --> 00:22:03.462 - API, which read it from the outside. OK, so we're done now. 00:22:03.480 --> 00:22:08.095 - Well, I mean, obviously like I said, it's very easy to set up 00:22:08.095 --> 00:22:12.000 - our E Commerce platform for cores and you know you should 00:22:12.000 --> 00:22:16.260 - all the domains. Yeah, so that's it. You just have to modify 00:22:16.260 --> 00:22:18.390 - those two files and then build 00:22:18.390 --> 00:22:23.504 - is needed. Most of the client to come to us. They want us to redo 00:22:23.504 --> 00:22:27.222 - their design. Yeah, so we're building a new website is the 00:22:27.222 --> 00:22:30.618 - same time. Love Yourself is already have a really good one. 00:22:30.618 --> 00:22:34.242 - They just want to integrate or something and a lot of times 00:22:34.242 --> 00:22:38.168 - it's easier for us to. From if you think about it from a 00:22:38.168 --> 00:22:41.490 - styling perspective that is kind of a challenge because trying to 00:22:41.490 --> 00:22:44.812 - incorporate the designs very closely, you end up having to do 00:22:44.812 --> 00:22:49.644 - a lot of UI work and then we're trying to do a lot of long term 00:22:49.644 --> 00:22:52.664 - marketing and we believe in the EMS that we use. 00:22:52.710 --> 00:22:57.260 - Only not opposed to other tools, but I mean like if you're going 00:22:57.260 --> 00:22:58.310 - to be great. 00:22:58.320 --> 00:23:02.451 - Do a site that doesn't use bootstrap. Yeah, totally 00:23:02.451 --> 00:23:05.205 - different like responsive framework, so responsive 00:23:05.205 --> 00:23:07.550 - framework. You write all of our 00:23:07.550 --> 00:23:11.844 - differences. Yeah, I mean what we were talking about with 00:23:11.844 --> 00:23:15.980 - prefixing the classes is a great solution to that. Instead of 00:23:15.980 --> 00:23:19.364 - rewriting everything, but ultimately the point is that it 00:23:19.364 --> 00:23:23.500 - would be like saying like we have this really nice Tesla 00:23:23.500 --> 00:23:27.636 - Tesla electric motor and battery set. Why don't you just take 00:23:27.636 --> 00:23:32.900 - this old car and put the stuff on the old car and it's like, 00:23:32.900 --> 00:23:37.788 - well you can do that and it's great in some cases, like in 00:23:37.788 --> 00:23:39.668 - some cases the car is. 00:23:39.750 --> 00:23:43.434 - Really like they don't have a real engine in there anyway, so 00:23:43.434 --> 00:23:46.811 - putting ours in there. There's already cavity for it and it's 00:23:46.811 --> 00:23:48.039 - not a big deal. 00:23:48.060 --> 00:23:52.152 - The bottom line is it just it's from a technical perspective. 00:23:52.152 --> 00:23:55.872 - It's not ideal to not have complete control, an ultimately 00:23:55.872 --> 00:23:58.848 - from a financial perspective, it's from business perspective. 00:23:58.848 --> 00:24:02.568 - It's a log diminishing returns after awhile, because if you 00:24:02.568 --> 00:24:07.032 - don't have the complete control over the UI like we want, it's 00:24:07.032 --> 00:24:10.752 - going to make it more challenging to deal with the 00:24:10.752 --> 00:24:14.472 - rest of the site integration later. It's doable though, as 00:24:14.472 --> 00:24:18.564 - you can see, it's really cool that you can do it. 00:24:18.630 --> 00:24:22.782 - A man is a really powerful capability there. A lot of cases 00:24:22.782 --> 00:24:26.934 - where it makes sense to do that instead of changing what a 00:24:26.934 --> 00:24:31.778 - client already has an. I don't know that we do a great job of 00:24:31.778 --> 00:24:36.276 - conveying that up front, so I do think it's an option that we 00:24:36.276 --> 00:24:40.082 - should at least consider talking about with them. It is also 00:24:40.082 --> 00:24:43.542 - something that can be somewhat cumbersome compared to a typical 00:24:43.542 --> 00:24:47.348 - developer dot process and way of executing on a complete project, 00:24:47.348 --> 00:24:49.078 - especially when you get into 00:24:49.078 --> 00:24:52.610 - more complicated. Capabilities like just think about like a 00:24:52.610 --> 00:24:55.810 - really complicated user dashboard and having all the 00:24:55.810 --> 00:24:59.410 - interaction DUI there. The actual UI components, the way 00:24:59.410 --> 00:25:03.410 - that their site is existing. Their existing site is setup 00:25:03.410 --> 00:25:06.610 - might be fundamentally different and therefore challenging, but 00:25:06.610 --> 00:25:10.210 - that's the primary reason. I mean, there's also just 00:25:10.210 --> 00:25:14.610 - generally it's like, relatively speaking, a lot of the front end 00:25:14.610 --> 00:25:19.410 - cites the client will have may not take that long to just 00:25:19.410 --> 00:25:25.545 - replicate. In our typical TMS, so so pretty much this would be 00:25:25.545 --> 00:25:31.210 - more for not high customization project that already have a good 00:25:31.210 --> 00:25:36.875 - work. Yeah an another scenario, yeah? I mean it's basically a 00:25:36.875 --> 00:25:42.025 - low overhead, low cost but not as granular control without 00:25:42.025 --> 00:25:44.600 - breaking other things. How much 00:25:44.600 --> 00:25:49.804 - right? I mean, ultimately the the benefit can be that if the 00:25:49.804 --> 00:25:53.588 - stylesheet matches on the E Commerce and the UI, then you 00:25:53.588 --> 00:25:57.716 - can deal with that right? And you can prefix the classes in 00:25:57.716 --> 00:26:01.500 - the South side of things so that it doesn't interfere. But 00:26:01.500 --> 00:26:05.628 - technically there's always a lot of gotcha to it because we may 00:26:05.628 --> 00:26:08.724 - not be interfering with their CSS, but they're interfering 00:26:08.724 --> 00:26:13.540 - with ours and we have to deal with that, and so it's just not 00:26:13.540 --> 00:26:18.012 - trivial, but I think there are a lot of good scenarios for like. 00:26:18.050 --> 00:26:21.833 - You have a marketplace and all the stores want to be able. All 00:26:21.833 --> 00:26:25.325 - the sellers want to be able to embed their content on their 00:26:25.325 --> 00:26:27.653 - website. That's a great scenario. Maybe they're paying 00:26:27.653 --> 00:26:31.727 - like $50 a month to be apart of the marketplace and they want to 00:26:31.727 --> 00:26:34.928 - be able to show their products on their own site. That's 00:26:34.928 --> 00:26:37.838 - awesome and they're going to link back to the marketplace, 00:26:37.838 --> 00:26:41.039 - which is going to help the marketplace with organic SCO. If 00:26:41.039 --> 00:26:43.949 - you're not familiar with this concept of linking to a 00:26:43.949 --> 00:26:49.270 - different domain. Um, so just imagine like you run a shop that 00:26:49.270 --> 00:26:54.310 - sells hats. OK, and you want to sell your hats on Amazon? 00:26:55.030 --> 00:26:58.638 - But you already have a website that just says, like lovers 00:26:58.638 --> 00:27:02.902 - hats, and then it has about us, and that's how you know, Bubba 00:27:02.902 --> 00:27:07.166 - and then another one that's like contact us in it. And that's it. 00:27:07.166 --> 00:27:11.102 - That's your website. And then you go out another page to your 00:27:11.102 --> 00:27:15.038 - site and you use cores to embed products and all the products 00:27:15.038 --> 00:27:18.646 - that you uploaded to Amazon. Amazon gives you a little widget 00:27:18.646 --> 00:27:22.910 - that you can put on your product page and now you have Amazon 00:27:22.910 --> 00:27:24.550 - Quality E Commerce on your 00:27:24.550 --> 00:27:27.612 - product page. On Bubbles website, that's what cores 00:27:27.612 --> 00:27:32.643 - allows you to do. OK, same idea with our platform like we can 00:27:32.643 --> 00:27:36.900 - embed our stuff onto whatever site. So somebody is running a 00:27:36.900 --> 00:27:40.383 - marketplace. They can give their sellers components that the 00:27:40.383 --> 00:27:44.640 - sellers can then embed on their websites. That's a really cool 00:27:44.640 --> 00:27:46.188 - use of this technology. 00:27:46.210 --> 00:27:51.310 - But another example is like what we're doing with spot see so. 00:27:51.580 --> 00:27:56.975 - Sorry, uh, do we have any other project that we worked on using 00:27:56.975 --> 00:28:01.125 - course? Yeah, we have several others that have used WordPress 00:28:01.125 --> 00:28:05.690 - and they basically they had a very specific front end team 00:28:05.690 --> 00:28:11.085 - that wanted to use WordPress and so we offered them cores as an 00:28:11.085 --> 00:28:16.065 - option to be able to use that WordPress instance and host it 00:28:16.065 --> 00:28:19.800 - in their own environment and then embed these components. 00:28:20.140 --> 00:28:24.886 - Yeah I yeah. I yeah. So we've had. We've had quite a few and 00:28:24.886 --> 00:28:28.276 - you. I mean, typically you probably won't even notice it. 00:28:28.276 --> 00:28:32.683 - And that's the goal is that you won't have a clue that it's 00:28:32.683 --> 00:28:35.056 - happening unless you're working on the project. 00:28:35.090 --> 00:28:39.705 - It's definitely a little bit of a hassle to get used to, but 00:28:39.705 --> 00:28:44.320 - once you kind of figured out the basics, which we just went over, 00:28:44.320 --> 00:28:48.935 - you kind of get to the core issue. Then it's a lighter topic 00:28:48.935 --> 00:28:52.648 - for you. Conceptually, if you were to set up another WordPress 00:28:52.648 --> 00:28:55.912 - site, you would just have to get that JavaScript snippet go and 00:28:55.912 --> 00:28:59.720 - put it in the code and just make sure it's white listed as a 00:28:59.720 --> 00:29:02.984 - domain that could work and it would work and that's the beauty 00:29:02.984 --> 00:29:06.520 - of it. It's like once you set it up initially with the styling 00:29:06.520 --> 00:29:07.880 - and fix the styling peace. 00:29:08.460 --> 00:29:13.368 - Then you're good and you can. You can really leverage the heck 00:29:13.368 --> 00:29:16.231 - out of your existing infrastructure with this 00:29:16.231 --> 00:29:21.375 - product. All this other stuff that had additional feature is 00:29:21.375 --> 00:29:28.200 - like filtering. Yeah, so if you have spotty shot, a funky shot B 00:29:28.200 --> 00:29:33.975 - that are both running Corps and bring stuff data in you. 00:29:33.990 --> 00:29:37.422 - Product as finding the two specific store in a store record 00:29:37.422 --> 00:29:40.230 - and that's over. Gonna be offended domain and then 00:29:40.230 --> 00:29:43.662 - basically when you go to that website you loaded catalog. It 00:29:43.662 --> 00:29:46.782 - won't show your product unless they're already and find that 00:29:46.782 --> 00:29:50.937 - domain. Through the store so we can have completely separate 00:29:50.937 --> 00:29:54.933 - store catalogs all running off of a single step engine as well. 00:29:54.933 --> 00:29:58.263 - Exceptionally one of the big uses for this was marketplaces 00:29:58.263 --> 00:30:02.259 - and then if you think about it from a higher level, this 00:30:02.259 --> 00:30:06.588 - probably wouldn't be the best way to do like a sass, but you 00:30:06.588 --> 00:30:09.585 - could technically leverage this to offer clients ostasz based 00:30:09.585 --> 00:30:11.250 - version of our E Commerce. 00:30:11.310 --> 00:30:14.874 - Multi tenant we tend to work with clients that really don't 00:30:14.874 --> 00:30:17.790 - want multitenancy like. They don't want their data touching 00:30:17.790 --> 00:30:22.002 - other peoples data. You can talk to some of our team about some 00:30:22.002 --> 00:30:25.890 - of our clients and their data. We have to work in their 00:30:25.890 --> 00:30:29.454 - environment because they don't want any of their data to get 00:30:29.454 --> 00:30:32.370 - out of their environment physically ever like they have 00:30:32.370 --> 00:30:36.258 - to go audit you or they have like a security officer like 00:30:36.258 --> 00:30:38.850 - that's security information officer. I think that's their 00:30:38.850 --> 00:30:43.386 - job is to audit that crap. So it just depends on the client and 00:30:43.386 --> 00:30:45.330 - what level they're at with their 00:30:45.330 --> 00:30:47.870 - enterprise and Hauser. Double the art of lawsuits. 00:30:48.500 --> 00:30:51.434 - But anyway, I could talk forever about it. Thank 00:30:51.434 --> 00:30:52.738 - you guys. Happy Friday.