Integrating into CircleCI

As we mentioned previously, development in the real world has dramatically shifted in the past couple of decades. From building everything locally and deploying from our development machines to complicated orchestration and dependency deployment trees, we have seen a rise in tools that help us rapidly develop and deploy.

One example of this is the CI/CD tools that we have available to us, such as Jenkins, Travis, Bamboo, and CircleCI. These tools pick up on various hooks, such as pushing code to a remote repository and instantly running a buildWe will be utilizing CircleCI as our tool of choice. It is easy to set up and an easy-to-use development tool that has a nice free tier for developers.

In our case, this build is going to be doing the following three things:

  1. Pulling in all of our project dependencies
  2. Running our Node.js build script
  3. Deploying those resources to our server, where we will be running the application

Getting all of this set up can be quite a frustrating experience, but it is well worth the payoff once our application is hooked up. We will be utilizing the following technologies to help us with this process:

  • CircleCI
  • GitHub

With this in mind, our first step will be to go to GitHub and create a profile, if we haven't done so already. This is as simple as going to https://github.com/ and looking toward the top-right corner for the signup option. Once we have done this, we can start creating/forking repositories.

Since all of the code for this book is on GitHub, most of you should already have a GitHub account and know the basics of utilizing Git.

For those of you who are struggling with Git or haven't utilized a version control system, the following resource may help: https://try.github.io/.

Now, we need to fork the repository that all of the code is in into our own repository. To do this, run through the following steps:

  1. Go to this book's GitHub repository at https://github.com/PacktPublishing/Hands-On-High-Performance-Web-Development-with-JavaScript and click the top-right option to fork the entire repository.

If we do not want to do that, we can clone the repository to our local computer. (This may be the better option since we only want the contents of the Chapter12 directory.)

  1. Whichever of the two options we choose, go ahead and move the Chapter12 directory into another location on our local computer and change the folder name to something like microserve.
  2. Go back into GitHub and create a new repository. Make this a private repository.
  3. Finally, go back to our local machine and remove the .git file that is already there with the following command:
> rf -rf .git

For those of you who are on Windows, you can run these commands if you have the Windows 10 Linux subsystem. Alternatively, you can download the Cmder tool: https://cmder.net/.

  1. Run the following commands to hook the local system up to the remote GitHub repository:
> git init
> git add .
> git commit -m "first commit"
> git remote add origin
https://github.com/<your_username>/<the_repository>.git

> git push -u origin master
  1. The command line will ask for some credentials. Use the ones that we set up our profile with.

Our local files should be hooked into GitHub. Now all we need to do is set up this system with CircleCI. To do this, we will need to create an account on CircleCI's website.

  1. Go to https://circleci.com/ and click on Sign Up and then Sign up with GitHub.

Once our account is hooked up, we can log in. We should see the following screen:

  1. Click Set Up Project for the repository we just set up.

It should detect that we have a CircleCI file already in our repository, but we can always start from scratch if we want to. The directions that follow are going to be for setting CircleCI up from scratch. To do this, we can utilize the Node.js template that they have. However, the main thing we will need to do is create the .circleci directory and the config.yml file in that directory. We should have something basic that looks like this:

version: 2
jobs:
build:
docker:
- image: circleci/node:12.13
working_directory: ~/repo
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-
- run: npm install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}

The CircleCI configuration file executes in the following way:

  1. We state that we want to utilize the circleci/node:12.13 image from Docker

We won't be discussing Docker here, but it is yet another technology that many companies use to deploy and host applications. More information on this technology can be found here: https://docs.docker.com/.
  1. We want to run all of our commands in ~/repo. This will be the case for almost all the basic projects we create.
  2. Next, we check the repository into that ~/repo.
  3. Now, we need to set up a cache for this repository, if we don't have one already. This will make sure that we only pull down the repository when we need to.
  4. We need to run the npm install command to pull in all of our dependencies.
  5. Finally, we save the cache.
This process is known as continuous integration because it will constantly run builds for us when we push code. We can add different settings inside our CircleCI profile if we want, but that is beyond the scope of this book. We will also get notifications via email when a build is complete. We can tune this if we want at the following location: https://circleci.com/gh/organizations/<your_user>/settings.

With this, we have created a basic CircleCI file! Now, if we go to our dashboard, it should run a build once we push this CircleCI configuration. It should also show all the steps that we laid out previously. This is great! Now, let's hook in our build process so that we can actually do something with our CI system.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.202.203