I am currently working on a NextJS Project that has an component. On my local environment everything works fine, when the viewport width changes the iFrame reacts changing the styles for the rendered page inside it. After deployment on Vercel Rendering the same component doesn't work. Styles are not causing any sort of reaction on the component rendered inside the iFrame, not even media queries. Any idea on why this might be happening?
Thanks
I got similar issue before and it's because the deployment environment on production, just install cross-env package and change the build script in your package.json file like this :
"scripts": {
"dev": "cross-env NEXT_PUBLIC_FRAMEWORK=next NODE_ENV=development node server.js",
"build-next": "cross-env NEXT_PUBLIC_FRAMEWORK=next next build",
"build": "yarn build-next",
"start": "node server.js -p 80",
"build:staging": "env-cmd -f .env.staging yarn build",
"start-next": "cross-env NEXT_PUBLIC_FRAMEWORK=next NODE_ENV=production node server.js"
},
Related
I would like to run a vite react app locally in production mode? How can I do it?
In the vite docs I did get any solution for that. Any hint about the solution would be appreciated.
Go to package.json file of you vite react app.
modify your script like that :
{
"scripts": {
"build": "vite build",
"serve": "vite preview"
}
}
then run :
npm run build
npm run serve
Every time I add a new class in the className of a react component, i need to go to the terminal and type npm run build-css in order for the classes to take effect.
What npm run build-css does is "build-css": "npx tailwindcss build -o src/styles/main.css",.
Is there a way to not have to run the above command on every UI change I do? I have used tailwind css in nextjs by following the official guide and it updates on its own whenever I do a change in the UI.
My scripts:
"scripts": {
"prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer . ",
"start": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development && craco start",
"build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
"watch-css": "npx tailwindcss build -i src/styles/index.css -o src/styles/main.css --watch",
"build-css": "npx tailwindcss build -o src/styles/main.css",
"package-m1": "electron-forge package --arch=arm64 --platform=darwin",
"package-intel": "electron-forge package --arch=x64 --platform=darwin",
"package": "npm run package-m1 && npm run package-intel",
"postpackage": "electron-packager ./ --out=./builds"
},
You should be able to combine this command into your normal run command, I'm not sure if you're using a framework or not but if you go into you package.json and look at your normal run/start command you can edit that to include the tailwind build. Depending on if you are using a unix or windows environment it will be slightly different. For react it would look like this(I don't remember syntax for nextjs)
"start": "npx tailwindcss build -o src/styles/main.css && node scripts/start.js"
The above would be for windows and the below for unix
"start": "npx tailwindcss build -o src/styles/main.css & node scripts/start.js"
I am pretty new to React/Next JS. So here's my issue. I have purchased a theme and made changes to the config and branding part. Now when I run the app using "yarn dev" and "yarn start", it is working fine. "yarn build" also creates an optimized production build. I wanted to deploy the app locally in my PC and i was trying to learn things through youtube videos. so in one of the videos i found this command ("prod": "next build && serve build") to include in package.json. my package.json file has the following scripts.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "eslint --fix "src//*.{js,jsx}"",
"format": "prettier --write "src//*.{js,jsx}"",
"prod": "next build && serve build"
},
so when i try with "yarn prod", it is first creating an optimized build and then i get the following output in the vscode terminal
however if i try to open "http://localhost:3000" in my browser. i get 404 error. but not with "yarn dev" or "yarn start". no error while building the app too.
I deployed my react app on heroku and chose github as deployment method. To hide the source code, I added GENERATE_SOURCEMAP=false in a .env but it didn't work. In package.json also I tried adding
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build" but it didn't work. I also added it in Config Vars in the heroku project settings.
Please help!
If you are using linux adding it to the package.json will do the trick:
"scripts": {
...
"build": "GENERATE_SOURCEMAP=false react-scripts build"
},
How to use .env in react . I can get access to .env.development and .env.production with
"start":"react-scripts start",
"build": "react-scripts build",
How to get access to another like .env.staging ?
I gave like this
"build_staging": "set REACT_APP_ENV=staging & react-scripts build",
but not working.
Any suggestions please.
To keep things consistent across linux(my production server) and windows(my development server) I use cross-env
npm install --save cross-env
and my scripts look like this
"scripts": {
"dev": "cross-env NODE_ENV=development node server",
"build": "cross-env NODE_ENV=production next build ",
"start": "cross-env NODE_ENV=production node server"
},
so to set a custom env like REACT_APP_ENV you'll need to
"build_staging": "cross-env REACT_APP_ENV=staging react-scripts build",
and you can access it in your javascript code using
process.env.REACT_APP_ENV
also to start a staging server you might want to add
"start_staging": "cross-env REACT_APP_ENV=staging react-scripts start"
more about this here
[CONTEXT]
- I've created React project with Create React.
- Running on Windows 10
- Using VSCode IDE
- I have the file .env.development on above /src folder.
- My code has console.log(process.NODE_ENV) and console.log(process.REACT_APP_YOUR_KEY)
[PROBLEM]
When I'm running the program with npm start, the browser prints 'development' for NODE_ENV, but for my React .env variable, it prints undefined.
I try to run npm start with changing the default script of package.json to this start script: set REACT_APP_YOUR_KEY && react-scripts start. Then there isn't any undefined, all works well. 🤨
[SOLUTION]
The cause was that the file .env.development is not detected correctly. My hypothesis is the environment development file, Windows or VSCode don't detect well.
Windows File Explorer files
VS Code explorer. Look up the icon of the files 🤔
You have to change the file name from .env.development to .env.
[SOLUTION]: I've created env.js as shown below.
env.js placement
after that i have added in index.html the script below
my env.js content
NB: i can acces my env.js var without import them (it seems the best way for me)