Making it Easier: Integrating React with Drupal

hi welcome to part 2 of the Aten at home live in our series we're really excited to bring these to you we're just gonna get started and for anybody who's joining late not to worry we'll be recording this webinar and sharing the recording later I'm just going to just sit help sit at the table before passing the passing the baton over to Brant so let me just quickly share my screen and get started sweet just a quick note if anybody's having trouble seeing my screen and they are they're seeing it as a little icon on their on their desk just click that little icon it should go full screen for you on the zoom and if you're having any technical difficulties please feel free to use the chat and I'll help as Brent goes through his talk just a quick a quick note about me my name is Joe Crespo I'm director of accounts here at Acton design group I've been building websites for about 20 years started as a graphic designer pivoted to web development became a project manager and now I do business development for at I've been working with atman for about seven years patents been around for 20 we're full service digital agency we provide strategy design and development for mission driven organizations we have a very simple founding principle that we employ on all of our projects and that is some stories just need to be heard and our job as a digital agency is to help amplify our clients voice and so they can come up to the noise and connect meaningfully with their audiences and after 20 years afterwards with some of the most amazing mission driven organization in the world we believe we do our best work when we're doing work that matters okay that is everything I have for in terms of introductions and then the pass this over to Brent but before Brent before you take over I just want to say again there's a QA icon at the bottom of your zoom window if you click that and ask any questions it'll come right to me and I'll be sure to put those questions to Brent at the end of his presentation great so without further ado when I stopped sharing my screen and branched this is uh all you awesome thanks Joe and let me share my screen [Music] welcome to my webinar and like Joe mentioned my name is Brent Robbins and I'm a front-end developer attan and today I'd like to show you an easy way to integrate your react apps in your Drupal site and when I say react I'm referring to any JavaScript or library react is just the main JavaScript library we use here at Adhan also apps that I'm referring to those are the ones that can be integrated in a Drupal page this is known as a progressive decoupled versus a react app that requires an entire page and also requires routes that would be a fully decoupled app and typically those are hosted on a separate site the there are many ways to add react apps to Drupal but I wanted to find a module that could do a bit of the work for me and also add some extra functionality before we begin I'd like to ask you guys a few questions to get to know everyone's background so Joe if you wouldn't mind helping me run the polls the first question is what is your Drupal skill level so beginner intermediate or expert and we're just waiting for one or two more holdouts okay let's see the results so most of you guys are intermediate but we have a few experts and novice and some people without any experience that's great next question is what is your react to skill level so either a beginner intermediate or expert and the other thing to note while answering these questions I've designed this webinar to work for most beginner level users but also included some useful information for an intermediate to advanced users okay results are in and most of us are intermediate or novice okay that's awesome and the third question is have you ever integrated react with a Drupal site and specifically progressively decoupled so the Act they app would need to be within the page and not a fully decoupled app okay so most of you are not familiar yet with integrating it but we have a few that have and said that it's challenging and then finally I mean it's the last question if you have please let me know your experience so it was either easy with no problems it was okay but challenging or you haven't yet and results so majority haven't yet but then a few have but it's challenging okay so let's close the polls now so now that we have a better understanding of everyone's skill level let's take a look how it's done this webinar isn't a slide driven presentation but more of a screen sharing tutorial watching me highlight this useful module and how you can use it in your next project also to save everyone time everything has been set up in advance so you don't have to spend the time watching the super exciting process of me downloading and enabling a module or downloading node packages or clearing cache so let me close that out and let's move on to screen sharing okay so Oh apartment I have a request that you mind just turning off your video yep yeah yeah yeah I was gonna thanks for reminding me okay so introducing the jeaious component module this module can be found by visiting drupal.org ford slash project /j s underscore component the module was created by travis fellow developer here at Adhan and I've personally used the module on client projects and found it easy to set up and very useful I was first introduced to this module last year when working on the new Commonwealth Fund website the challenge was to make it easy for the Commonwealth Fund to add react apps to pages that we developed for them but also required it was required for us to give them the ability to specify which type of chart to show and also give them the ability to customize some settings and an another feature they would like the ability to add multiple react apps per page so this is the home page and you can see we're using J's component and the settings like what initial races to the view and even the areas the client has the ability to set that up and this is a indicator page and you can see here we have four different react apps on one page using Jayant but they're actually all the same react app and when using J's component we can pass down the appropriate settings to show a specific chart at worse end settings let's go back to the let's actually go to the demo this is in this webinar I'm going to be showing you the simple steps that you need to follow to add J's component and add your react apps to your site we're gonna be using this demo site that essentially just has J's component added to it there's nothing nothing fancy it's not a very attractive site but it proves the point on how easy it is to leverage J's component and add your react apps to your site let's head back to Travis's module page so this is the J's component module page again and this module gives you the ability I'm gonna zoom in so you can read this a little bit easier so this module gives you the ability to add react app or any other JavaScript app to your Drupal 8 site using the libraries directive this is where you define the component or components for multiple apps which which includes the JavaScript and CSS files for each app hey Bret I'm sorry to interrupt them I'm getting a lot of communication from folks who are in the webinar having a hard time seeing your screen do you mind turning off and turning on your screen sharing just to see if we can go fullscreen automatically for like the people are having difficulty sure I just turn it off and let's try again about now it went fullscreen for me okay hearing I'm hearing good good feedback from people if you're still having trouble seeing it please let me know in the chat okay I'm sorry to interrupt oh yeah no worries we haven't got to like any code or anything but definitely would like for everyone to be able to see the screen okay let me find where I was at okay so like I was mentioning this leverages the library's directive and this is where you define the components for the react apps which includes the JavaScript CSS files and you can see that here in a example that Travis added and it also you can define the route ID and that is where you'd want to mount your react app to the page this gives you the ability to add multiple react apps on a single page by using unique route IDs the J's component you create is added at can be added as a new custom module or added to your site's custom theme on the modules page it gives you an example of the GS component yamo file so this is the the the custom module that you create or when you add this to a theme it's very simple its main it's powered by this dot J s underscore component yamo file and this is a nice fully fleshed out example of what's required so once you set up your J's component you'll be able to add your react app as a block with the react app exposed as a block you can add it using the manage blocks page and layout builder as a paragraph using the paragraphs block module or you can code it directly into a twig file another feature of this module is the ability to create custom settings that are passed down to your react app using the Drupal settings object in the Dom these settings are configurable in the ammo file when you're adding or configuring the block and Drupal's UI you'll see the fields and you'll be able to add or change those values and again in this example you can see right here we have the settings and this is optional you don't have to use settings but we are collecting one one setting and it's using a select and we have a title for a description and these are the options and in the second example we have another just a single setting you can have multiple settings but this setting is for the examples for like the header title and it's a text field and this is the title of the field and the description so some like help text right if you toggle your screen share one more time we're having some other people has been some problems is it that one issue that McKenna said that they have to click on it's a toggle it I'm wondering so there is if you do see a small screen share icon if yours can be watching me yes then I know you're now I can see it also if you're on a Mac just a quick note the zoom screen that's being shared may not be on the desktop that you're using so be sure to swipe left and right to make sure that we're not sharing the screen on a desktop that's out of you again sorry to interrupt no no worries yeah um yeah can everyone just let Jo know if you can see it because it is important obviously to be able to see the screen okay so let's see where were we at so next we'll go we'll cover how to install the module and set it up and let's head on over to vs code and obviously you can use any code editor and any terminal doesn't matter it's just a little easier to share everything in one using vs code to install the module you can just follow the typical steps that you would install any Drupal module on a on a site and then just enable it it's there's nothing special that you need to do for this demo I have already gone ahead and I have downloaded it and enabled it and so in the modules folder in contribu can see I have J's component added and the module doesn't include a UI so you the only way to leverage the module is by creating your own J's component by adding it to your custom theme or adding it to a custom module now that we have J's component ready I'll first demonstrate how to use this module by creating a simple custom module to get started creating your own custom module I just added a new directory to modules forward slash custom and I titled it Jess underscore component underscore example and you can see that here within this directory we have two files that are required we have the the dot info file and we have the GS underscore component amo file so sorry JJ s underscore yeah component gamma file the these two files are setup the first one is the dot info file and this is this essentially stores the metadata for the custom module just like any module in Drupal it what you see is essentially just boilerplate there isn't anything special or unique added here we just have to make sure we add the dependency to J's component and the you can give it a unique title and a description so that's just the main things to be aware of when creating the dot info file for the custom module so pretty simple then the second file that's required is the gist component yamo file so let's open that up and you can see I'm following the stupid typical Drupal module convention where the name of the module is being used for the dot info file and for my dot JISC underscore component demo file so that's why I named him that so let's open up the chase the J's component you know file where everything's set up so in this yamo file i have two example sorry two component set up I have a and their they I they have identifiers so we have a component underscore one and component underscore two and I've added a label a description a unique route ID and then this is the libraries directive so this is where you define the JavaScript and see Zess files and and then my second component I have the same thing I have react a second react app and it's using a different ID and the reason behind that is so I can add it to the I can add it to the same page which is pretty cool and the so I have the component set up and and the nice thing is with the J component module in if we look at that module in the readme just like you saw on the modules page we can see an example of the yamo file so you could literally just like copy this and paste that into your J's component yamo file and the the settings aren't required I've added settings in my second example but in this first example component it's just the the basics essentially so it's nice to have all this component these components set up but of course we need to have apps to power them and all those apps are organized in a components directory that isn't required you can organize it however you like I could have had the react app and react app to in the root of my custom module directory it's just a little bit more tidy if I added in a components directory so that's just that's optional these to react apps to create a quick demo I chose that the tool create react app and and that just allows me to create a quick and dirty just simple react app and it is a fairly common method however there are other ways to create react apps obviously using just web pack or parcel in and even other way - but I wanted to use create react apps since it's fairly common and there's some tweaks that you need to be aware of to make this work well with this J's component setup and so let's hop into one of these react apps so we have this the first one is just react - app and scaffold it with create react app tool nothing out of the ordinary here but the first thing you should be aware of when using create react app is it assumes that you're running the app in the root of your site and since it's doing that are assuming that and your apps are obviously not on the root of your site the files aren't even if you're showing the app on the home page your files your build files aren't located there you need to specify where that home page is and to do so in the package.json file you just need to add home page the home page and so you can see here I've already done that and so this is you know from the root of your Drupal site the location of the bill directory and that's what you want to update and again create react type out-of-the-box assumes that this build directory is sitting at the root of your site and it isn't so we need to add this line right here and so now this correctly points to this build directory file and if you didn't update that they any files referenced like images they wouldn't load another thing you might want to change in your react app is the dot git ignore file that's added with create rack app and let's open that up by default the bill directory is being ignored and unless you have a continual integration step or process or you're manually going into the server and building your app on the server without this bill directory they're not your react app isn't gonna the build files for your act app they're not going to live on your live site obviously we're you know using version control so out of the box create react app is ignoring that build directory and that's fine like I mentioned if you have some integration step or if you're manually building it but for like the most simple sites you you probably aren't and it probably is okay just to comment this out or delete it and then just allow the build files to be added to your version control so that's one thing to note because like this would work locally but then once you push this to your server you wouldn't be able to see your react app next let's run the let's run npm run start so it's just demo the app really quick so you can see it running so the first thing we should do is in the terminal let's let's go to this path so so we're inside the the directory of that that that particular react app so let's just do MPM run start just a demo the app locally and this is always a good idea and let's move back to the browser and I'll push this over here okay so you can see the crate racked up so nothing you know different or out of the ordinary with any create react up I just kind of I think I updated some text and that's about it so that's just a good idea to test the app first locally before you start adding it to Drupal so you want to make sure it works here the other thing to note is when you updated the homepage with this little local server that NPM runs start is using it it'll also mirror that path here so you just want to make sure everything's working and you're in your react app and then you can so we're just gonna kill the server with ctrl C and then after after we've tested made sure made sure everything's running right now we can generate the build files so to do so you would run NPM run build and then once you've done that it'll just create all of the the files JavaScript files HTML files CSS files and add it into this build directory and so let's minimize this so we can get a little bit more real estate here so in the build directory when you open that up the first thing you want to do is probably check out where all your CSS and JavaScript files are and that is generated in this directory called static so we have the CSS directory and all of your files are created here and they have this randomly generated string here and and that's what I'm referencing with my my yamo file so let's just quickly open that back up so that's that's the the file name that I'm referencing out-of-the-box create rack tap creates these files with this randomly generated string here to identify when it's been updated and so we have it done for the CSS we've done it are it adds it for the chunk file which that is rack Dom and also the main which the main main is so this one main is your actual your custom react code in here in this file and then finally this runtime main with the random generated string this is just the this is react the react library like all of it right here which is nice and if you don't know what's being used or referenced when you view your app or use your react app trick is to just go to index.html and this is all that's necessary to run your react app and here we can ignore some of these files that are being referenced like the favicons obviously we're gonna be since we're adding it to Drupal it's gonna be using Drupal favicon we don't need a few of these other things but what we do need is where it starts with your CSS file so right here this kind of is a nice little cheat sheet to tell you what files that you need to run your app so we have our CSS file and for the index for the index file it doesn't add the JavaScript library as a file but it adds that in this script right here so all of this is in what's added to that runtime which is it's good to know because the file isn't being referenced so you wouldn't you might not necessarily know that but this is the react framework and then the second file is react Dom and the last one is your custom react script it this will very you know if you change and build out your reactor this is just out of the box this is just what it looks like so let's open up the directory so we can see everything so once you know what CSS files and JavaScript files are necessary for your particular app you'd go back to the gist component Yama file and you would paste in the the appropriate location so like theoretically let's say you copied and pasted from Travis's the the readme example for J's component and then from here you would want to replace obviously the location and the the file name because the random string might be different so you would update that and when you're referencing the file you would you would start with where it's located in the custom module and then within the subdirectory so you start here you wouldn't start at the root of the Drupal site so that's important to note so once you've updated the JavaScript and CSS files you should be you should have everything that that's necessary to add this to your to your Drupal site so once that's set up the next step you'll want to do is is add this to your Drupal site but but before that we get into that one thing I want to highlight and as far as like a special cases using create rect writs use me create react app is those randomly generated strings and getting consistent file names to make this whole step easier and what I mean by that is using Create react app whenever you change like let's say you change the version of react this would change react on this would change your CSS this would change and your custom react code you know this string would change in every time you run npm run build you'd have to go in here and update that string and that can be kind of tedious or a pain and so the trick is for that so let's close that let's head back to our react app is in your create react app leverage the post build step in in your npm run are you're sorry your package JSON file and what i mean by that is let's close that let's look at your package JSON after you run in your scripts after you run build if you have a post build step that will be triggered and so to leverage this solution you would add this following line right here so you would add a post build step and this would be auto triggered after the build is done so you don't have to run npm run post build or anything you just do your normal npm run build and this post build script will be triggered and this is a s shell file this are sorry bash file and you would add this post build that Sh file inside your react app and then you would add or actually before you add that since it's a a bash file that you would want to make sure that this file is executable so you would do you would run chmod 755 and then post build sh in this directory so you have to make sure that this is executable and then once that's executable then you would add something like this let's I can zoom in a little bit so how this works is it will look for each line each file the first one is the runtime and the runtime is again that's reacts library file and then it'll copy that and then I'll rename it a consistent name so I want to just use runtime and same thing with main same thing which is rack DOM and then chunk is your your customs rack code and then your CSS file so all of these you can see it'll you know it'll find it with this little asterisk it finds it copies it and renames it for you which is super handy because then after you have this in place then in your going back to the yellow file the J's component yamo file you can now not the info file the ammo file you can use consistent names so then what we would do is just update this instead of every time you update it you would have to update this we can just change it to the consistent name so this would be a runtime this would be just chunk this would be main and if you don't like these names obviously you could name it whatever you like you could call this react call this react Dom and then you could call this my app or something so that's completely up to you but once you run let's run NPM run build again so NPM run build let's zoom out a little bit so it's gonna build your react app as normal but you can see with that post build script it al adds kind of like a little console notification of what it's done and so it's copied that file and then in the same location added a new one that with the same code but with the new name so that's all done for you and then since we've updated that in our component file the next time we update our code in react or update the version of react or any of that that will be just fine and we don't ever have to come back here and you know change those random strings which is super handy so this is the reason why I chose to demo create react up because there are these little gotchas and this isn't just with using J's component this would be with any type of solution you would need something like this to handle it with your Drupal site and connecting your react files so now that we have that in place we can actually add our react app to our site and so let's move over back to the browser and so here's our demo and the first thing you would want to do before you added the block to the page is you would have to go and enable the custom module you've created so you'd go to extend and then you would find your JS component custom file whatever you've named it so I had named it just J's component example and it's already enabled for this demo so you first thing you want to do to make sure that's enabled and then the next thing is so let's go back to the home page so we have one react app already added to our page so let's add another one and specifically let me show you let's add our second component so the second component is is a little different and so let's add that and to do so the easiest way is going to structure block layout and then it's just like any block so there's nothing really different you find the area you want to add the block you can see that there's a J's component RAK block already added here but we're going to add another one to demonstrate that we can actually add multiple react apps to a page and so if I use the search or just scroll down I can see my my react component too so I'm going to place that and since it's just you know a standard block you still have all these visibility settings so I'm going to restrict this to just the front page so front and I'm going to save it and so everything saved so let's go back to the site and we can see our other react app so we have to react apps we have our and I kept the title the block title so you could see so we have our my react component - and the initial one that was already at it so it successfully was able to add to react apps very easily to the page so now that we have that in place let's talk about the GS component settings and so for our first example there aren't any settings which is fine and the second example I included two settings and you can see the settings I've identified them with this like I ID of react underscore theme and this react underscore theme is a select and and then the second one is react title and that's a text field and just to let you know how that works is or if you're ever interested in seeing what other options you have for those fields if you go to the drupal api for elements the form and render elements you can search here and see what type of options you have so you could use a text area so if you wanted a bunch of text you could do that this is our simple text field so a simple string text field and then if we go back the first page has so we have number radios and we have select so if you ever aren't aware of what options you have available you can find that here at API dot drupal.org ford slash api forward slash drupal forward slash elements let's go back to our code so we have our first example that react theme that's using a select I have two options and this is the this is the key so this is the the value that we're going to be receiving that's gonna be sent down to us via the Dom and then this is the label and then we have an empty option and then the second setting that I've added is the react title and this is again this is just a very simple demonstration but just to prove and show you how easy this is to set up and once you see this in action but you might kind of think about some different ways you can leverage this in your reactor but so we have these two settings and we had this setting in that example that we just added I just kind of skipped it really quick so now that we've kind of covered how we can add settings to your GS component let's let's actually just edit this block and I'll show you what it looks like so if you just configure your block and it won't hide it this time we have our J's component setting so we have our rack theme and in the theme I have light or dark so let's pick dark and then I'm just going to give it a title of crate react app component too so there's some text there and I'm gonna save the block and if we scroll down we can see we have now its theme dark and we actually have the title if you quickly just go back and pick the light theme you can see that it has this light theme here and so that's just to kind of show you how easy it is to to set up those component are those settings and Drupal can leverage them let me show you in with inspect how it's passed down so if you open it up inspect and click console and type in let me zoom this in a little bit so window dot so Drupal settings there's some settings that Drupal just passes down but within that this J's component module adds some values and we can see that kind of like being hinted here so if we type settings and you can see underneath the little hint here it shows we have two on this page so we have that react theme in the wrap title so we could just type in react theme dark or light and then react title is the the title that we added so in your react app or a JavaScript app you can just look at the the Dom so window dot exactly this and you can get that value and this doesn't have to be just a string you could put objects in there so you could have some complex content that's being passed down which is really handy or array of values to this is just a really simple example so now you can see like how the react apps get that data so the last way of adding the J's component is using your custom theme so let's hop on over really quick to our code and let's see what how I've set it up and again I've already set it up in advance just to save time so within themes and in custom I have like the world's most simple theme so in the gamify are the dot info file this isn't required for jace compiled just want to show you like this is just a really basic theme and that's you know really don't have to have a complex special theme to to add J's component - you could add this to any theme and really the only thing that we need to do to add J's component to our theme is again add a dot jeaious underscore component demo file so this is the same exact method that we used in the custom module it's just you'd want to name this the the theme name so my demo theme is just the Drupal are sorry react underscore demo so then I just needed label digest component yamo file react underscore demo dot j/s underscore component animal and you can see I've added a third this is our our third component and it has some settings and then the the same type of setup here is being used and I just have one react app in here so in components I just have one little demo react app and I have the same setup where I'm using the post build and i'm using consistent files to make it make it easier for development the other thing that i think i failed to mention is it is important to have these in that same order that you saw in the index.html so you need to run react first react dom and then your react custom code so there's nothing different from from this component file either than I did change the route ID and and one other thing when when you do change the route ID here you do need to update your ID in your actual app so you might forget that so just to remember like once you do customize this and typically react apps are mounted to just route but you change that specifically for create react app you would just go into source and then in the sorry in index GS we have the get element by ID this is where react mounts your right your your app to you would change it here so now it's referencing the right eye I D and then another thing that I like to update is in the bill our Center not in and bill but in public I would update it here as well so when you're testing it if you didn't if you updated it in your in your code but you didn't update it in this public directory then you see it's not updated the test wouldn't work so we just need to update it here then when we run npm run start then it would work so when you're doing your local development you can get your you can see your react app so now let's now that we have our JS component added to our theme let's add it to this separate page so we have this blank page that we need to add of course we need to add a react app too and so same thing just go to structure block layout and then content place block and then we have our react team demo that's what I've titled it you can see it's a J's component and we have settings so we can just throw in some content here and then visibility settings so let's make sure it just shows on that specific page so it's just react so save it and let's head back to the site and refresh and we see our app so great yeah that wraps up my code along tutorial so let's head back to my slide deck so let's go back to that I'm gonna share that so I appreciate your you attending this webinar and I hope you enjoyed getting to know the J's component module there are other ways obviously to add react or any JavaScript app to your Drupal site but I really encourage you to try out this module and I created a recently very recently so if you see anything that needs to be changed please let me know create a PR or just email me but there is this example code repo and inside this repo you have two folders that have a demo for the custom theme and a custom module with a very simple react app demo and of course there's a readme to kind of walk you through how to add it but since you've watched this webinar you know exactly how to do it um so at this time I'd like to open up the floor for any questions awesome so if you don't mind stop sharing your screen turn on your video and I've got this pen a lot of questions coming in as you're talking so I'm gonna start with a question from Salvador how to config out to config from load external react in react nom like yes I'm a different server from the same server you mean it looks like I mean Salvador please forgive me if I'm if I'm butchering the question but is this a question it seems like if it seems like a question of if I have react on a CDN or a third party server how can i how can I load the build files but if you are using a CDN you can use external it's the libraries directive that like the the theme uses or any custom module uses so you can reference external CDN files as well great yeah if you have a follow-up or any other additional questions or unrelated to this please ask them and we'll answer with the time that we have allowed and if if we running out of time we'll follow up directly the next question is we also have on this call on the webinar we have Travis Kafka who is a maintainer of the Jas component module and Travis this might be a question for you this question from a former colleague Peter the J's component yeah Moe seems like it's doing the same work as the library's ya know file besides the custom variables and labels why not use libraries that yeah and Brett if you want to answer that if you wanna take that question feel free or kick it out to Travis from just quickly for me for my sake I I found it easier to organize like there are other tutorials Lola bot has a really good one how to create a custom module uses crates as a block and does pretty much kind of the same thing other than the settings it's just there's a lot of like coding and work that needs to be done to do that versus just leveraging a module that just has it ready for you that was a nice thing like I don't want to spend a ton of time creating a custom module or adding a ton of other boilerplate like a lot of the works done for me and the settings option for for the example for the Commonwealth we heavily relied on that so it was super helpful and and it was really nice to give the flexibility to our client to be able to quickly add react blocks and configure those react blocks to any page and then Travis yeah that's what I mean that's I I think I mean that's only the tactical question from my perspective um particular project with Travis why why I just like it I guess what led you to in this direction to architect the module this way yeah that's a great question um here let me go in I'm trying to something I work here at and I'm a back-end developer so I am a maintainer on the importance module and like the real idea behind why we went with using this type of like plug-in system opposed to just using the libraries is that we're kind of mashing the two up with blocks so there's we have the getting the library from the react application and then being able to define the react application in a block and then get those settings to the react application so that's what the total difference between the two are and I think that's the reason that we chose this approach is more of a mashup cool up Peter if that doesn't answer your question I'm happy to follow up with you afterward good the next question is is a question for you Brent is a is there a post build for Windows the so if I was on a Windows setup because all this has to be run with on node I wonder if that dot SH file would still run on like native Windows but I don't I think more modern Windows development is all used on that Linux subsystem like can remember what it's called but that would work I would assume that would work because this is all I mean Mac is all UNIX ish based and so I think that post build script would work I haven't tested it on Windows I do have one but I haven't tested it on yet but I would assume it would um tracks do you know you know I don't know about that we'll follow up with you on afterward I think where there's a great question I think typically we're using Mac's and and to have a Drupal VM docker setups for for our development is that is that accurate or am I just making things up I can sometimes make things yeah I think almost everyone here that and uses a Mac but I mean it could run and NIC's or UNIX all this this same setup could so and and yeah like I was mentioning like a lot of the development now in Windows people are using that layer of Linux over over over their development great next question is is there and does each component each react component have its own namespace in drupal settings that is if you had two blocks could they each have their own react title i guess that's that was that question came in early so maybe that was answered in this webinar now could each of the each of the reactant does each if you had two blocks in the same page could they have their own title so from what I've seen you would just name I would just name the settings differently I don't think it's named Travis isn't named space yeah I guess yeah it's named space so each component that is um defined in the component JSON file is has a namespace so when you're defining it every setting that you've put into it will be under that particular application so it's namespace in the center that's that as well and it also uses it's a route ID in the divert version so it will go um in case like there's other cases where we wanted to I think it came in the Commonwealth's app where we had different layers I'm like what do we wanted to like switch something at the settings layer oh the type of chart yeah yeah we had like a line in a bar and so I think it was that possibly but yeah we have to have that like what you're mentioning as far as the question goes with the Commonwealth page that has those four react apps because they are the the namespace has to be there because they're leveraging those same values but they're handling them uniquely with that namespace and it's the same app like I was mentioning when I was showing it's just it's the same app repeating it's just using the settings to determine what to show and how to show it hey we are at time for the webinar I want to thank everybody for making time if your question was not answered I will follow up with you directly via email and bring in the folks that need to be brought in I am going to just ask everybody on the webinar to save the date our next webinar is actually going to be me I'm going to be talking about writing RFP so all of you devs on this call if you could tell tell your folks to join the RFP writing a project webinar we can we can make more successful projects for you going forward all of that being said we have recorded this webinar we are really happy to share it we'll be putting it up on YouTube later and posting and posting a link to the YouTube video in the follow-up email to each of you and just a two quick notes one is in the follow-up email there will be a survey we would love to hear your feedback this is a new webinar series for us and we want to improve it going forward and second is we hadn't made a slight schedule change to the webinars going forward rather than running them every two weeks we are going to be running our webinars on the second and fourth Wednesday of the month to make them a little bit more predictable going forward again thank you all for joining us today and we'll see you in two weeks bye bye

Channel: Aten Design

Views: 2,566

Rating: 4.8048782 out of 5

Keywords: drupal, react, website

Id: LBu3zU-ejew

Length: 60min 47sec (3647 seconds)

Published: Wed Apr 29 2020