Add environment variable for API data

.env_sample

@@ -0,0 +1,2 @@
+IS_PROD=true
+API_URL=http://127.0.0.1:8001/api/codechallenges

.gitignore

@@ -3,5 +3,7 @@
 
 .DS_Store
 .vscode
+.env
+yarn.lock
 
 stories

package.json

@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.11.5",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.4.2",
     "@rollup/plugin-typescript": "^6.0.0",
     "@storybook/addon-actions": "^6.2.8",
     "@storybook/addon-essentials": "^6.2.8",
@@ -32,6 +33,7 @@
     "@typescript-eslint/parser": "^4.22.0",
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.2.2",
+    "dotenv": "^10.0.0",
     "eslint": "^7.24.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",

rollup.config.js

@@ -5,8 +5,12 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
+import replace from '@rollup/plugin-replace';
+import dotenv from 'dotenv';
 
-const production = !process.env.ROLLUP_WATCH;
+dotenv.config();
+
+const production = process.env.IS_PROD;
 
 function serve() {
 	let server;
@@ -74,7 +78,18 @@ export default {
 
 		// If we're building for production (npm run build
 		// instead of npm run dev), minify
-		production && terser()
+		production && terser(),
+
+		replace({
+			process: JSON.stringify({ //Use this in Svelte
+				env: {
+					isProd: production
+				}
+			}),
+			globalThis: JSON.stringify({ //Use this in TS
+				IS_PROD: production
+			})
+		})
 	],
 	watch: {
 		clearScreen: false

src/data/getCurrentQuestions/getCurrentQuestions.request.ts

@@ -1,9 +1,12 @@
 import { getCurrentQuestionsExample } from '../getCurrentQuestions'
 
+const IS_PROD = globalThis.IS_PROD
+
 // CHANGE PROMISE TO QUESTION TYPE WHEN LEVEL - DIFFICULTY IS FIXED
 const getCurrentQuestions = async (): Promise<any[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+
+  if (IS_PROD) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/current/questions/', {
       headers: {
         'Content-Type': 'application/json',

src/data/getExpiredQuestions/getExpiredQuestions.request.ts

@@ -1,9 +1,11 @@
 import { getExpiredQuestionsExample } from '../getExpiredQuestions'
 
+const IS_PROD = globalThis.IS_PROD
+
 // CHANGE PROMISE TO QUESTION TYPE WHEN LEVEL - DIFFICULTY IS FIXED
 const getExpiredQuestions = async (): Promise<any[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (IS_PROD) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/expired/questions/', {
       headers: {
         'Content-Type': 'application/json',

src/data/getQuestion/getQuestion.request.ts

@@ -1,9 +1,11 @@
-import { Question } from '../../types'
+import type { Question } from '../../types'
 import { getQuestionsExample } from '../getQuestions'
 
+const IS_PROD = globalThis.IS_PROD
+
 const getQuestion = async (questionId: number): Promise<Question> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (IS_PROD) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/questions/' + questionId, {
       headers: {
         'Content-Type': 'application/json',

src/data/getQuestions/getQuestions.request.ts

@@ -1,9 +1,11 @@
-import { Question } from '../../types'
+import type { Question } from '../../types'
 import { getQuestionsExample } from '../getQuestions'
 
+const IS_PROD = globalThis.IS_PROD
+
 const getQuestions = async (): Promise<Question[]> => {
   // eslint-disable-next-line no-constant-condition
-  if (false) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
+  if (IS_PROD) { // ADD ENV VAR TO TELL US TO USE THE REAL BACKEND OR NO
     return fetch('http://127.0.0.1:8001/api/codechallenges/questions/', {
       headers: {
         'Content-Type': 'application/json',

src/global.d.ts

@@ -0,0 +1,7 @@
+export {}
+
+declare global {
+    // eslint-disable-next-line no-var
+    // eslint-disable-next-line no-unused-vars
+    let __IS_PROD__:string
+}

yarn.lock

@@ -1504,6 +1504,14 @@
     is-module "^1.0.0"
     resolve "^1.17.0"
 
+"@rollup/plugin-replace@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz#a2d539314fbc77c244858faa523012825068510a"
+  integrity sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
 "@rollup/plugin-typescript@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-6.1.0.tgz#289e7f0ea12fd659bd13ad59dda73b9055538b83"
@@ -4726,6 +4734,11 @@ dotenv-webpack@^1.8.0:
   dependencies:
     dotenv-defaults "^1.0.2"
 
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
 dotenv@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
@@ -7714,7 +7727,7 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
-magic-string@^0.25.2:
+magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==