diff --git a/.env.development b/.env.development index 9ac15d6e20..03a8f55018 100644 --- a/.env.development +++ b/.env.development @@ -1,10 +1,10 @@ -REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run -REACT_APP_NHOST_VERSION=v1 -REACT_APP_NHOST_ENDPOINT=graphql -REACT_APP_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server +VITE_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run +VITE_NHOST_VERSION=v1 +VITE_NHOST_ENDPOINT=graphql +VITE_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server DISABLE_ESLINT_PLUGIN=true -REACT_APP_ACTIVITIES_ON=true -REACT_APP_ACTIVITY_ID=hackrplay -REACT_APP_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/ -REACT_APP_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502' -REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com' \ No newline at end of file +VITE_ACTIVITIES_ON=true +VITE_ACTIVITY_ID=hackrplay +VITE_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/ +VITE_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502' +VITE_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com' \ No newline at end of file diff --git a/index.html b/index.html index f7df122d4c..b77ff2d768 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,56 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + ReactPlay - One app to learn, create, and share ReactJS projects. + + + + +
+ + + + diff --git a/netlify.toml b/netlify.toml index b87b8d3dda..6ac5aa0246 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,4 +1,4 @@ [[redirects]] from = "/*" - to = "/index.html" + to = "/serverless.html" status = 200 diff --git a/package.json b/package.json index 381f59a185..a47715714c 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "react-qr-code": "^2.0.7", "react-redux": "^8.0.1", "react-router-dom": "^6.4.0", - "react-scripts": "5.0.0", "react-shimmer-effect": "^1.0.9", "react-simple-maps": "^2.3.0", "react-toastify": "^9.0.8", @@ -86,12 +85,10 @@ "workbox-window": "^6.5.4" }, "scripts": { - "start:nolint": "npx --yes create-react-play@latest -p && react-scripts start", - "start": "npx --yes create-react-play@latest -p && npm run lint && react-scripts start", - "build": "npx --yes create-react-play@latest -p && react-scripts build", + "start:nolint": "npx --yes create-react-play@latest -p && vite", + "start": "npx --yes create-react-play@latest -p && npm run lint && vite", + "build": "npx --yes create-react-play@latest -p && tsc && vite build", "snap": "react-snap", - "test": "react-scripts test", - "eject": "react-scripts eject", "cypress:open": "cypress open", "cypress:run": "cypress run", "lint": "eslint src/**/*.{js,jsx,ts,tsx}", @@ -128,6 +125,7 @@ "@types/dompurify": "^3.0.2", "@typescript-eslint/eslint-plugin": "^5.0.0", "@typescript-eslint/parser": "^5.41.0", + "@vitejs/plugin-react": "^4.0.1", "autoprefixer": "^10.4.7", "cypress": "^10.6.0", "eslint": "^8.0.1", @@ -146,8 +144,12 @@ "prettier": "^2.7.1", "puppeteer": "^13.7.0", "react-snap": "^1.23.0", + "sass": "^1.63.6", "tailwind-scrollbar": "^2.1.0", "tailwindcss": "^3.0.24", - "typescript": "*" + "typescript": "*", + "vite": "^4.3.9", + "vite-plugin-svgr": "^3.2.0", + "vite-tsconfig-paths": "^4.2.0" } } diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 7eec0493ab..0000000000 --- a/public/index.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - ReactPlay - One app to learn, create, and share ReactJS projects. - - - - -
- - - diff --git a/serverless.html b/serverless.html new file mode 100644 index 0000000000..a07d488154 --- /dev/null +++ b/serverless.html @@ -0,0 +1,6 @@ + + diff --git a/src/common/Testimonial/TestimonialModal.jsx b/src/common/Testimonial/TestimonialModal.jsx index acabca5f91..f75c9100a6 100644 --- a/src/common/Testimonial/TestimonialModal.jsx +++ b/src/common/Testimonial/TestimonialModal.jsx @@ -4,7 +4,6 @@ import ModalClose from '@mui/joy/ModalClose'; import Typography from '@mui/joy/Typography'; import Sheet from '@mui/joy/Sheet'; import { useUserDisplayName, useUserId } from '@nhost/react'; -import { Box } from '@mui/material'; import Button from '@mui/joy/Button'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; @@ -18,6 +17,7 @@ import { submit } from 'common/services/request'; import { toast, ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DOMPurify from 'dompurify'; +import Box from '@mui/material/Box'; export default function TestimonialModal({ isOpen, setIsOpen }) { const userDisplayName = useUserDisplayName(); diff --git a/src/common/activities/ActivityBanner.jsx b/src/common/activities/ActivityBanner.jsx index 1be36d3fed..7cdc3b818b 100644 --- a/src/common/activities/ActivityBanner.jsx +++ b/src/common/activities/ActivityBanner.jsx @@ -21,7 +21,7 @@ function ActivityBanner({ currentActivity }) { HRP Logo
@@ -58,7 +58,7 @@ function ActivityBanner({ currentActivity }) {
- +
); diff --git a/src/common/activities/activitiesConfig.js b/src/common/activities/activitiesConfig.js index 0bcb2b5431..7ff918fc6e 100644 --- a/src/common/activities/activitiesConfig.js +++ b/src/common/activities/activitiesConfig.js @@ -1,3 +1,8 @@ +import hackrplayLogo from './hackathon/Logo.svg'; +import hackrPlayHero from './hackathon/img-hero-coders.png'; +import twoPlaysAMonthLogo from './2playsamonth/BannerLogo.png'; +import twoPlaysAMonthHero from './2playsamonth/HeroCoders.png'; + export const activities = [ { id: 'hackrplay', @@ -5,8 +10,8 @@ export const activities = [ subtitle: 'Developers and Hacking are inseparable!', description: 'ReactPlay brings you the opportunity to take part in the Hackathon and learn from it. Showcase your mindblowing ideas, collaborate, and build projects - there are also chances to win exciting prizes.', - logo: './hackathon/Logo.svg', - heroImage: './hackathon/img-hero-coders.png' + logo: hackrplayLogo, + heroImage: hackrPlayHero }, { id: '2playsamonth', @@ -14,7 +19,7 @@ export const activities = [ subtitle: 'Learning is a journey than a destination.', description: 'ReactPlay brings you an opportunity to participate in the month-long drive to learn and contribute to Open Source. Join the #2PlaysAMonth and build two projects(plays) in the month of February. You will learn from expert code reviews while contributing to Open Source - you may also win some exciting prizes.', - logo: './2playsamonth/BannerLogo.png', - heroImage: './2playsamonth/HeroCoders.png' + logo: twoPlaysAMonthLogo, + heroImage: twoPlaysAMonthHero } ]; diff --git a/src/common/components/Comment.jsx b/src/common/components/Comment.jsx index 492c500e11..4f260af893 100644 --- a/src/common/components/Comment.jsx +++ b/src/common/components/Comment.jsx @@ -1,9 +1,9 @@ import Giscus from '@giscus/react'; const Comment = () => { - const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID; - const discussionCategoryId = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID; - const discussionCategoryName = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME; + const projectRepoId = import.meta.env.VITE_GISCUS_PROJECT_REPO_ID; + const discussionCategoryId = import.meta.env.VITE_GISCUS_DISCUSSION_CATEGORY_ID; + const discussionCategoryName = import.meta.env.VITE_GISCUS_DISCUSSION_CATEGORY_NAME; return ( <> diff --git a/src/common/const/nhost.js b/src/common/const/nhost.js index cf50bafeb5..fd8907fd24 100644 --- a/src/common/const/nhost.js +++ b/src/common/const/nhost.js @@ -1,6 +1,6 @@ const AUTH_URL = (redirectURL, provider = 'github') => { return `${ - process.env.REACT_APP_NHOST_BACKEND_URL + import.meta.env.VITE_NHOST_BACKEND_URL }/v1/auth/signin/provider/${provider}?redirectTo=${encodeURI(redirectURL)}`; }; diff --git a/src/common/createplay/CreatePlay.jsx b/src/common/createplay/CreatePlay.jsx index b3621c9cd1..a61878e14b 100644 --- a/src/common/createplay/CreatePlay.jsx +++ b/src/common/createplay/CreatePlay.jsx @@ -173,7 +173,7 @@ const CreatePlay = () => { if (!isAuthenticated && !isEditPlay) { window.location = NHOST.AUTH_URL( - `http://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create` + `http://localhost:${import.meta.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create` ); return null; diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx index 09863a0005..bbbdb9a9ef 100644 --- a/src/common/header/Header.jsx +++ b/src/common/header/Header.jsx @@ -101,7 +101,7 @@ const Header = () => { showHideBits.setHeaderStyle ? '' : ` app-header-home ${ - process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer + import.meta.env.VITE_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer ? 'app-header-home--promo' : null } ` @@ -118,7 +118,7 @@ const Header = () => { - {process.env.REACT_APP_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && ( + {import.meta.env.VITE_ACTIVITIES_ON === 'true' && showHideBits.showActivityTimer && ( )} diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx index 90e4d5ac78..528dbb92b2 100644 --- a/src/common/header/HeaderNav.jsx +++ b/src/common/header/HeaderNav.jsx @@ -8,9 +8,10 @@ import { IoAddSharp, IoShareSocial, IoHeartSharp } from 'react-icons/io5'; import { MdManageSearch, MdClose, MdEvent } from 'react-icons/md'; import SocialShare from 'common/components/SocialShare'; import { GoX } from 'react-icons/go'; -import { Modal, Box, Typography, Menu } from '@mui/material'; +import { Modal, Typography, Menu } from '@mui/material'; import { useSearchContext } from 'common/search/search-context'; import { CREATE_PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants'; +import Box from '@mui/material/Box'; const HeaderNav = ({ showBrowse }) => { const { showShareModal, setShowShareModal } = useSearchContext(); @@ -100,7 +101,7 @@ const HeaderNav = ({ showBrowse }) => {
  • - {process.env.NODE_ENV === 'development' ? ( + {import.meta.env.NODE_ENV === 'development' ? ( { }, [data, setSearchTerm, searchTerm, setFilterQuery]); // eslint-disable-next-line no-console - console.log('process.env.REACT_APP_ACTIVITIES_ON', process.env.REACT_APP_ACTIVITIES_ON); + console.log('import.meta.env.VITE_ACTIVITIES_ON', import.meta.env.VITE_ACTIVITIES_ON); return (
    @@ -40,8 +40,8 @@ const Home = () => {
    - {process.env.REACT_APP_ACTIVITIES_ON && process.env.REACT_APP_ACTIVITIES_ON === 'true' ? ( - + {import.meta.env.VITE_ACTIVITIES_ON && import.meta.env.VITE_ACTIVITIES_ON === 'true' ? ( + ) : ( )} diff --git a/src/common/playideas/PlayIdeas.jsx b/src/common/playideas/PlayIdeas.jsx index ad178c7aa4..d674107e9a 100644 --- a/src/common/playideas/PlayIdeas.jsx +++ b/src/common/playideas/PlayIdeas.jsx @@ -133,7 +133,7 @@ const PlayIdeas = () => {

    - {process.env.NODE_ENV === 'development' ? ( + {import.meta.env.NODE_ENV === 'development' ? ( { useEffect(() => { async function fetchData() { - const res = await fetch(`${process.env.REACT_APP_PLAY_WEB_SVC}/api/plays/published`); + const res = await fetch(`${import.meta.env.VITE_PLAY_WEB_SVC}/api/plays/published`); const data = await res.json(); updatePublishedPlays(data); } diff --git a/src/common/playlists/PlayHeaderActions.jsx b/src/common/playlists/PlayHeaderActions.jsx index 9866e560e7..6e9bb08428 100644 --- a/src/common/playlists/PlayHeaderActions.jsx +++ b/src/common/playlists/PlayHeaderActions.jsx @@ -103,8 +103,6 @@ const PlayHeaderActions = ({ play }) => { className="action" href={`https://github.com/reactplay/react-play/tree/main/src${play.path}`} rel="noopener noreferrer" - rel="noopener noreferrer" - target="_blank" target="_blank" > diff --git a/src/common/routing/RouteDefs.jsx b/src/common/routing/RouteDefs.jsx index 7e2e987475..faafcd1ff5 100644 --- a/src/common/routing/RouteDefs.jsx +++ b/src/common/routing/RouteDefs.jsx @@ -19,7 +19,7 @@ import { NhostClient, NhostReactProvider } from '@nhost/react'; import BadgesDashboard from 'common/badges-dashboard'; const nhost = new NhostClient({ - backendUrl: process.env.REACT_APP_NHOST_BACKEND_URL || '' + backendUrl: import.meta.env.VITE_NHOST_BACKEND_URL || '' }); const RouteDefs = () => { @@ -49,7 +49,7 @@ const RouteDefs = () => { } path="/plays"> } /> } path="create" /> - {process.env.NODE_ENV === 'development' && ( + {import.meta.env.NODE_ENV === 'development' && ( } path="created/:playid" /> )} } path=":username"> diff --git a/src/common/services/request/index.js b/src/common/services/request/index.js index 3f08ef3a3c..504f1d7f53 100644 --- a/src/common/services/request/index.js +++ b/src/common/services/request/index.js @@ -1,7 +1,9 @@ import { submit as gsubmit, submit_multi as gsubmit_multi } from 'json-graphql-parser/v2/index.js'; import axios from 'axios'; -const BACKEND_URL = `${process.env.REACT_APP_NHOST_BACKEND_URL}/${process.env.REACT_APP_NHOST_VERSION}/${process.env.REACT_APP_NHOST_ENDPOINT}`; +const BACKEND_URL = `${import.meta.env.VITE_NHOST_BACKEND_URL}/${ + import.meta.env.VITE_NHOST_VERSION +}/${import.meta.env.VITE_NHOST_ENDPOINT}`; /** * Run GraphQL queries using Axios using multiple JSON object diff --git a/src/common/techstack/TechStackInfo.js b/src/common/techstack/TechStackInfo.js index 03cbb7e841..cd2df80315 100644 --- a/src/common/techstack/TechStackInfo.js +++ b/src/common/techstack/TechStackInfo.js @@ -11,7 +11,8 @@ import { SiHasura, SiPostgresql, SiPython, - SiNodedotjs + SiNodedotjs, + SiVite } from 'react-icons/si'; import NHost from 'images/nhost.svg'; import Umami from 'images/umami.svg'; @@ -106,5 +107,11 @@ export const TechStackInfo = [ text: 'Umami', type: 'image', link: 'https://umami.is/' + }, + { + comp: SiVite, + text: 'Vite', + type: 'icon', + link: 'https://vitejs.dev/' } ]; diff --git a/src/common/utils/coverImageUtil.js b/src/common/utils/coverImageUtil.js index 144748e5fc..15fa6733dc 100644 --- a/src/common/utils/coverImageUtil.js +++ b/src/common/utils/coverImageUtil.js @@ -1,6 +1,8 @@ export async function loadCoverImage(playSlug) { const acceptedImgExtensions = [`png`, `jpg`, `jpeg`]; - const imgPromises = acceptedImgExtensions.map((ext) => import(`plays/${playSlug}/cover.${ext}`)); + const imgPromises = acceptedImgExtensions.map((ext) => + import(/* @vite-ignore */ `plays/${playSlug}/cover.${ext}`) + ); const response = await Promise.allSettled(imgPromises); diff --git a/src/index.jsx b/src/index.jsx index d80e9f454e..dbef4ca16a 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -11,7 +11,7 @@ import 'react-toastify/dist/ReactToastify.css'; /** removing console statement in react prod build */ /* eslint-disable no-console */ -if (process.env.NODE_ENV !== 'development') { +if (import.meta.env.NODE_ENV !== 'development') { console.log = () => {}; console.debug = () => {}; console.info = () => {}; diff --git a/src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js b/src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.jsx similarity index 100% rename from src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js rename to src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.jsx diff --git a/src/plays/codenchill/features/Timer/GuideModal.jsx b/src/plays/codenchill/features/Timer/GuideModal.jsx index 88166ce909..9f9e4fe4ec 100644 --- a/src/plays/codenchill/features/Timer/GuideModal.jsx +++ b/src/plays/codenchill/features/Timer/GuideModal.jsx @@ -1,10 +1,10 @@ import React, { useEffect, useState } from 'react'; import { BsInfoCircle } from 'react-icons/bs'; import { MdClose } from 'react-icons/md'; -import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Modal from '@mui/material/Modal'; +import Box from '@mui/material/Box'; const GuideModal = () => { const [openModal, setOpenModal] = useState(false); diff --git a/src/plays/codenchill/features/Timer/TimerControlSlice.js b/src/plays/codenchill/features/Timer/TimerControlSlice.jsx similarity index 100% rename from src/plays/codenchill/features/Timer/TimerControlSlice.js rename to src/plays/codenchill/features/Timer/TimerControlSlice.jsx diff --git a/src/plays/cricket-game/CricketGame.jsx b/src/plays/cricket-game/CricketGame.jsx index 8529f323f8..712cebb176 100644 --- a/src/plays/cricket-game/CricketGame.jsx +++ b/src/plays/cricket-game/CricketGame.jsx @@ -8,15 +8,16 @@ import wicketImg from './assets/wicket.svg'; import hitWicketImg from './assets/hitwicket.svg'; // Component imports -import Modal from './components/Modal'; -import Pitch from './components/Pitch'; -import ScorePanel from './components/ScorePanel'; -import TopBar from './components/TopBar'; -import EndGameScreen from './components/EndGameScreen'; +import Modal from './components/Modal.jsx'; +import Pitch from './components/Pitch.jsx'; +import ScorePanel from './components/ScorePanel.jsx'; +import TopBar from './components/TopBar.jsx'; +import EndGameScreen from './components/EndGameScreen.jsx'; // Game logic imports -import { LEVELS } from './game/levels'; -import { sleep } from './game/utils'; +import { LEVELS } from './game/levels.js'; +import { sleep } from './game/utils.js'; + import { GameRef, GameState, diff --git a/src/plays/cricket-game/components/ScorePanel.jsx b/src/plays/cricket-game/components/ScorePanel.jsx index dead23302d..a290c41926 100644 --- a/src/plays/cricket-game/components/ScorePanel.jsx +++ b/src/plays/cricket-game/components/ScorePanel.jsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; -import Score from './Score'; -import InfoBox from './InfoBox'; -import CommentaryTimeline from './CommentaryTimeline'; +import Score from './Score.jsx'; +import InfoBox from './InfoBox.jsx'; +import CommentaryTimeline from './CommentaryTimeline.jsx'; export default function ScorePanel(props) { const { userLevel, gameState, matchInProgress, commentary } = props; diff --git a/src/plays/dad-jokes/components/jokeList/jokeList.jsx b/src/plays/dad-jokes/components/jokeList/jokeList.jsx index 7db4eb7422..d332de1d53 100644 --- a/src/plays/dad-jokes/components/jokeList/jokeList.jsx +++ b/src/plays/dad-jokes/components/jokeList/jokeList.jsx @@ -18,11 +18,13 @@ const JokeList = ({ darkTheme }) => { // Fetching Jokes async function fetchJokes(category) { let { data } = await axios.get( - `${process.env.REACT_APP_DADJOKES_URL}${category}?type=single&amount=10&blacklistFlags=nsfw&safe-mode`, + `${ + import.meta.env.VITE_DADJOKES_URL + }${category}?type=single&amount=10&blacklistFlags=nsfw&safe-mode`, { headers: { - 'X-RapidAPI-Key': process.env.REACT_APP_DADJOKES_APIKEY, - 'X-RapidAPI-Host': process.env.REACT_APP_DADJOKES_APIHOST + 'X-RapidAPI-Key': import.meta.env.VITE_DADJOKES_APIKEY, + 'X-RapidAPI-Host': import.meta.env.VITE_DADJOKES_APIHOST } } ); diff --git a/src/plays/digital-delight/components/CategoryFact.jsx b/src/plays/digital-delight/components/CategoryFact.jsx index 8ed3c8c5dd..fb2e52eaad 100644 --- a/src/plays/digital-delight/components/CategoryFact.jsx +++ b/src/plays/digital-delight/components/CategoryFact.jsx @@ -32,7 +32,7 @@ function CategoryFact() { url: `https://numbersapi.p.rapidapi.com/random/${type}`, params: { fragment: 'true', json: 'true' }, headers: { - 'X-RapidAPI-Key': process.env.REACT_APP_DIGITSDELIGHT_APIKEY, + 'X-RapidAPI-Key': import.meta.env.VITE_DIGITSDELIGHT_APIKEY, 'X-RapidAPI-Host': 'numbersapi.p.rapidapi.com' } }; diff --git a/src/plays/digital-delight/components/Random.jsx b/src/plays/digital-delight/components/Random.jsx index cf3b9e14b8..99fba3c20e 100644 --- a/src/plays/digital-delight/components/Random.jsx +++ b/src/plays/digital-delight/components/Random.jsx @@ -15,7 +15,7 @@ function Random() { url: 'https://numbersapi.p.rapidapi.com/random/trivia', params: { min: '1', max: '999', fragment: 'true', json: 'true' }, headers: { - 'X-RapidAPI-Key': process.env.REACT_APP_DIGITSDELIGHT_APIKEY, + 'X-RapidAPI-Key': import.meta.env.VITE_DIGITSDELIGHT_APIKEY, 'X-RapidAPI-Host': 'numbersapi.p.rapidapi.com' } }; diff --git a/src/plays/digital-delight/components/TextFact.jsx b/src/plays/digital-delight/components/TextFact.jsx index 3d2658bfae..04ffc05f69 100644 --- a/src/plays/digital-delight/components/TextFact.jsx +++ b/src/plays/digital-delight/components/TextFact.jsx @@ -16,7 +16,7 @@ const TextFact = () => { url: `https://numbersapi.p.rapidapi.com/${number}/trivia`, params: { fragment: 'true', notfound: 'floor', json: 'true' }, headers: { - 'X-RapidAPI-Key': process.env.REACT_APP_DIGITSDELIGHT_APIKEY, + 'X-RapidAPI-Key': import.meta.env.VITE_DIGITSDELIGHT_APIKEY, 'X-RapidAPI-Host': 'numbersapi.p.rapidapi.com' } }; diff --git a/src/plays/emojipedia/config.js b/src/plays/emojipedia/config.js index cbd07fcdaf..68e75fc772 100644 --- a/src/plays/emojipedia/config.js +++ b/src/plays/emojipedia/config.js @@ -1,2 +1,4 @@ // API Base URL -export const API_BASE_URL = `https://emoji-api.com/emojis?access_key=${process.env.REACT_APP_EMOJI_API_KEY}`; +export const API_BASE_URL = `https://emoji-api.com/emojis?access_key=${ + import.meta.env.VITE_EMOJI_API_KEY +}`; diff --git a/src/plays/quizeo/redux/movie/movieSelector.js b/src/plays/quizeo/redux/movie/movieSelector.js index deb2a766c2..e4e9186b2d 100644 --- a/src/plays/quizeo/redux/movie/movieSelector.js +++ b/src/plays/quizeo/redux/movie/movieSelector.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect'; -import memoize from 'lodash.memoize'; +import { memoize } from 'lodash'; const selectMovie = (state) => state.movie; diff --git a/src/plays/random-quote-card-generator/Components/CardContainer.jsx b/src/plays/random-quote-card-generator/Components/CardContainer.jsx index ddbc0515e4..96adf15f95 100644 --- a/src/plays/random-quote-card-generator/Components/CardContainer.jsx +++ b/src/plays/random-quote-card-generator/Components/CardContainer.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import { FaQuoteLeft } from 'react-icons/fa'; -import data from '../data'; + const CardContainer = ({ gradientColor, quote, diff --git a/src/plays/react-transitions/PrioitySearch.js b/src/plays/react-transitions/PrioitySearch.jsx similarity index 100% rename from src/plays/react-transitions/PrioitySearch.js rename to src/plays/react-transitions/PrioitySearch.jsx diff --git a/src/plays/react-transitions/ReactTransitions.js b/src/plays/react-transitions/ReactTransitions.jsx similarity index 100% rename from src/plays/react-transitions/ReactTransitions.js rename to src/plays/react-transitions/ReactTransitions.jsx diff --git a/src/plays/react-transitions/TransitionSearch.js b/src/plays/react-transitions/TransitionSearch.jsx similarity index 100% rename from src/plays/react-transitions/TransitionSearch.js rename to src/plays/react-transitions/TransitionSearch.jsx diff --git a/src/plays/simple-live-chat/firebase.js b/src/plays/simple-live-chat/firebase.js index 6803614887..85112dd0f4 100644 --- a/src/plays/simple-live-chat/firebase.js +++ b/src/plays/simple-live-chat/firebase.js @@ -1,13 +1,13 @@ import { initializeApp } from 'firebase/app'; const firebaseConfig = { - apiKey: process.env.REACT_APP_FIREBASE_API_KEY, - authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, - databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL, - projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, - storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, - messagingSenderId: process.env.REACT_APP_MESSAGING_SENDERID, - appId: process.env.REACT_APP_FIREBASE_APP_ID + apiKey: import.meta.env.VITE_FIREBASE_API_KEY, + authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, + databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL, + projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, + storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET, + messagingSenderId: import.meta.env.VITE_MESSAGING_SENDERID, + appId: import.meta.env.VITE_FIREBASE_APP_ID }; export const firebase = initializeApp(firebaseConfig); diff --git a/src/plays/tube2tunes/Tube2tunes.jsx b/src/plays/tube2tunes/Tube2tunes.jsx index 6d2f686516..f511957eb4 100644 --- a/src/plays/tube2tunes/Tube2tunes.jsx +++ b/src/plays/tube2tunes/Tube2tunes.jsx @@ -37,7 +37,7 @@ function Tube2tunes(props) { method: 'get', url: 'https://youtube-mp36.p.rapidapi.com/dl', headers: { - 'X-RapidAPI-Key': process.env.REACT_APP_TUBETUNES_APIKEY, + 'X-RapidAPI-Key': import.meta.env.VITE_TUBETUNES_APIKEY, 'X-RapidAPI-Host': 'youtube-mp36.p.rapidapi.com' }, params: { diff --git a/src/plays/video-preview/VideoPreview.tsx b/src/plays/video-preview/VideoPreview.tsx index c114497c4c..5b750bf4ed 100644 --- a/src/plays/video-preview/VideoPreview.tsx +++ b/src/plays/video-preview/VideoPreview.tsx @@ -16,7 +16,7 @@ function VideoPreview(props: any) { params: ALL_PARAMS, headers: HEADERS }; - const { data } = await axios.get(process.env.REACT_APP_SEARCH_URL, OPTIONS); + const { data } = await axios.get(import.meta.env.VITE_SEARCH_URL, OPTIONS); return data; }; diff --git a/src/plays/video-preview/utils/constants.ts b/src/plays/video-preview/utils/constants.ts index 15368db09e..bcf942f94c 100644 --- a/src/plays/video-preview/utils/constants.ts +++ b/src/plays/video-preview/utils/constants.ts @@ -1,6 +1,6 @@ export const HEADERS: { 'X-RapidAPI-Key': string; 'X-RapidAPI-Host': string } = { - 'X-RapidAPI-Key': process.env.REACT_APP_SEARCH_APIKEY, - 'X-RapidAPI-Host': process.env.REACT_APP_SEARCH_APIHOST + 'X-RapidAPI-Key': import.meta.env.VITE_SEARCH_APIKEY, + 'X-RapidAPI-Host': import.meta.env.VITE_SEARCH_APIHOST }; export const PARAMS: { hl: string; gl: string } = { diff --git a/src/plays/weather/components/CityInput.jsx b/src/plays/weather/components/CityInput.jsx index 9f5f78fefe..b9aae320dc 100644 --- a/src/plays/weather/components/CityInput.jsx +++ b/src/plays/weather/components/CityInput.jsx @@ -23,7 +23,9 @@ export default function CityInput({ setIsLoading(true); const res = await fetch( - `${WEATHER_API_BASE_URL}/weather?q=${cityInput}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric` + `${WEATHER_API_BASE_URL}/weather?q=${cityInput}&appid=${ + import.meta.env.VITE_WEATHER_API_KEY + }&units=metric` ); const json = await res.json(); diff --git a/src/plays/weather/readme.md b/src/plays/weather/readme.md index e39acdce15..241cb3ca92 100644 --- a/src/plays/weather/readme.md +++ b/src/plays/weather/readme.md @@ -21,7 +21,7 @@ In the application, the user enters the city or region's name. The weather data ## Consideration The OpenWeather API requires an API key which can be generated from [this link](https://home.openweathermap.org/api_keys). -Set the environment variable REACT_APP_WEATHER_API_KEY equal to the API key generated from the OpenWeather site. +Set the environment variable VITE_WEATHER_API_KEY equal to the API key generated from the OpenWeather site. ## Resources diff --git a/src/plays/weather/utils/index.js b/src/plays/weather/utils/index.js index 28c601646d..e31476cc69 100644 --- a/src/plays/weather/utils/index.js +++ b/src/plays/weather/utils/index.js @@ -23,7 +23,9 @@ export const WEATHER_API_BASE_URL = 'https://api.openweathermap.org/data/2.5'; export const fetchForecast = async (lat, long, setForecastData) => { try { const res = await fetch( - `${WEATHER_API_BASE_URL}/forecast?lat=${lat}&lon=${long}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric` + `${WEATHER_API_BASE_URL}/forecast?lat=${lat}&lon=${long}&appid=${ + import.meta.env.VITE_WEATHER_API_KEY + }&units=metric` ); const data = await res.json(); setForecastData(data); diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index fdc9ac5024..2087e7ff45 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -1,9 +1,9 @@ import { Workbox } from 'workbox-window'; const register = () => { - if (process.env.NODE_ENV !== 'production') return; + if (import.meta.env.NODE_ENV !== 'production') return; if (navigator?.serviceWorker) { - const wb = new Workbox(`${process.env.PUBLIC_URL}/service-worker.js`); + const wb = new Workbox(`${import.meta.env.PUBLIC_URL}/service-worker.js`); const checkForUpdate = () => { const isUpdate = window.confirm('New Update Available. Click OK to update'); diff --git a/src/service-worker.js b/src/service-worker.js index fae0169328..32a18e26d2 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -24,7 +24,7 @@ registerRoute(({ request, url }) => { } return true; -}, createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')); +}, createHandlerBoundToURL(import.meta.env.PUBLIC_URL + '/index.html')); registerRoute( ({ url }) => { diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000000..083a5ec64c --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line spaced-comment +/// diff --git a/tsconfig.json b/tsconfig.json index f770db1c85..69a1e7340d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,16 +2,19 @@ "compilerOptions": { "jsx": "react", "baseUrl": "src", - "outDir": "./dist/", "noImplicitAny": true, - "module": "es6", - "lib": ["es2022", "ES6", "DOM"], - "target": "es6", + "module": "ESNext", + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "target": "ESNext", "allowJs": true, - "moduleResolution": "node", + "moduleResolution": "Node", "suppressImplicitAnyIndexErrors": false, "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "esModuleInterop": false, "allowSyntheticDefaultImports": true }, - "include": ["src/**/*", "public/serviceWorker.js", "src/globals.d.ts"] + "include": ["src/**/*", "public/serviceWorker.js", "src/globals.d.ts"], + "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000000..9d31e2aed9 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000000..021501fd5c --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import viteTsconfigPaths from 'vite-tsconfig-paths'; +import svgrPlugin from 'vite-plugin-svgr'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react(), viteTsconfigPaths(), svgrPlugin()], + define: { + 'process.env': {}, + global: {} + }, + build: { + outDir: 'build' + }, + server: { + open: true + } +});