Skip to content

Initial docker image #911

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Initial docker image #911

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
98fb959
Added Dockerfile and minimal express server with playground middlewar…
Dec 14, 2018
66de03c
Removed extraneous body-parser dependency
Dec 14, 2018
7700574
Converted tabs to spaces
Dec 14, 2018
4a95fc7
clean yarn.lock
Dec 14, 2018
67cfd83
removed middleware node dependency and updated server to send templat…
Dec 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# dependencies
node_modules
example/node_modules
**/node_modules
example/yarn.lock

# testing
Expand Down
15 changes: 15 additions & 0 deletions docker/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
FROM node:alpine

RUN mkdir /app
COPY server/index.js /app
COPY server/package.json /app

WORKDIR /app
RUN yarn

ENV GRAPHQLPLAYGROUND_PORT 8080
ENV GRAPHQLPLAYGROUND_HOST "http://localhost:3000/graphql"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be GRAPHQLPLAYGROUND_API_ENDPOINT or GRAPHQLPLAYGROUND_ENDPOINT

ENV GRAPHQLPLAYGROUND_TITLE "GraphQL Playground"

EXPOSE 8080
CMD [ "node", "index.js" ]
88 changes: 88 additions & 0 deletions docker/server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
const express = require('express')

const defaults = {
port: 8080,
host: 'http://localhost:3000/graphql',
title: 'GraphQL Playground'
}

const port = +process.env.GRAPHQLPLAYGROUND_PORT || defaults.port
const host = process.env.GRAPHQLPLAYGROUND_HOST || defaults.host
const title = process.env.GRAPHQLPLAYGROUND_TITLE || defaults.title

const app = express()

const html = `
<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>${title}</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
<script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't those come from the image ? (if I'm running graphql-playground in docker I expect it to work even without internet connection)

</head>

<body>
<div id="root">
<style>
body {
background-color: rgb(23, 42, 58);
font-family: Open Sans, sans-serif;
height: 90vh;
}

#root {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.loading {
font-size: 32px;
font-weight: 200;
color: rgba(255, 255, 255, .6);
margin-left: 20px;
}

img {
width: 78px;
height: 78px;
}

.title {
font-weight: 400;
}
</style>
<img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
<div class="loading"> Loading
<span class="title">GraphQL Playground</span>
</div>
</div>
<script>window.addEventListener('load', function (event) {
GraphQLPlayground.init(document.getElementById('root'), {
endpoint: "${host}"
})
})</script>
</body>

</html>
`

app.get('/', (req, res) => res.send(html))

app.listen(port, function(error) {
if (error) console.error(error)
console.log(
`GraphQL Host set to ${host} ${
host === defaults.host ? '(Default)' : ''
}`,
`\n\nServing the GraphQL Playground on http://localhost:${port}/playground ${
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does it only listen on 127.0.0.1 ? if not be default there should be an option to make it listen on 0.0.0.0 or something else (so that it works with a reverse proxy)

port === defaults.port ? '(Default)' : ''
}`
)
})
15 changes: 15 additions & 0 deletions docker/server/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}
Loading