Added react! and webpack and babel

add-tinkerpop-server
Sam Hatfield 2020-02-08 23:24:19 +00:00
parent d04f220fa5
commit 6586e9d7af
Signed by: sehqlr
GPG Key ID: 319F06F39E02DE88
13 changed files with 4748 additions and 77 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules
.env
client/dist

3
client/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["@babel/env", "@babel/preset-react"]
}

19
client/public/index.html Normal file
View File

@ -0,0 +1,19 @@
<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script src="../dist/bundle.js"></script>
</body>
</html>

4
client/src/App.css Normal file
View File

@ -0,0 +1,4 @@
.App {
margin: 1rem;
font-family: Arial, Helvetica, sans-serif;
}

15
client/src/App.js Normal file
View File

@ -0,0 +1,15 @@
import React, { Component } from "react";
import {hot} from "react-hot-loader";
import "./App.css";
class App extends Component{
render(){
return(
<div className="App">
<h1> Hello, World! hot load</h1>
</div>
);
}
}
export default hot(module)(App);

4
client/src/index.js Normal file
View File

@ -0,0 +1,4 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

35
client/webpack.config.js Normal file
View File

@ -0,0 +1,35 @@
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "htt://localhost:3000/dist/",
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};

View File

@ -1,16 +1,34 @@
{
"name": "lego-marvel-browser",
"version": "1.0.0",
"main": "index.js",
"repository": "git@git.bytes.zone:sehqlr/lego-marvel-browser.git",
"author": "sehqlr <hey@samhatfield.me>",
"license": "MIT",
"dependencies": {
"axios": "^0.19.2",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-graphql": "^0.9.0",
"graphql": "^14.6.0"
},
"bin": "server.js"
"name": "lego-marvel-browser",
"version": "1.0.0",
"main": "index.js",
"repository": "git@git.bytes.zone:sehqlr/lego-marvel-browser.git",
"author": "sehqlr <hey@samhatfield.me>",
"license": "MIT",
"dependencies": {
"axios": "^0.19.2",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-graphql": "^0.9.0",
"graphql": "^14.6.0",
"react": "16.5.2",
"react-dom": "16.5.2",
"react-hot-loader": "4.3.11"
},
"bin": {
"graphql": "./server/server.js"
"react": "webpack-dev-server"
},
"devDependencies": {
"@babel/cli": "7.1.0",
"@babel/core": "7.1.0",
"@babel/preset-env": "7.1.0",
"@babel/preset-react": "7.0.0",
"babel-loader": "8.0.2",
"css-loader": "1.0.0",
"style-loader": "0.23.0",
"webpack": "4.19.1",
"webpack-cli": "3.1.1",
"webpack-dev-server": "3.1.8"
}
}

49
server/src/marvel.js Normal file
View File

@ -0,0 +1,49 @@
const crypto = require('crypto');
const axios = require('axios');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');
const BASE_URL = 'https://gateway.marvel.com/v1/public';
const getParams = () => {
let public = process.env.MARVEL_API_PUBLIC_KEY;
let private = process.env.MARVEL_API_PRIVATE_KEY;
let ts = Date.now().toString();
let data = ts + private + public;
let hash = crypto.createHash('md5').update(data).digest('hex');
return {
apikey: public,
ts: ts,
hash: hash
};
};
const schema = buildSchema(`
type Query {
characters: [Character]
}
type Character {
id: Int!
name: String!
description: String!
}
`);
const root = {
characters: () => {
return axios.get(`${BASE_URL}/characters`, {params: getParams()})
.then((res) => {
return res.data.data.results;
})
.catch(function(error) { console.log(error); });
}
}
const graphql = graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
});
exports.graphql = graphql;

View File

@ -5,6 +5,10 @@ let
in
pkgs.mkShell {
buildInputs = [
pkgs.yarn pkgs.nodejs niv.niv
pkgs.yarn
pkgs.nodejs
pkgs.nodePackages.webpack
pkgs.nodePackages.webpack-cli
niv.niv
];
}

View File

@ -1,49 +0,0 @@
const crypto = require('crypto')
const axios = require('axios');
const graphqlHTTP = require('express-graphql')
const { buildSchema } = require('graphql')
const BASE_URL = 'https://gateway.marvel.com/v1/public'
const getParams = () => {
let public = process.env.MARVEL_API_PUBLIC_KEY
let private = process.env.MARVEL_API_PRIVATE_KEY
let ts = Date.now().toString()
let data = ts + private + public
let hash = crypto.createHash('md5').update(data).digest('hex')
return {
apikey: public,
ts: ts,
hash: hash
}
}
const schema = buildSchema(`
type Query {
characters: [Character]
}
type Character {
id: Int!
name: String!
description: String!
}
`)
const root = {
characters: () => {
return axios.get(`${BASE_URL}/characters`, {params: getParams()})
.then((res) => {
return res.data.data.results
})
.catch(function(error) { console.log(error) })
}
}
const graphql = graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
})
exports.graphql = graphql

4594
yarn.lock

File diff suppressed because it is too large Load Diff