UNPKG

1.92 kBJavaScriptView Raw
1const Express = require('express');
2const opn = require('opn');
3const path = require('path');
4
5const runGraphiQL = (endpoint, query, headers, variables, address, port) => {
6 const graphiqlHtml = `
7<html lang="en-us">
8 <head>
9 <link rel="icon" type="image/png" href="./favicon.png" />
10 <script>
11 window.__env = {
12 graphqlEndpoint: "${endpoint}",
13 headers: ${JSON.stringify(headers)},
14 variables: ${JSON.stringify(variables)},
15 query: \`${query || ''}\`
16 };
17 </script>
18 </head>
19 <body>
20 <style>
21 .mainContent {
22 display: 'none';
23 opacity: 0;
24 transition: opacity .20s linear;
25 }
26 .mainContent.show {
27 display: 'block';
28 opacity: 1;
29 transition: opacity .20s linear;
30 }
31 </style>
32
33 <div id="loading">
34 <div class="page-loading" style="
35 min-height: 100vh;
36 width: 100%;
37 display: flex;
38 align-items: center;
39 font-family: sans-serif;
40 justify-content: center;
41 ">
42 <span class="" style="
43 font-size: 2em;
44 margin-top: -3em;
45 color: #848484;
46 ">
47 Loading...
48 </span>
49 </div>
50 </div>
51 <div id="content" class="mainContent"></div>
52 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
53
54 <link rel="stylesheet" href="/static/main.css" charset="UTF-8"/>
55 <script src="/static/vendor.js" charset="UTF-8"></script>
56 <script src="/static/main.js" charset="UTF-8"></script>
57
58 </body>
59</html>
60`;
61 const app = new Express();
62
63 app.use('/static', Express.static(path.join(__dirname, 'app', 'static', 'dist')));
64
65 app.get('/', (req, res) => {
66 res.send(graphiqlHtml);
67 });
68
69 app.listen(port, address, () => {
70 console.log(`GraphiQL running at http://${address}:${port}...`);
71 opn(`http://${address}:${port}`);
72 });
73};
74
75module.exports = runGraphiQL;