Automated delivery React / Vue app for each Pull Request.

#ci #react #vue #deployment

Would you like to speed up the development process of your React / Vue application? Make it more predictable and transparent for clients and teammates? Well, continue reading. In this article, I want to describe a set of tools that will make your life easier.

Photo by jesse ramirez on Unsplash

Online “snapshot” for Pull Request #

Continuous Integration (CI) is a practice when developers merge their changes to the main branch as often as possible. Every developer commits daily to a shared repository. Every commit creates a build and runs automated tests.

Continuous Deployment (CD) is an extension of CI. It means that besides the automated tests you also have an automated release process and you can deploy your application at any time point.

It’s needed for 2 reasons: everyone who makes code review can easily check implementation without pulling branch and testing locally; the client can see progress at any time at any feature, and test it manually, without waiting for a production release, so it’s really useful.

There are ready-made SaaS solutions, such as Heroku Review Apps , but not all of them are always suitable. We saw a lot of examples where default SaaS platforms are very complicated and doing a lot of stuff that you don’t need at all. So, We want to show you how we can integrate CI with a custom CD.

Thanks, https://gergely.imreh.net for the picture

It will give you a possibility to find and solve problems faster, release more stable and higher quality products. Here we will use CircleCI , but you can use whatever you need (Jenkins , Travis CI , GitLab CI ).

Custom deployment JavaScript app #

Let’s assume you have set up on CI with installing dependencies, running tests and linting code. Here is an example of our configuration for ReactXP .

Build & Deploy #

We add the delivery stage after passing tests and linter checks. To deploy an app, we need to build it for the production environment first.

We need to have a unique name per each PR to differentiate the builds. In order to release an app with a unique name, we are using PR number from CircleCI and deploy it via Surge service.

Here is how to make notification in GitHub. We publish a comment with a link inside:

Conclusion #

In this article, we have discovered how to create our own JS app Delivery without using a SaaS solution that can not fit your requirements. And you can verify it wasn’t so hard. Using auto-deployments, we have reduced bugs appearing up to 50% because of easier functional testing, and the price is just a small script!

Paul Keen is an Open Source Contributor and a Chief Technology Officer at JetThoughts . Follow him on LinkedIn or GitHub .

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories .