mirror of https://github.com/grpc/grpc.io.git
224 lines
9.4 KiB
HTML
224 lines
9.4 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
|
<title>
|
|
Web Quick Start – gRPC
|
|
</title>
|
|
|
|
|
|
<link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" sizes="180x180">
|
|
<link rel="icon" type="image/png" href="/favicons/android-chrome-192x192.png" sizes="192x192" >
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="manifest" href="/favicons/manifest.json">
|
|
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#2DA6B0">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="/favicons/mstile-150x150.png">
|
|
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-60127042-1"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-60127042-1');
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="landing-content">
|
|
<div class="row">
|
|
<div class="topbannersub">
|
|
<nav class="navbar navbar-expand-md navbar-dark topnav">
|
|
<a class="navbar-brand" href="https://cjyabraham.github.io/">
|
|
<img src="https://cjyabraham.github.io/img/grpc-logo.png" width="114" height="50">
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="topnav, collapse navbar-collapse" id="navbarSupportedContent" style="float:right !important">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="https://cjyabraham.github.io/about/">About</a>
|
|
</li>
|
|
<li class="nav-item dropdown active">
|
|
<a class="nav-link dropdown-toggle" href="https://cjyabraham.github.io/docs/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Docs
|
|
</a>
|
|
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
|
|
|
|
<a class="dropdown-item" href="/docs">
|
|
Overview
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/quickstart/">
|
|
Quick Start
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/guides/">
|
|
Guides
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/tutorials/">
|
|
Tutorials
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/reference/">
|
|
Reference
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/samples/">
|
|
Samples
|
|
</a>
|
|
|
|
|
|
<a class="dropdown-item" href="/docs/talks">
|
|
Presentations
|
|
</a>
|
|
|
|
</div>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="/blog">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="/community">Community</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://packages.grpc.io/">
|
|
Packages
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="https://cjyabraham.github.io/faq/">FAQ</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="headertext">Documentation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="subnav d-none d-md-block">
|
|
<a href="https://cjyabraham.github.io/docs/" >Overview</a>
|
|
| <a href="https://cjyabraham.github.io/docs/quickstart/" class="active">Quick Start</a>
|
|
| <a href="https://cjyabraham.github.io/docs/guides/" >Guides</a>
|
|
| <a href="https://cjyabraham.github.io/docs/tutorials/" >Tutorials</a>
|
|
| <a href="https://cjyabraham.github.io/docs/reference/" >Reference</a>
|
|
| <a href="https://cjyabraham.github.io/docs/samples/" >Samples</a>
|
|
| <a href="https://cjyabraham.github.io/docs/talks/" >Presentations</a>
|
|
</div>
|
|
|
|
|
|
<div class="quickstartcols">
|
|
|
|
<div class="quickstartcol1">
|
|
|
|
<h8>Quick Start</h8>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/cpp/" >C++</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/csharp/" >C#</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/dart/" >Dart</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/go/" >Go</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/java/" >Java</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/android/" >Android Java</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/node/" >Node.js</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/objective-c/" >Objective-C</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/php/" >PHP</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/python/" >Python</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/ruby/" >Ruby</a>
|
|
<a href="https://cjyabraham.github.io/docs/quickstart/web/" class="active">Web</a>
|
|
</div>
|
|
|
|
<div class="quickstartcol2" style="margin-top:4%">
|
|
<h3 style="margin-top:0px;">Web Quick Start</h3>
|
|
|
|
|
|
|
|
<p class="lead">This guide gets you started with gRPC-Web with a simple
|
|
working example from the browser.</p>
|
|
|
|
<div id="toc"></div>
|
|
|
|
<h3 id="prerequisites">Prerequisites</h3>
|
|
|
|
<ul>
|
|
<li><code>docker</code> and <code>docker-compose</code></li>
|
|
</ul>
|
|
|
|
<p>This demo requires Docker Compose file
|
|
<a href="https://docs.docker.com/compose/compose-file/">version 3</a>. Please refer to
|
|
<a href="https://docs.docker.com/compose/install/#install-compose">Docker website</a> on how to install Docker.</p>
|
|
|
|
<h3 id="run-an-echo-example-from-the-browser">Run an Echo example from the browser!</h3>
|
|
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">$ git clone https://github.com/grpc/grpc-web
|
|
$ cd grpc-web
|
|
$ docker-compose pull
|
|
$ docker-compose up -d node-server envoy commonjs-client</code></pre></div>
|
|
<p>Open a browser tab, and go to:</p>
|
|
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">http://localhost:8081/echotest.html</code></pre></div>
|
|
<p>To shutdown, run <code>docker-compose down</code>.</p>
|
|
|
|
<h3 id="what-is-happening">What is Happening?</h3>
|
|
|
|
<p>In this demo, there are three key components:</p>
|
|
|
|
<ol>
|
|
<li><p><code>node-server</code>: This is a standard gRPC Server, implemented in Node.
|
|
This server listens at port <code>:9090</code> and implements the service’s business
|
|
logic.</p></li>
|
|
|
|
<li><p><code>envoy</code>: This is the Envoy proxy. It listens at <code>:8080</code> and forwards the
|
|
browser’s gRPC-Web requests to port <code>:9090</code>. This is done via a config file
|
|
<code>envoy.yaml</code>.</p></li>
|
|
|
|
<li><p><code>commonjs-client</code>: This component generates the client stub class using
|
|
the <code>protoc-gen-grpc-web</code> protoc plugin, compiles all the JS dependencies
|
|
using <code>webpack</code>, and hosts the static content <code>echotest.html</code> and
|
|
<code>dist/main.js</code> using a simple web server at port <code>:8081</code>. Once the user
|
|
interacts with the webpage, it sends a gRPC-Web request to the Envoy proxy
|
|
endpoint at <code>:8080</code>.</p></li>
|
|
</ol>
|
|
|
|
<h3 id="what-s-next">What’s next</h3>
|
|
|
|
<ul>
|
|
<li>Work through a more detailed tutorial in <a href="/docs/tutorials/basic/web/">gRPC Basics: Web</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
|
|
|
</body>
|
|
</html>
|