Adding Circle CI/CD to your React Project
It’s really a pain to have to maintain multiple
env files, login to your server all the time and then deploy.
Following is a simple method to integrate Circle CI into your workflow and ease your daily deployments.
- First make sure to login to Circle CI and add your project in the Circle CI dashboard.
- To start with create a
.circleci/config.ymlfile in your local directory.
- This is your config which will be used to create jobs, workflows, run other scripts etc.
- What we are trying to achieve here? On merging a pull request in to lets say
developbranch, a workflow will executed.
- For doing so we first specify the Circle
2for my case. You can use a later one if available.
- Next step is to specify the environment in which the Circle CI Container will run, here
circleci/node:11.0.0(11 is the node version).
- Jobs are something which are later on used by workflows to run, in a step by step process. Here we name our job as
dockerwith an image of a node version 11. The node version could be the one which your project wants to use.
- Next, specify the
working_directorywhere you want circleci to build the project. In my case I’ve specified
- Steps in a job are literally what the name suggests, used to prepare the image to perform future tasks.
- Hence the first step is
checkoutstep which we specified in the
working_directory, the next step is pasting the ssh key fingerprint value which you got while you added the private RSA key from your server in the circleci dashboard. (click here for a more detailed document)
- Next we run the
npm installcommand and finally our
deploy.shscript, which for me takes care of copying the build files from the circleci image to the server and extracting the same. For your reference I have copied that below. (Scroll down)
- While our job is complete now, we specify a workflow on the branch we finally want to run the above job. To do so we specify the job name and the filter for the branch name.
- While you are all set, you can merge the PR first to specified branch in your workflow. If everything went well for you then from the next merge all circleci builds should dpeloy onto your server.
For your reference:
CI=false npm run build rm repo.tar.gz tar czf repo.tar.gz build scp -o StrictHostKeyChecking=no repo.tar.gz email@example.com:/home/name/repo/ ssh firstname.lastname@example.org << EOF nvm use 11 cd repo forever stop server.js rm -rf build tar -xvf repo.tar.gz forever start server.js EOF