 All right. So good afternoon, everyone. So what I'm going to present is how to set up a continuous integration with CircleCI and in Rupang using our platform, Panchen. Oh, it's not moving. More about me. I'm Gerald, customer success engineer at Panchen. The most practitioner Drupalista since 2010. Drupal Pilipinas Core member from the Philippines. Yeah, Mabuhay. Hey, next. Okay. So topics. Drupal 8 CI, continuous integration. BDD with B-hat. Composer-managed workflow. Local development with Lando. Panchen and Terminus. Hopefully we can finish this by 5 o'clock. Okay. Oops. So continuous integration. So what is CI actually? So continuous integration is a development practice that requires developers to integrate code into shared Drupalista several times a day. So that is especially helpful if you're working in a team. Yeah. So not advisable if you're maybe you're working alone in a project. So maybe it's always on time. But if there are several people working in a single project, yeah, that's really, really helpful. Okay. So why CI then? So higher quality code? So yes. Because, well, it automatically run your test fit or test cases. Every code changes. We post to the remote repository. So increased developer efficiency. So usually you don't need to worry about the error. So since you have test cases, what you need to worry is just writing the logic, developing the application. Okay. So reduced integration risk. So what this is really, really good because for example, we are just working manually with version control, like doing git merge manually. So sometimes it's really hard to resolve the conflicts. And sometimes, you know, you often commit the room code. So with circle CI content integration, that's like can be taken care of. So increased confidence and morale. Yeah. So since the developers are the engineers, no need to worry about the risk. So by the end of the week, they are all happy. Like, oh. No one's committed upholst code in the production. Stuff like that. So less time deploying. Yeah. So when the test pass, when it pass the CI, so it will automatically integrate the code. No need to do it manually. There's a lot of advantages actually. What is that? Okay. So the evolution. So before we get here in this dynamic web application, so let's go back to the story first. So before, we have HTML, CSS, JavaScript and assets. So like we call it, I don't know, website or web page. So yeah, it's very fast, high performance since it's all static, easy to scale. But hey, pictures are limited. So you cannot build the pictures that you want with just HTML. So page became the database. And then getting more complex. So we created a dynamic website. At the end of the day, we wanted them to serve like, use barnish or boost or whatever, caching, CDN, to serve the static like way before. Okay. So like there's the CSS. And then we need to minify it as well as the assets. We need to optimize it. Okay. There's like preprocessor for CSS, then Dress came in for shell utilities, for WordPress, there's CLI, Composer for how to manage your dependencies, Gulp for building your stylesheets locally or JavaScript. Okay. And then there's we had, so it's getting worse complex. There's Selenium for testing. Okay. And then there's version control. So it's getting more complex. How about this? Jenkins, Hudson. So this build tools. And yeah, CircleCI. So yeah, it's really complex. So yeah, what we're going to do is just standardize like build it once and be happy every day, just a one-time pain of setting up the workflow. And anybody can enjoy it. So in bold. So in my presentation, this involves Terminus. So it's a command line interface in our platform, Pansion. And then GitHub for hosting the code. CircleCI for continuous integration and delivery platform. So Composer for dependency manager. And Lando, if anyone at all, it's like Sump, if you know, maybe Sump is the most well-known local stack. So Lando is one of the, you know, like most awesome today that I can think of because it uses Docker and then there's almost zero configuration. So it's really easy to use. And Biat for BDD. Okay. And for distributed version control, the Git. And our platform, Pansion. Okay. So how about glance about what's the workflow is? If anyone have questions, let's just raise your hand. So basically, so changes happen locally. And then, of course, when, for example, you're installing contributed modules. So you just use the Composer Require. And then commit the changes in the Composer.json file. So let, and then let the CircleCI handles everything. Okay. If there's no error, everything passes, it will install the module in your environment. Right. As well as run all the tests. Okay. So the good news is you don't need to learn those stuff. Okay. So, but yeah, it's really good that you at least know in terms of like, there's a trouble, so you know how to trouble shoot it. So demo. Let's make it quick. So just, I have a note here. So requirements, GitHub token. I think everyone familiar with GitHub already. And then CircleCI token and Pansion account. So Pansion machine token. So why you need token? Because you need to, this services talk together. So only the token can make that happen. Okay. So assuming that we're in a command line, that's my first month in creating a project. So Terminals, Build Project, Create, Drupal 8 is the framework that I want to use. And then the name of the project, for example, you can name it like Drupal come Singapore D8. And then it will ask for token. So you have to enter it, the GitHub token. And then it will ask also for CircleCI token. And yeah, it will ask for the password, your Drupal 8 password when you login as admin. So the username is admin, but admin, yes. And then it will ask for your password. Okay. So while in the platform, so if you're a member of an agency, for example, like, let's say, Previousnext or Pasteo or Trellon. So it will ask if you're a member of those agency. Then you can select. Okay. So when it's done, it looks something like that. So yeah. Now, you may be asking, this is all happening in a remote environment. What if I wanted to run the website locally, right? So you can do your own testing, like for example, we have three of us working in a style that SCSS. So it's really good to like, we merge our code from time to time. Okay. So yeah, we can use these approach. So here, I'm going to use Lando. If you're not aware, Lando is like an environment stack made up of Docker. If anyone is aware of Docker already, Docker container. Yeah. Okay. So there, yeah, build the site. Yeah. In a first set up after you, before you run Lando. So because when building with the Composer base, all the contrived decor are excluded locally. It's just your custom modules and custom teams that are there. Aside from that, everything that is not your code, it's not present locally. So you have to run Composer install. You'll download the decor, the contrived stuff that it needs. And then, so the next command that you're going to run is Lando in it. That's recipe function. So what does it mean is it will copy the exact configuration in your remote environment because, yeah, we have the saying like, hey, it's working my machine, but it's not working in there. So yeah. So we have to, yeah. By the way, Lando is also working with the platform SH and other, I mean, I think right now they're working with Akega already. So this known Drupal hosting companies already using their supporting. Okay. So once you run that Lando in it, it will create a single yaml file called thatLando.yaml that contains your application name. So for example, your project earlier is like DrupalComp Singapore SG. So the name of the application is Drupal 8 Singapore. And then you run LandoStart. So what LandoStart does is it will, if the container or Docker container is not present locally, it will pull it from the remote repository from the Docker hub. And build the stack. And then so it will power up the environment. So the first time it will take time, like maybe five minutes depends on your internal speed. Then once it's already started, your site is not running yet because there's no database and the settings.php. So you have to pull that in your function environment. So then do pull. The code is none because you have already a local copy. So set that to false. And then that's database because Panchen has like three environments, dev, test, and live. So right now, let's assume that you have a live and a dev environment only. So it will copy the database from your dev environment remotely, as well as the files. So let's not confuse with files and code base. Files is for assets, sites, default files. And then once it's done, you have a local copy of your environment. So what I've said earlier. So the name, recipe. So config. So this is what inside your lando.jamil file. So framework, Drupal A. It could be Drupal 7 if you want to install Drupal 7. So the site, for example, it's in my case Janus. And the ID is this is the site UUID in our platform. And then, for example, since it's local, you can set this to true xdbug. But by default, it's false. So if you wanted to have xdbug locally yet, then you can use this. So and then brass. So take note that if you're going to use Pancheon as your platform, brass9 is not yet supported officially right now. So currently we're supporting 8. But yeah, you're welcome to install brass9. But there's some problem that you may encounter. And tolling, this is the call part. So you can install node. Like, for example, since you need node in, like, those gulp stuff, your local build. Phantom.js, if you're building some, like, testing or stuff like that. And then, like, those, actually, are external libraries in the platform. So if you're working with, like, PDF or print module. So the WUK HTML to PDF is our external library. And yeah, but we also support image magic if you need it. Okay? And then services. So Lando is very dynamic when, for example, you wanted to add services. Say, hey, let's say your client requires you to have a solar server. Or integrate redis. So you can just add the services that you want. Okay? So just add the index server and the redis server. Okay? So here, what I need is the node for my gulp CLI. And events. So this is actually cool. So what happens after pulling the, I run Lando pull. So it will run these commands. So I just have to make sure that my local cap is not overridden. So if your guy is familiar with features in Drupal 7. Yeah. So Composer install just to make sure that all the dependencies, Composer packages are installed. So import the configuration, update, run the update DB. So since it's my local machine, I want the develop module and can't to be enabled for debugging and development purposes. And then the last one is, of course, the cast reveal. Okay? So here, post start. So after the app has been started or like I run Lando start. So after Lando start, it will run this as well. So npm install, gulp CS. So basically CLI commands, land by line. Okay? So let's see it in action. Oops. Why? I'm missing. This is weird. It's not showing. Oh, man. Okay, here. Lando. Okay. So take note. Lando will not run if you execute the Lando command outside the directory that has no Lando. It should be inside Lando. Lando, the child directory. Okay, so Lando start. Because I did in it already earlier. So it will rebuild the environment. This is a bit slow because I'm currently using my local proxy for applying development. Oh, by default, Lando will not run if you don't have internet. Because it has to connect to the DNS server for the domain. Okay? So it's making my life difficult. Right. Okay? So let's stop, for example. Lando stop. Okay, it's dead. Okay? So yeah, that's how easy it is. So let me walk you through to the anatomy. Because I cannot discuss this in just an hour. So there's a lot of involved stuff here. So this is the root directory. Okay? So for circle CI, it's a hidden directory. And then this is the config that Jamel that actually... Where are you? So contains everything for my tools. Build steps. Right? Okay? So it's here. And for the scripts that it runs, it's here. So... Yeah, it's just shell scripts. Okay? So... for the panchon specific workflow, it's here. It's listed here. So basically, what I'm doing here is example, run this. And then... I mean panchon Jamel. So basically, you can put all the stuff that you want here. Like, for example, when some event has been run, it will notify the team in the Slack channel. Stuff like that. Like, oh, why are you touching that? Okay? Why are you running some stuff in that code? Okay? So basically, yeah, you can also send a notification, SMS. So I think Paul created a library for that. For sending SMS. Yeah, he created that library. So yeah, it's really powerful actually. So yeah, the pain here is like, you have to study but it's not really hard. It's just a Jamel pie. And then all the commands in there is in PHP as you can see here. So basically, you can do everything you want. Okay? So for... Another here. So here is the scripts for the platform specific. It's inside the web. So part of the directory. Okay? And then for BHAT, it's here. I think... Here, test. So yeah, so you put all your features here in this folder and it will automatically run. So you don't need to worry like how it's being run. The... Circumstance, I will pick that up. Okay? So here's the script for Composer, for GitHub, for GitLab. So basically, you can do what you want. So if you're like bit bucket, you want to use bit bucket, you can put all your stuff there. It depends to you actually. Okay? Questions? Ah, here. So since it circles CI, so... Yeah. So as you can see, it's all success. If it gets read, then something is wrong. Okay? So yep. And then you can create a hook that when it gets failed, it will notify in Slack channel or even email. Send an email. So, yeah, actually, for example, increase actually your efficiency when developing application. You don't need to worry about those repetitive tasks like build a remote server from time to time. This actually will create a development server for you. Test the code there, the changes, and then, yeah, it's okay. It will automatically merge to master in your dev environment. Yeah. So in Pancheon, we have this feature called multi-dev. So aside from dev, test, and live, so when you're working in your specific branch, you can spin up another dev environment which we call it multi-dev. So, yeah, it's actually... Do we have a limitation in that? 10, yeah, yeah. Maximum 10. Yeah. And then here in CircleCI, it's preactually. So, but take note that it's very slow in the free tier because it uses a single instance. But, yeah, if you're working on a big project, it makes sense that you have to upgrade. Right? So, questions? Maybe I'm so fast, or I'm not explaining it very well. How is sitting up there at least with language? Database? Actually, so every, for example, in your application, you have database, you have web server, you have, like, index server for search, and cast server, which is ready. So you have four containers. So, lando, remember the command earlier that I ran, lando pull. So when you run lando in it, it will create all those containers environment, but it's empty. Your database is still empty, zero tables. But when you run lando pull, it will export the database in your remote environment, pull it, download it locally, and then import in your database server locally. Yes. Remember, there's a parameter deb. Database does, does equals deb equals test, or even if you're into multi-deb, so you can pull it, like the name of your brands, like feature A, feature B. And the connection strings have defined in that configuration? Actually, it's a naming convention. So if your brand's name is feature A, then the parameter is feature A. So like it, it's less configuration. It's more of like a naming convention. Process behind the running and rebuild the remote environment. So, for example, I have no failed jobs here. But sometimes, even if your code is good, it fails. So what you can do is, there's a rebuild here. Where's the rebuild? Yeah, it only shows if your job gets failed. But in a feature, that usually happens. So a lot of people complaining, circle CL sucks. It fails all the time. Yes, because you're using the pre-version. You have to pay to make, you know, you'll get satisfied what you want. But yeah. So there's actually, for example, here's the best feature of this workflow. So, for example, you're working in feature A. And then your colleague working in feature B. And yes, having trouble finding out the bug, which he cannot figure out. So there's a switch command, Lando switch, which you can run locally. And then when you run Lando switch, it will pull the code, the database, and the files of the brands that your colleague is working on. And then run it in your local machine. Okay? So collaboration makes easy. It's really powerful. And, for example, you fix it, you can Lando push in that environment. And then he can pull. Yes, it is. It's really good in a team, actually. B-hat can be extended with other extras like mink and others. Yes, yes. And you fix it automatically as long as... Yeah, yeah. Yeah. And then what you can actually do is before I've been, like, developing a solution for... because there's a site, like, there's like 2,000 B-hat features, right? And it's very slow if you're in that situation because you have to run one by one. So you can actually use the cluster runner, I think. Yeah, use that cluster runner. So what it does is it will split the test by tags because in B-hat, there's a tag, like homepage by contact us or payment or e-commerce. So it depends on how many tags you have. It can spin up like even thousands of containers if you have really big servers and then split the test. So, for example, in just one container if it takes two days to run all the B-hat tests, maybe you can run it like 5 minutes when you have a really good server with cluster runner. You guys have questions? At the back! How about you, sir? Maybe you have... All right? So, yeah, I think that's it. Yeah, we still have like 20 minutes. If you guys want to ask me, anyone? In your project, maybe? Maybe there's you're struggling in your workflow that maybe we can help here. That's the purpose of this event to help. Well, you can actually create your own solution because of this. It's very dynamic, actually. All you need to have is just the token and then it can talk to like even if you're using GitLab Pipeline. Yeah, so every push or commit in the repository it will trigger the build CircleCI will take care of that. So what you need is just webhook to webhook. I did that before, but it's kind of complex. But, you know, it pays off when you manage it to run. Yeah. Strange, right? This kind of stuff. But yeah, it's if you wanted to really scale when working this really big project, this is what you need. Goodbye to those manual routines every day. No one? Yeah, it can run your front-end test, Selenium or whatever, Night Watch GS or stuff like that. Your back-end or like page punit or simple test. You know? Yeah. This solution can take care of it. Okay. No questions. Yeah. I think I did.