Do local setup via .env instead of editing actual files

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -23,4 +24,4 @@ yarn-debug.log*
 yarn-error.log*
 
 # Local Netlify folder
-.netlify
+.netlify

README.md

@@ -24,9 +24,9 @@ Please note this project is designed to work with rooms that have [privacy](http
 ## Running locally
 
 1. Install dependencies `npm i`
-2. Start dev server `npm run dev`
-3. Then open your browser and go to `http://localhost:3002`
-4. Add the Daily room URL you created to line 31 of `api.js`, and follow the comment's instructions.
+2. Copy `sample.env` to a new file called `.env`, and fill in the REACT_APP_ values
+3. Start dev server `npm run dev`
+4. If it didn't open automatically, open your browser and go to `http://localhost:3002`
 
 OR...
 
@@ -38,7 +38,7 @@ If you want access to the Daily REST API (using the proxy as specified in `netli
    [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/daily-demos/call-object-react)
 2. Install the Netlify CLI `npm i -g netlify-cli`
 3. Login to your account `netlify login`
-4. Rename `sample.env` to `.env` and add your API key
+4. Copy `sample.env` to a new file called `.env`, and fill in the DAILY_API_KEY
 5. Start the dev server `netlify dev`
 
 > Note: If the API proxy isn't working locally you may need to run `netlify build` first. This will put API key in the `netlify.toml` file, so make sure you don't commit this change.

netlify.toml

@@ -26,4 +26,4 @@
 [[redirects]]
   from = "/*"
   to = "/index.html"
-  status = 200
+  status = 200

sample.env

@@ -1 +1,6 @@
-DAILY_API_KEY=REPLACE_WITH_YOUR_API_KEY
+# This needs to be filled in to run on Netlify. Ignore if you're running locally
+DAILY_API_KEY=REPLACE_WITH_YOUR_API_KEY
+
+# These need to be filled in if you are running the app locally. Ignore for Netlify
+REACT_APP_DAILY_DOMAIN=REPLACE_WITH_YOUR_DOMAIN
+REACT_APP_DAILY_ROOM=REPLACE_WITH_YOUR_ROOM_NAME

src/api.js

@@ -9,10 +9,9 @@ const newRoomEndpoint =
  * in README.md
  *
  * See https://docs.daily.co/reference#create-room for more information on how
- * to use the Daily REST API to create rooms and what options are available. 
+ * to use the Daily REST API to create rooms and what options are available.
  */
 async function createRoom() {
-
   const exp = Math.round(Date.now() / 1000) + 60 * 30;
   const options = {
     properties: {
@@ -23,12 +22,19 @@ async function createRoom() {
     method: "POST",
     body: JSON.stringify(options),
     mode: 'cors',
-  }),
-    room = await response.json();
-  return room;
+  })
+  if (response.status === 200) {
+    return await response.json();
+  } else if (response.status === 404 &&
+             process.env.REACT_APP_DAILY_DOMAIN &&
+             process.env.REACT_APP_DAILY_ROOM) {
 
-  // Comment out the above and uncomment the below, using your own URL
-  // return { url: "https://your-domain.daily.co/hello" };
+    return {
+      url: `https://${process.env.REACT_APP_DAILY_DOMAIN}.daily.co/${process.env.REACT_APP_DAILY_ROOM}`
+    }
+  } else {
+    throw new Error("Unable to create a Daily room. Check out the README.md for setup instruction!")
+  }
 }
 
 export default { createRoom };