I have built some code with React. During its "development build", npm start at localhost:3000 give me the correct behavior.
However, after npm run build and serve -s build, the site at localhost:5000 give me this error: Can't remove headers after they are sent.
I have tried to take out everything and make it a bare bone project but the error still appears.
I have tried the production build before and this just happened.
Answer:
Nothing serious. I reinstalled serve package and it is now OK. Seems that a recent update to serve (npm i -g serve) got broken and after reinstall serve package, it is now OK.
Related
Fresh Next project -> "npm i --save-dev sass"
then in /pages/_app.tsx I write at the top:
import '#/assets/globals.scss;
The file exists and the path is correct. But the project doesn't load. If I run "npm run dev", the website is stuck loading forever and the console just says:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
If I run "npm run build", it's stuck with "Creating an optimized production build..."
The console doesn't display any error or warning, nothing. I've tried running these commands with --verbose, but nothing useful. If I change the file to .css and import "...css", then everything works fine. I change it back to .scss, and stuck again.
I didn't add any next configuration.
Next version: 13.1.2
Sass version: ^1.57.1
Node version: v14.20.0 (I can't upgrade because all of my projects crash)
OS: Mac OSX
I've tried to search for this error 'cause I thought someone else would have it, but I find nothing. I've also checked the official Next Github issues page. I've tried to find errors or warnings in the console, but nothing. I've followed the official Next documentation, and as I say is a fresh project, nothing special. And as I said, If I remove .scss files and use only .css, the project works.
Sorry for not being able to provide more info. If you need something else please ask and I will edit the question.
EDIT:
don't know if it's related, but while I fixed this problem I tried to compile myself .scss files into .css, and use .css because then my project works.
I tried to run "node-sass ./styles.scss" and it displayed this error:
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 14.x
I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch
i have a this little issue.
I have a new laptop, and I decided to do react project.
I installed the Node's stable version, installed the the npm create-react-app globally, and created a new project using this command npx create-react-app tip-calculator.
Everything was set up for me, only deleted a few files on the src folder, and kept the essentials (index.js, app.js and index.css).
My issues, is on my previous laptop, when doing projects, the webpack (is what i think it is) didn't show up in the console, and on the new laptop, it shows, and I would like it removed.
This is a freshly baked react project, so I didn't touch it's code, aside from the files I deleted.
It's not an issue, it's expected behavior by react-scripts because these logs are hardcoded in react-scripts and currently, there are no options for disabling them. You have probably had an older version of create-react-app in your previous laptop which might have not logged this information on the console.
What is really happening is that you are running react-scripts with npm start and react-scripts are logging webpack logs.
There is also this question which is similar to yours about running react-scripts silently.
If you really don't want to see the output you can redirect it to null:
Linux & Mac: npm start > /dev/null
Windows CMD: npm start > null
Windows Powershell: npm start > $null
I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.
create-react-app and npm noob here, and I'm having some trouble with deploying to production. When I start my app, I want to start a specific js file, as well as run the normal react-scripts start. So in my package.json, I have the following.
"scripts": {
"start": "node -r esm src/server.js & react-scripts start",
...
}
When I run npm start, it works great, both scripts are executed locally and up and running.
My cursory reading seems to indicate that npm start is just for development though. In production, the build/ folder will be used and... I can't figure out how it's run. Testing locally, after running npm run build, the build/ folder is made. And then running serve -s build, something is executed, but it's not my npm start script. It looks like it's just react-scripts start. Attempting to deploy to several real-life production servers like Firebase and Netlify behaves the same way.
So how exactly is the production build started? And how can I configure it to behave like my development build.
I feel like I must be misunderstanding something fundamental as I can't find any explanation online, but any help would be appreciated.
If you're interested in why exactly I have this strange setup, I'm attempting to deploy boardgame.io with a multiplayer server.
The reason to use npm start is so that you can fire up a local web server on the fly and paired with nodemon and other goodies, changes to the source can easily be viewed as if it were in production.
npm build transpiles the source into a lightweight, lazy loading bundle suitable for production. Once the build is complete, you use a web server to host build/index.html and access the site from there. What you use to host it is up to you (most commonly nginx but you could use something like apache or node like you're alluding to with serve -s build).