1 | const Express = require('express');
|
2 | const opn = require('opn');
|
3 | const path = require('path');
|
4 |
|
5 | const 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 |
|
75 | module.exports = runGraphiQL;
|