Set Up a Ubuntu Environment on GCP

WORK IN PROGRESS

1. Ubuntu VM Setup

1.1 Create a Virtual Machine (VM)

Assuming you have signed up to GCP and that you are signed in via the console, create a new project with a unique name. This demo will use:

lottie-1010

Warning

You may use an existing project, however this demo is setup for the novice. Deviate and adjust to your needs.

1.2 Set up a VM from the CLI

Download the software development kit (SDK). Open this up and you will have a CLI (command line interface) with which you can interact with GCP.

Note

Copy/Pasting text into a terminal

Once you have code copied, you right click with your mouse and the paste executes.

Now switch to this project using your project id, for this example that means:

gcloud config set project lottie-1010

Then you can initiate and provision a VM using the following code:

gcloud compute --project=lottie-1010 instances create development-environ-1 --zone=us-central1-a --machine-type=n1-standard-1 --subnet=default --network-tier=PREMIUM --maintenance-policy=MIGRATE --service-account=123338807608-compute@developer.gserviceaccount.com --scopes=https://www.googleapis.com/auth/devstorage.read_only,https://www.googleapis.com/auth/logging.write,https://www.googleapis.com/auth/monitoring.write,https://www.googleapis.com/auth/servicecontrol,https://www.googleapis.com/auth/service.management.readonly,https://www.googleapis.com/auth/trace.append --tags=http-server --image=ubuntu-1604-xenial-v20200317 --image-project=ubuntu-os-cloud --boot-disk-size=10GB --boot-disk-type=pd-standard --boot-disk-device-name=development-environ-1 --no-shielded-secure-boot --shielded-vtpm --shielded-integrity-monitoring --reservation-affinity=any
gcloud compute --project=lottie-1010 firewall-rules create default-allow-http --direction=INGRESS --priority=1000 --network=default --action=ALLOW --rules=tcp:3000 --source-ranges=0.0.0.0/0

Note

If you are warned that you have chosen a small disc size, don’t worry! Press return and continue.

Note

There is a very simple-to-use form-interface to set up the VM as an alternative to the CLI.

hamburger > Compute Engine > VM instances

If you delete this machine and start again, you will find that the firewall rules you set up are retained. Therefore, this interface is the place to go to edit the VM’s settings and attach firewall rules such as default-allow-http.

1.3 SH into your VM

You can SSH from the GCP console, but for brevity we will continue to use the CLI. Which means using the following:

gcloud compute ssh --project lottie-1010 --zone us-central1-a development-environ-1

This will open up a new window which is the SSH terminal communicating directly with your VM.

2.0 Set Up Your Development Environment

NB we are going to use the terminal connection to your cloud machine. Don’t get this confused with other black screens you have open, such as the SDK! Luckily, there is a visual hint that you are using a tunnel:

1.4 Use this SSH connection to interact with your VM.

Update this VM’s environment with:

sudo apt-get update

1.5 Install Node.js (which will also give you npm).

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

1.6 Update npm

sudo npm install npm@latest -g

1.7 Install React

sudo npm install -g create-react-app

1.8 Create our own React app

2.0 Serve the React App

Now you are ready to start your app using:

test-lottie is now available for viewing, your dev environment will display something like this:

NB neither of these suggested options are easy to use, as we have not installed a browser on our little VM. Rather, go to the GCP console and grab the external IP address for your VM. Add :3000 to the end of this and refresh the page.

Note

To locate your External IP navigate:

GCP > Compute Engine > VM instances > External IP

You should be able to see the base React App.

2.1 Stop the React App

We will want to add our lottie files to this app, so stop the server using:

3.0 Upload your Lottie to your VM

Upload a local file to your VM:

1.1. Return to the SDK window and enter the following to create the bucket:

1.2 From the CLI use the following (adapted to your file location):

Note

The GCP interface provides a file picker.

Navigate to the GCP console > Storage > Browser > lottiefile > Upload files and use their file picker.

5.3 Copy this file onto your VM. Return to your SSH connection and run the following:

// this does not put the file in the right spot- try again!

//into the src directory and edit App.js and App.css files. from within nano //you use Ctrl + O to save and Ctrl + X to exit.cd

By setting up in a cloud environment you can follow along using the same development environment as this demo. For this first follow the `Set Up a Common Environment on GCP`_, if you already have a React app set up in your own environment, then continue.

Customize Your App with a Lottie

Get your Lottie code in place.

With a base React App set up, we are ready to modify it. As the landing page for React helpfully tells us, this means editing the App.js file.

1. Go grab your favorite Lottie from the Lottie library

This means signing up using your chosen method and then browsing the available options. The world can always use a little extra love, so we have chosen the kiss of the heart. Download this and rename it to lottie.JSON for this demo.

Modify your React Appp

2. Go grab the Lottie library for React using:

   // Does the user need to be at the test-lottie folder to do this or is this a global install?

   Note

   LottieFiles has produced a webplayer for Lotties, so you don’t have to upload the JSON, but can rather reference the code. This demo, however, includes the upload of code to assist the novice with using their VM.

3. Open the App.js file with the nano editor.

   Now we can see some of the inners of our React app.

   Note

   Nano is a neat little text editor. Make the edit. Crtl 0 writes the change Return accepts the offered filename, overwriting the original Ctrl X closes the nanocd ..

5. Edit your App.js file to include a call to the Lottie library

   Use your SSH connection to the VM to edit App.js using nano:

   Then, at the end of the import list add:

   ..code-block:

   import Lottie from 'react-lottie';
   

   

   Set the variable that will be called:

   ..code-block:

   let animObj = null;
   

   Now, ask for your Lottie

class App extends React.Component {

componentDidMount() {

console.log(‘componentDidMount’);

//call the loadAnimation to start the animation animObj = lottie.loadAnimation({ container: this.animBox, // the dom element that will contain the animation renderer: ‘svg’, loop: true, autoplay: true, animationData: animationData // the path to the animation json});

Warning

Nano requires a CTL + O to save your changes Return will accept the suggested file name (and overwrite) CTL + X exits nano

This worked in Sandbox

export default class LottieControl extends React.Component {

render() {

const defaultOptions = {

loop: true, autoplay: true, animationData: animationData, rendererSettings: {

preserveAspectRatio: ‘xMidYMid slice’

}

};

return <div>

<Lottie options={defaultOptions}

height={400} width={400}/>

</div> } }