How to Deploying a React App to Google Cloud Platform with App Engine

A couple of months earlier, when I wanted to try out the Google App Engine, I went through the documentation, Google has provided on how to deploy your apps to App Engine. Google has provided a very detailed documentation on the process and I will try to explain this in a simple and step by step way here.

I am assuming you are familiar with creating a React app and you have all the pre-requisites installed on your computer already.

We have three different steps:

Creating React App.
Creating a New Project on Google Cloud Platform.
Install & Deploy with Google Cloud SDK.

Creating React App

1. I use create-react-app package to create my React application:

npm install -g create-react-app

2. Create a new React application:

create-react-app my-react-app

Note: that my-react-app is the name of my react application.

3. Install the required packages:

cd my-react-app && npm install

4. Run the application:

npm start

Now, your application is up and running on localhost:3000:

And now the time to go through Google part:

Creating A New Project in Google Cloud Platform Console

1. Navigate to https://cloud.google.com and click on Console button to go to Google Cloud Platform console.

2. Click on App Engine to navigate to App Engine Section of the console.

3. Click on “GO TO APP ENGINE” to navigate to App Engine Dashboard.

4. Create a new App Engine Project.

5. Give some name to your project.

Note: Remember the Project ID as highlighted, we will use it later.

6. Done. Your project is created.

Install & Deploy with Google Cloud SDK

Click here to download and install the latest version of the SDK, on the download page, you will see the pre-requisites for the SDK, make sure you install them first and download and extract the SDK on your computer, once you are done, run the following command to install it:

./google-cloud-sdk/install.sh

After installing the SDK you need to initialize it:

./google-cloud-sdk/bin/gcloud init

This command will open the browser window and asks you to login if you are not logged in already, otherwise it will show you the available configurations. Here in my case as I am already authorized I have to choose from the configuration options.

In other case when you haven’t already authorized, you will be redirected to login and then set the proper permissions and After logging-in review and click allow to set the permissions.

In the next step you need to select an account for this configuration:

After setting the configuration the next step is to choose from the Google Cloud Platform project.

Here is how the console looks like, asking you to either choose from an existing list of projects you already created in Google Cloud Platform, or to create a new project. In our case as we have already created a project using GCP console having ID high-empire-200513, we will just select it.

That’s it. We are all set to deploy our first app to Google App Engine.

Next step is to navigate to our React app that we created in the beginning and run the following command in order to deploy it to App Engine.

gcloud app deploy

Running this command will prompt you to choose the region where you want the App Engine to store your application:

Choose any region, and the process of the deployment will start.

This might take little bit time to complete and you can see the progress on the console.

As soon as deployment is done, you can run your app in the browser using following command.

gcloud app browse

That’s it :) Your react application is running in Google App Engine now.

Thank you!

#Reactjs #React #App Engine #Google Cloud #Developer

What is GEEK

Buddha Community

How to Deploying a React App to Google Cloud Platform with App Engine

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Md Delwar Husain

1598383290

What Are Google Compute Engine ? - Explained

The Google computer engine exchanges a large number of scalable virtual machines to serve as clusters used for that purpose. GCE can be managed through a RESTful API, command line interface, or web console. The computing engine is serviced for a minimum of 10-minutes per use. There is no up or front fee or time commitment. GCE competes with Amazon’s Elastic Compute Cloud (EC2) and Microsoft Azure.

https://www.mrdeluofficial.com/2020/08/what-are-google-compute-engine-explained.html

#google compute engine #google compute engine tutorial #google app engine #google cloud console #google cloud storage #google compute engine documentation

Adaline Kulas

1594162500

Multi-cloud Spending: 8 Tips To Lower Cost

A multi-cloud approach is nothing but leveraging two or more cloud platforms for meeting the various business requirements of an enterprise. The multi-cloud IT environment incorporates different clouds from multiple vendors and negates the dependence on a single public cloud service provider. Thus enterprises can choose specific services from multiple public clouds and reap the benefits of each.

