Use env variables for api url (client)

arielger · Mar 22, 2019 · 52aa963 · 52aa963
1 parent 57d73df
commit 52aa963
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,25 @@
+# Truco
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/b8179712-8947-491c-b0c9-1cfa8b4ddfbd/deploy-status)](https://app.netlify.com/sites/truco/deploys)
+
+Multiplayer truco game made with GraphQL and React.
+
+## Development
+
+### Client
+
+You will need to create a `.env` file following the provided `.env.example` file.
+
+```
+yarn install
+yarn start
+```
+
+### Server
+
+You will need to create a `.env` file following the provided `.env.example` file.
+
+```
+yarn install
+yarn start
+```
diff --git a/client/.env.example b/client/.env.example
@@ -0,0 +1,4 @@
+REACT_APP_API_URL=http://localhost:4000
+REACT_APP_SUBSCRIPTIONS_URL=ws://localhost:4000/graphql
+ENGINE_API_KEY=apolloEngineApiKey
+
diff --git a/client/src/App.js b/client/src/App.js
@@ -30,16 +30,19 @@ const authLink = setContext((_, { headers = {} }) => {
 });
 
 const networkInterface = new HttpLink({
-  uri: "http://localhost:4000"
+  uri: process.env.REACT_APP_API_URL
 });
 
 // Create WebSocket client
-const wsClient = new SubscriptionClient(`ws://localhost:4000/graphql`, {
-  reconnect: true,
-  connectionParams: () => ({
-    authorization: localStorage.getItem("token") || ""
-  })
-});
+const wsClient = new SubscriptionClient(
+  process.env.REACT_APP_SUBSCRIPTIONS_URL,
+  {
+    reconnect: true,
+    connectionParams: () => ({
+      authorization: localStorage.getItem("token") || ""
+    })
+  }
+);
 
 const webSocketLink = new WebSocketLink(wsClient);
 

diff --git a/client/src/screens/Match/Scores/Scores.js b/client/src/screens/Match/Scores/Scores.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./Scores.module.scss";
+// import styles from "./Scores.module.scss";
 
 // @todo: Add animation to new points
 export default function Scores({ matchPoints, myPoints, theirPoints }) {