Creating a reactjs app that uses google cloud-vision

Question

I am trying to create a Reactjs app that uses google-cloud-vision but I am struggling to get the sample-code to work. I have just started learning React-js so I am a bit lost understanding how the sample-code that is created for Node.Js chould be changed to make it work.

I have started by visiting https://cloud.google.com/vision/docs/quickstart-client-libraries?authuser=1&hl=sv and enabled all the required things (billing and enabled the api). I then created a new service-account and downloaded the json-file.

Then I used the command "npx create-react-app cloud-vision" to create a new project on my computer. I created a credentials folder in the root of the project where I placed the json-file. I created a .env file where I entered the environment variable:

GOOGLE_APPLICATION_CREDENTIALS="C:\Development\Projects\cloud-vision\credentials\My First Project-b38ff120f2ad.json"

I then installed the cloud-vision npm by using the command: npm install --save @google-cloud/vision

Next step was to find the sample-code for the OCR that I want to use from https://cloud.google.com/vision/docs/ocr?authuser=1&hl=sv

Then I tried npm start

import React from 'react';
import logo from './logo.svg';
import './App.css';
import testImage from './images/image--002.png'
import vision from '@google-cloud/vision'

function App() {

  const googleVison = async () => {
    // const vision = require('@google-cloud/vision');

    // Creates a client
    const client = new vision.ImageAnnotatorClient();

    /**
     * TODO(developer): Uncomment the following line before running the sample.
     */
    const fileName = testImage;

    // Performs text detection on the local file
    const [result] = await client.textDetection(fileName);
    const detections = result.textAnnotations;
    console.log('Text:');
    detections.forEach(text => console.log(text));
  }

googleVison()

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

As I am new to React and don't really get Node.js I was mostly hoping for something to show in the console that I could understand so that I could do some more research. My first problem is that I don't know how to substitute "const vision = require('@google-cloud/vision');" so I tried just importing it. Is that right? Also I don't know if I just can use the Node.js code as it is or if I must alter it in some way. But if I look in the console when the app starts I get an error saying: "Module not found: Can't resolve 'http2' in 'C:\Development\Projects\cloud-vision\node_modules@grpc\grpc-js\build\src"

I then tried npm installing http2 also but just got a new error (Which I cant remember, but I can try that again if that is important to get the app working.)

Can anyone give me some advice of how to get the app running?

Devo Devo · Accepted Answer · 2020-06-30T10:16:22

First of all, React won't recognise your env variable GOOGLE_APPLICATION_CREDENTIALS. You have to use a prefix REACT_APP_ for all custom env variables.

What you need to do is to specify your Google projectId and the JSON key file as credentials when initialising your vision client like below:

const options = { 
    credentials = require('/path/to/key/json'),
    projectId = 'Your Google Cloud Project ID'
};
const client = new vision.ImageAnnotatorClient(options);

Creating a reactjs app that uses google cloud-vision

1 Answers