Given its affordability and agility, most enterprises opt for a multi-cloud approach in cloud computing now. A 2018 survey on the public cloud services market points out that 81% of the respondents use services from two or more providers. Subsequently, the cloud computing services market has reported incredible growth in recent times. The worldwide public cloud services market is all set to reach $500 billion in the next four years, according to IDC.

By choosing multi-cloud solutions strategically, enterprises can optimize the benefits of cloud computing and aim for some key competitive advantages. They can avoid the lengthy and cumbersome processes involved in buying, installing and testing high-priced systems. The IaaS and PaaS solutions have become a windfall for the enterprise’s budget as it does not incur huge up-front capital expenditure.

However, cost optimization is still a challenge while facilitating a multi-cloud environment and a large number of enterprises end up overpaying with or without realizing it. The below-mentioned tips would help you ensure the money is spent wisely on cloud computing services.

Deactivate underused or unattached resources

Most organizations tend to get wrong with simple things which turn out to be the root cause for needless spending and resource wastage. The first step to cost optimization in your cloud strategy is to identify underutilized resources that you have been paying for.

Enterprises often continue to pay for resources that have been purchased earlier but are no longer useful. Identifying such unused and unattached resources and deactivating it on a regular basis brings you one step closer to cost optimization. If needed, you can deploy automated cloud management tools that are largely helpful in providing the analytics needed to optimize the cloud spending and cut costs on an ongoing basis.

Figure out idle instances

Another key cost optimization strategy is to identify the idle computing instances and consolidate them into fewer instances. An idle computing instance may require a CPU utilization level of 1-5%, but you may be billed by the service provider for 100% for the same instance.

Every enterprise will have such non-production instances that constitute unnecessary storage space and lead to overpaying. Re-evaluating your resource allocations regularly and removing unnecessary storage may help you save money significantly. Resource allocation is not only a matter of CPU and memory but also it is linked to the storage, network, and various other factors.

Deploy monitoring mechanisms

The key to efficient cost reduction in cloud computing technology lies in proactive monitoring. A comprehensive view of the cloud usage helps enterprises to monitor and minimize unnecessary spending. You can make use of various mechanisms for monitoring computing demand.

For instance, you can use a heatmap to understand the highs and lows in computing visually. This heat map indicates the start and stop times which in turn lead to reduced costs. You can also deploy automated tools that help organizations to schedule instances to start and stop. By following a heatmap, you can understand whether it is safe to shut down servers on holidays or weekends.

#cloud computing services #all #hybrid cloud #cloud #multi-cloud strategy #cloud spend #multi-cloud spending #multi cloud adoption #why multi cloud #multi cloud trends #multi cloud companies #multi cloud research #multi cloud market

Rusty Shanahan

1597833840

Overview of Google Cloud Essentials Quest

If you looking to learn about Google Cloud in depth or in general with or without any prior knowledge in cloud computing, then you should definitely check this quest out, Link.

Google Could Essentials is an introductory level Quest which is useful to learn about the basic fundamentals of Google Cloud. From writing Cloud Shell commands and deploying my first virtual machine, to running applications on Kubernetes Engine or with load balancing, Google Cloud Essentials is a prime introduction to the platform’s basic features.

Let’s see what was the Quest Outline:

A Tour of Qwiklabs and Google Cloud
Creating a Virtual Machine
Getting Started with Cloud Shell & gcloud
Kubernetes Engine: Qwik Start
Set Up Network and HTTP Load Balancers

A Tour of Qwiklabs and Google Cloud was the first hands-on lab which basically gives an overview about Google Cloud. There were few questions to answers that will check your understanding about the topic and the rest was about accessing Google cloud console, projects in cloud console, roles and permissions, Cloud Shell and so on.

**Creating a Virtual Machine **was the second lab to create virtual machine and also connect NGINX web server to it. Compute Engine lets one create virtual machine whose resources live in certain regions or zones. NGINX web server is used as load balancer. The job of a load balancer is to distribute workloads across multiple computing resources. Creating these two along with a question would mark the end of the second lab.

#google-cloud-essentials #google #google-cloud #google-cloud-platform #cloud-computing #cloud

Vegard Sandnes

1574217167