frankcollins3 / fill_container

codecamp team project updated with new icon screen menu + puppeteer icon search, GraphQL, redux, relational psql !mongo, and accuweatherAPI
1 stars 0 forks source link

webpack solves issue, provides NODE_ENV, but doesn't provide .env var [12:20pm] #253

Closed frankcollins3 closed 1 year ago

frankcollins3 commented 1 year ago

browser logs confirming NODE_ENV which is still a huge win because we can hard-code dev or prod url into the app either way process.env Rainydata.tsx:10 process.env

{
NODE_ENV: 'development', PUBLIC_URL: '', 
WDS_SOCKET_HOST: undefined,
 WDS_SOCKET_PATH: undefined, 
WDS_SOCKET_PORT: undefined, …
}

Rainydata.tsx:11 process.env.REACT_APP_API_DEV undefined

.env: REACT_APP_API_DEV="http://localhost:5000/" REACT_APP_API_PROD="http://vercelorfriends.com/prod/myapp"

^ ^ these types of variables dont appear ^ ^

frankcollins3 commented 1 year ago

proposed approach:

    let dev = env.REACT_APP_API_DEV      
    let prod = env.REACT_APP_API_PROD
    let NODE_ENV = env.REACT_APP_NODE_ENV
    let GOOGLE_ID = env.REACT_APP_GOOGLE_ID
    let EmergencyUser = env.REACT_APP_EUSER || {id: 1, googleId: '', password: '', username: '', email: 'no@nomail.com', age: 1 }   // so user can see app if the login doesn't allow for it.
    // let server = process.env.NODE_ENV === 'development' ? dev : prod
    **let serverStringForSplit = `${dev}***${prod}`**

the URL gets concatenated with the dev url and prod url and separated by *** for easy splitting can just use this as REDUX state and use process.env.NODE_ENV to overcome

[12:48pm]

frankcollins3 commented 1 year ago

let width = $(window).width()

inline prop setting: width: width! <= 800 ? ${percent/2.5} :${percent}%,

[5:40pm]