React Project Deployments

Version control software (VCS) Tools

  • SVN

Git and Mercurial (Hg) are the actual tools. They are both Distributed Version control systems, which means that developers can work on the same project independently of other team members on their own local branches.

WHO CREATED GIT?

Linus Trovaldus

He is responsible for the linux kernel.

Linux kernel is used by Linux Os (Ubuntu/MacOs), Android.

Github is not the same as git. Github is a website/platform while git is a tool.

Choosing the right source control platform for your team is one of the most important decisions you’re going to make. There’s a good chance that you’ll choose Git for the version control software (VCS) itself, but the platform where the code lives is equally important. Many times, it comes down to Bitbucket vs GitHub or Gitlab.

GitHub vs Bitbucket: The Basics

If you boil it down to the most basic and fundamental difference between GitHub and Bitbucket, it is this:

GitHub is focused around public code, and Bitbucket is for private.

Basically, GitHub(public) has a huge open-source community, and Bitbucket tends to have mostly enterprise and business users.That’s not to say that you can’t have a private repository on GitHub (you can). Or that you can’t post your code public-ally on Bitbucket (again, you can). However, the majority of the users aren’t doing so. Plus, the defaults are set that way, too: public and private repositories respectively.

Outside of that difference, the two platforms function very similarly. You can create and manage repositories through the website or command line, log in with two-factor authentication (2FA), invite collaborators, open issues and discussions, create/merge pull requests, and generally handle all the fundamental things you would need to from the website. They’re super similar that way.

Bitbucket is an Atlassian product (the makers of Trello and other apps), you have a slick and clean interface from the moment you log in. You see immediately that they’re focused on professional teams as an all-in-one solution for software development. Let’s see how.

GitHub, obviously, is a hub for git version control.

BitBucket, on the other hand, supports more than just git. You can also track your repositories in Mercurial, another popular version control management system. It does not support SVN, another major system, but at least with Bitbucket, you have a choice.

GitHub vs Bitbucket: The Winner?

In terms of business solutions…it’s a toss-up. The paid plans are pretty similar. It’s hard to make any kind of recommendation on that. Bitbucket kind of specializes in business clients, offering an all-in-one solution through Atlassian’s overall suite, but GitHub being the major platform in open-source and public code, if your company is involved in that, they may be the way to go.

In reality, neither is a bad choice to serve you and your source control needs. You can’t go wrong with either, honestly.

React Application Deployment and Hosting Solutions

2. Github Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

You can use GitHub Pages to host a website about yourself, your organization, or your project directly from a GitHub repository.

You can host your site on GitHub’s github.io domain or your own custom domain.

more @ https://help.github.com/en/github/working-with-github-pages/about-github-pages

3. Netlify

4. Heroku

how to deploy a production React app to Heroku @

https://medium.com/jeremy-gottfrieds-tech-blog/tutorial-how-to-deploy-a-production-react-app-to-heroku-c4831dfcfa08

5. Now

6. Surge

7. AWS S3

8. Roast

9. Jenkins with Docker. Jenkins has official image on docker hub.

Jenkins is an open source automation tool written in Java with plugins built for Continuous Integration purpose. Jenkins is used to build and test your software projects continuously making it easier for developers to integrate changes to the project, and making it easier for users to obtain a fresh build.

References:

Continuous Integration and deployment (CI/CD Pipeline) with Jenkins and Node.js

This automation is called “continuous integration and deployment” OR CI/CD Pipeline.

In this tutorial, we will learn how to set up continuous integration and deployment (CI/CD) infrastructure for the Node.js project.

Prerequistics

Jenkins is free for use but we require public server in order to integrate the Github repository.

Here is the complete flow of the system.

  • You made some changes in your project.
  • You push those changes in Github on master or any branch.
  • Github will notify Jenkins about the new push. ( We will configure it )
  • Jenkins will then run the commands you ask it to run.

Those commands will contain the following.

  • Test script.
  • Deployment script.

Deployment script will be added to Project only and Jenkins will use that to communicate to Server and perform the push.

Basically, what you do manually such as running test command, login to Server, performing Git pull and then restarting build server, we will do all of them automatically by writing the script.

Let’s get down to work

For.eg

git clone https://github.com/codeforgeek/demoapp

Let’s create a simple Express project to deliver the “Hello World” message. Switch to the clone folder and run npm init -y command to generate the package.JSON file.

package.json

{
“name”: “sampleCode”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

Install express using the following command.

npm i — save express

Ok, so we have our app running with the test. Let’s push it to Github.

First add all files.

git add .

Add new commit.

git commit -m “first push”

Push it.

git push

source: https://blog.jakoblind.no/where-to-deploy-your-react-app-and-your-apis/

Where to deploy your React app and your APIs

Now, where do you deploy them so they are accessible on the internet?

Frontend

Which one should you pick? It depends based on the requirements of your app.

Amazon S3

It is not free. But the good thing is you only pay for what you use.

Perfect for: Your or your client’s production application.

Github pages

Also, Github pages is free!

Perfect for: Portfolio site, personal web page, a quick demo, etc.

Backend

Both these cloud providers support many different programming languages including Node. And they both provide autoscaling meaning your app will be able to handle a lot of users accessing your site simultaneously.

You don’t need to think about installing/configuring an OS or reverse proxy. It just works out of the box. Also, deploying is automated and works with a simple command from your terminal.

You pay only for what you use. That means it’s pretty cheap to throw up a server just to test something out.

If you don’t like the idea that everything “just works” like with Elastic Beanstalk and Heroku, then there is an option for you.

You can buy a VPS (Virtual Private Server) such as DigitalOcean. Then you get access to your own machine that you have full control over. It requires more knowledge about sysadmin and devops, but at the same time, it gives you more control. I would not recommend using a VPS unless you have some very good reason for it because of the added work of configuring/installing it.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.