How to use node-grpc with Quasar?



  • how to use node-grpc with Quasar like https://grpc.io/docs/languages/node/quickstart/?
    I try to use grpc in Quasar, but it may have many bugs.
    For example, the method “loadSync” of “@grpc/proto-loader” tell me not supported when I run it in Quasar.
    Then, I find its reason that is the util.fs is null. Ok, I write the base64 string of my proto file and replace the file read code. (This is just a temporary solution)
    After that, I’m desperate, because I find that require(‘grpc’) is equal to null. I double-check my npm list and ensure the grpc package is exists, but it still doesn’t work.
    I will never use the grpc-web because this project is for the Windows desktop app, and please don’t tell me to use C#, I like C# but I hate WPF. I hate XAML.
    The most reason why I hope to use Quasar is that I don’t want to spend any energy on art and layout, and I also don’t want my app to become ugly like the default WinForms GUI.
    So, I hope to use grpc on Quasar, and who can help me?

    this is the code:

    <template>
      <q-page class="flex flex-center">
        <img
          alt="Quasar logo"
          src="~assets/quasar-logo-full.svg"
        >
        <q-btn label="Alert" color="primary" @click="test" />
      </q-page>
    </template>
    
    <script>
    export default {
      name: 'PageIndex',
      methods: {
        test () {
          console.log('test!')
          var PROTO_PATH = 'xxxx/yyyy.proto'
          var grpc = require('grpc')
          var protoLoader = require('@grpc/proto-loader')
          const options = {
            keepCase: true,
            longs: String,
            enums: String,
            defaults: true,
            oneofs: true
          }
          var packageDefinition = protoLoader.loadSync(PROTO_PATH, options)
          console.log('loadSync')
          var grpcCore = grpc.loadPackageDefinition(packageDefinition).Core
          console.log('Load Grpc proto')
          var client = new grpcCore.Core('localhost:50051', grpc.credentials.createInsecure())
          client.getResolution(
            { path: '' },
            function (err, response) {
              if (err) {
                console.log(err)
              }
              console.log('width:', response.width, 'height:', response.height)
            })
        }
      }
    }
    </script>
    


  • @Astesia

    Here’s a vue tutorial:
    https://dev.to/thearavind/a-todo-app-using-grpc-web-and-vuejs-3p55

    Also remember that Quasar is a front end framework only that runs in the clients browser. Node.js and C# run server side.

    Also found this vue libary:
    https://github.com/b3ntly/vue-grpc

    And this Quasar grpc demo:
    https://github.com/gustavohenrique/grpc-web-golang-vuejs


Log in to reply