diff options
| author | realtradam <[email protected]> | 2024-05-22 19:05:07 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-05-22 19:05:07 -0400 |
| commit | 5f1b0bb1883a8021c7261dad59e063824849fd81 (patch) | |
| tree | 7cc6f178256df3e7bd5556693fccbecf92034023 | |
| parent | 2330eb25d958df5a8e15bcc9f452ac703323d159 (diff) | |
| download | malcz.com-5f1b0bb1883a8021c7261dad59e063824849fd81.tar.gz malcz.com-5f1b0bb1883a8021c7261dad59e063824849fd81.zip | |
add prod/dev env vars
| -rw-r--r-- | .env.development | 2 | ||||
| -rw-r--r-- | .env.production | 2 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | src/App.jsx (renamed from src/App.tsx) | 0 | ||||
| -rw-r--r-- | src/components/Blogs.jsx | 2 | ||||
| -rw-r--r-- | src/components/Game.jsx | 4 | ||||
| -rw-r--r-- | src/components/GameCard.jsx | 6 | ||||
| -rw-r--r-- | src/components/Games.jsx | 6 | ||||
| -rw-r--r-- | src/components/Home.jsx | 6 | ||||
| -rw-r--r-- | src/components/Layout.jsx | 11 | ||||
| -rw-r--r-- | src/main.jsx | 12 | ||||
| -rw-r--r-- | src/main.tsx | 10 | ||||
| -rw-r--r-- | src/routes/index.jsx | 2 |
13 files changed, 30 insertions, 35 deletions
diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..93b132e --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +# .env.development +VITE_API_TITLE=http://localhost:3000 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..175ef0a --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +# .env.production +VITE_API_TITLE=https://gameshost.tradam.dev @@ -29,6 +29,6 @@ </head> <body> <div id="root"></div> - <script type="module" src="/src/main.tsx"></script> + <script type="module" src="/src/main.jsx"></script> </body> </html> diff --git a/src/App.tsx b/src/App.jsx index b594288..b594288 100644 --- a/src/App.tsx +++ b/src/App.jsx diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx index f52f286..2dc8f27 100644 --- a/src/components/Blogs.jsx +++ b/src/components/Blogs.jsx @@ -6,7 +6,7 @@ const Blogs = () => { const [blogs, setBlogs] = useState([]); useEffect(() => { - const url = "/api/v1/blogs/index"; + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/blogs/index`; fetch(url).then((response) => { if (response.ok) { return response.json(); diff --git a/src/components/Game.jsx b/src/components/Game.jsx index 8b80b8e..7746767 100644 --- a/src/components/Game.jsx +++ b/src/components/Game.jsx @@ -9,13 +9,13 @@ import Button from "./Button"; //export default () => ( export default function Games () { let { user, game } = useParams(); -//http://localhost:3000/api/v1/game/realtradam/orc-arena-of-time/index.html +//http://%{VITE_API_TITLE}/api/v1/game/realtradam/orc-arena-of-time/index.html return( <> <div> <div className="flex flex-col gap-16 max-w-6xl shrink"> <div className="title font-bold text-6xl font-title">Orc: Arena of Time</div> - <iframe style={{ aspectRatio: 1 }} className="bg-black aspect-square max-h-[90vh] rounded" src="http://localhost:3000/api/v1/game/realtradam/orc-arena-of-time/index.html" title={game}></iframe> + <iframe style={{ aspectRatio: 1 }} className="bg-black aspect-square max-h-[90vh] rounded" src={`${import.meta.env.VITE_API_TITLE}api/v1/game/realtradam/orc-arena-of-time/index.html`} title={game}></iframe> </div> </div> </> diff --git a/src/components/GameCard.jsx b/src/components/GameCard.jsx index 9cd815d..82ad423 100644 --- a/src/components/GameCard.jsx +++ b/src/components/GameCard.jsx @@ -15,10 +15,10 @@ export default function GameCard ({ link = "./", width = "72", game = { card_img <a href={ link } className="block w-min pt-10 px-1" target="_blank"> <div className="gameCard"> <div className="gameCardWrapper"> - <img src={`/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" /> + <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" /> </div> - <img src={`/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" /> - <img src={`/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" /> + <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" /> + <img src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" /> </div> </a> </> diff --git a/src/components/Games.jsx b/src/components/Games.jsx index f1545b8..a0646be 100644 --- a/src/components/Games.jsx +++ b/src/components/Games.jsx @@ -7,13 +7,13 @@ import Button from "./Button"; export default function Games () { const [games, setGames] = useState([]); useEffect(() => { - const url = "/api/v1/games"; + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`; fetch(url).then((response) => { if (response.ok) { return response.json(); } throw new Error("Network response was not ok."); - }).then((response) => setGames(response)).catch(() => navigate("/")); + }).then((response) => setGames(response))//.catch(() => navigate("/")); }, []); const allGames = games.map((game) => ( <GameCard game={game} key={game.id}/> @@ -35,7 +35,7 @@ export default function Games () { console.log(pair[0] + ', ' + pair[1]) }; - fetch('http://127.0.0.1:3000/api/v1/games', { + fetch('${import.meta.env.VITE_API_TITLE}/api/v1/games', { method: 'post', body: formData, }); diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 863d81d..c1fb689 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -15,7 +15,7 @@ export default function Home () { console.log(pair[0] + ', ' + pair[1]) }; - fetch('http://127.0.0.1:3000/api/v1/games', { + fetch('${import.meta.env.VITE_API_TITLE}/api/v1/games', { method: 'post', body: formData, }); @@ -24,11 +24,11 @@ export default function Home () { <> <div> <div className="flex flex-col gap-16 max-w-6xl shrink"> - <div className="title font-bold text-6xl font-title">Get To Know Me a Little</div> + <div className="title font-bold text-6xl font-title">Work In Progress</div> <div className=""> <div className="jumbotron jumbotron-fluid bg-transparent"> <div className="container secondary-color"> - <h1 className="text-2xl">Debug! Again</h1> + <h1 className="text-2xl"> API at: { import.meta.env.VITE_API_TITLE } </h1> <p className=""> Ea optio vitae culpa voluptatem consectetur. Ab quisquam sed ipsum. Perspiciatis minus odit quas qui consequuntur dicta reiciendis a. Nihil minima sed aliquam. </p> diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 9aac935..06df03a 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -6,17 +6,6 @@ export default function Layout ({userData}) console.log(userData); //const [userData, setUserData] = useState({ name: "" }); - // if the user tries to access the isolated domain then we redirect them - // this is NOT done for security, only for good UX - // rails serves the react app no matter what - // so the app would be broken when served on the isolated domain - const domain = window.location.host; - console.log(domain); - //if(domain === "localhost:3000") - //{ - // window.location.replace("http://127.0.0.1:3000"); - //} - return ( <> <div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]"> diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..ac292fd --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + + // null assertion for tsx +//ReactDOM.createRoot(document.getElementById('root')!).render( +ReactDOM.createRoot(document.getElementById('root')).render( + <React.StrictMode> + <App /> + </React.StrictMode>, +) diff --git a/src/main.tsx b/src/main.tsx deleted file mode 100644 index 3d7150d..0000000 --- a/src/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' - -ReactDOM.createRoot(document.getElementById('root')!).render( - <React.StrictMode> - <App /> - </React.StrictMode>, -) diff --git a/src/routes/index.jsx b/src/routes/index.jsx index df46102..5809fbb 100644 --- a/src/routes/index.jsx +++ b/src/routes/index.jsx @@ -9,7 +9,7 @@ import Layout from "../components/Layout"; export default function index() { const [userData, setUserData] = useState({}); - const url = "http://localhost:3000/api/v1/auth/data"; + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/auth/data`; useEffect(() => { fetch(url, { credentials: "include" |
