I've recently tried to migrate our old site running on next 10 to the latest version 13. The site has a custom backend written with express. While running the project via concurrently I keep getting Module not found error as soon as I run the client on 3000. This is the scripts section("npm run dev" below is used to run the project):
"start_dev": "nodemon --inspect -w ./src/server -w ./src/server.js -w ./src/start.js ./src/start.js",
"build": "next build",
"client": "next dev",
"server": "npm run build && npm run start_dev",
"dev": "npx concurrently -k \"npm run server\" \"npm run client\""
Things seem to be working fine if I build the project first and then run client and server on separate terminals. But with this also, if I make a change in server that doesn't get picked up by client on the other terminal.
I'd highly appreciate if someone can give this a look as I'm stuck on the same issue for quite some time now. Please let me know if any further information is needed from my end here.
the problem is if the .next folder is generated by nodemon change, client side webpack hot reload cannot read .next folder
"scripts": {
"client": "next dev",
"build": "next build",
"server": "npm run build && npm run nodemon",
"start": "next start",
"lint": "next lint",
"nodemon": "nodemon -w ./src/server.js -w ./src/server ./src/start.js",
"dev": "concurrently -k \"npm run server\" \"npm run client\""
},
When you run npm run dev and refresh the page, this is how .next/pages folder. home index.js exists:
if I make a change in ./src/server.js after I see the home page on screen, .next folder will be recreated without index.js by nodemon change and if I refresh the page I will get error.
when you reload your page after change in server.js file you get error because index.js page does not exist. It does not exist because .next folder was not generated by webpack
When you first start the app, before refreshing the browser, if you make a change on server.js file, .next folder will be created and if you refresh the page you will get the same error. for some reason if .next folder generated by the nodemon change, client side cannot communicate by .next folder.
concurrently runs scripts in parallel, with npm run server you are calling next build and with npm run client you are calling next dev. So, you are calling next dev and next build scripts concurrently. Even though it says it is concurrently, I think it is not exactly concurrently. if you install npm i npm-run-all and add this script
"dev": "npm-run-all --parallel client server"
your app will never load, you will see flickering in a loop.
Related
I am trying to deploy a react app with the backend into the same repository on github pages. It all works fine until I add the backend code to it. I can deploy the front-end, but I cannot figure out how to deploy the backend to github.
In my package.json I have the followings:
....
"scripts": {
"start": "react-scripts start",
"server": "nodemon server.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
...
I have pushed it to github. Installed gh-pages package.
I have added
"homepage" : "https://[your-user-name].github.io/[your-repo-name]/"
“predeploy”:
“deploy”:
I think this is where I am going wrong. I know what predeploy and deploy should specify, but I have tried to enter a thousand different versions and I am getting error.
Github pages will not execute any serverside code. You may only upload static files (html,css,js, images, etc.).
In order to have a hosted backend you should look for another service like Google Cloud, AWS Lambda, Heroku, etc.
I noticed after building and deploying a Next.js website that the black compile indicator still shows up in the bottom-right of my browser like it would locally.
This indicator: https://i.stack.imgur.com/FVWEU.gif
On Next.js's website:
This indicator is only present in development mode and will not appear when building and running the app in production mode.
Even locally when I run yarn build and yarn start, the indicator displays while the page loads.
During the build process, it says:
Creating an optimized production build
Done in 20.89s.
My concern isn't so much that the indicator is displaying, because I can disable it. I'm concerned that I'm not getting an optimized build since something is displaying that should only be displaying in development mode.
Note: I can't share a link to the website as it is work-related.
Has anybody seen this issue before?
Thanks in advance!
Technical information:
Next.js Version 12.1.1
Dockerfile:
FROM node:16.13.0-alpine
# Install packages.
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
# Copy all other files.
COPY . .
# Build the app.
RUN yarn build
# USER node
EXPOSE 3003
CMD ["yarn", "start"]
package.json (scripts block):
"scripts": {
"dev": "node ssr-server.js",
"build": "next build",
"test": "node_modules/.bin/jest",
"test:coverage": "node_modules/.bin/jest --coverage",
"test:watch": "node_modules/.bin/jest --watch",
"start": "node ssr-server.js"
},
In the custom server JavaScript file, there should be a line that check if the environment is development or production:
const dev = process.env.NODE_ENV !== 'production'
update the start script in package.json to set that environment variable:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node ssr-server.js"
}
I'm using json-server as my local server for a nuxt project and i want to automatically launch the server and then run the project on another shell instance using "npm run dev"
in the scripts tag in package.json this is what i came up with :
"dev": "json-server --watch db.json --port 3004 & nuxt"
but this script only starts the server
try concurrently
npm install -g concurrently
"dev": "concurrently \"json-server --watch db.json --port 3004\" \"nuxt""
I am working on angular 7 application. Below are the scripts in my package.json file to build the application
"scripts": {
"build:all": "npm run build:dev & npm run postbuild",
"build:dev": "ng build --extract-css --watch",
"postbuild": "node fileMover.js",
}
I want to run both build:dev and postbuild commands in sequence.
so first command builds the application by updating the dist folder with bundle files. To move the bundle files to separate folders, we have created a fileMover.js node script.
without --watch, build:all script works fine but due to this, we need to manually run the command everytime we make any changes & save through visual studio or other tool. With watch, it never runs the second "postbuild" command.
Is there any alternate to run both scripts (fist with watch) in sequence?
Thanks :)
You could change the & to && as a single & is for running in parallel and double is for one after-the-other, I believe.
scripts": {
"build:all": "npm run build:dev && npm run postbuild",
"build:dev": "ng build --extract-css --watch",
"postbuild": "node fileMover.js",
}
You could also use the 'pre' and 'post' affixes:
scripts": {
"build:dev": "ng build --extract-css --watch",
"build:all": "npm run build:dev",
"postbuild:all": "node fileMover.js",
}
I forked this repo here, pretty straightforward. Now I point my project's package.json to use my fork. After I npm install everything looks good except the lib/dist folder is missing. I know npm run build needs to be run to generate those files and could just do that manually, but the Wix version somehow runs the build step on installation of the package. The only difference from the original is that I changed some iOS code. Do official npm packages (meaning ones you can install by name) get the benefit of some extra love after installation? What am I missing?
There's not much code to show, but I'll show the scripts section of the package.json file...
"scripts": {
"build": "rm -rf ./lib/dist && tsc",
"prestart": "npm run build",
"pretest-js": "npm run build",
"pretest-unit-ios": "npm run build",
"pretest-unit-android": "npm run build",
"test": "node scripts/test",
"start": "node ./scripts/start",
"pretest-e2e-ios-release": "npm run build",
"clean": "node ./scripts/clean",
"test-e2e-ios": "node ./scripts/test-e2e --ios",
"test-e2e-ios-release": "node ./scripts/test-e2e --ios --release",
"test-unit-ios": "node ./scripts/test-unit --ios",
"test-unit-android": "node ./scripts/test-unit --android",
"test-js": "node ./scripts/test-js",
"xcode": "open example/ios/NotificationsExampleApp.xcodeproj",
"androidStudio": "open -a /Applications/Android\\ Studio.app ./example/android",
"prerelease": "npm run build",
"release": "node ./scripts/release",
"generate-changelog": "gren changelog",
"docusaurus": "npm start --prefix website"
},
UPDATE: I added a prepare entry to my fork's package.json the dist files were created. I'm still curious as to why that is done automatically for the original repo.
This question has a lot in common with mine, maybe even a dupe. This answer took me a couple reads, but it led me to read the node documentation (gasp!). I inferred that package authors build and publish to npm (which is obvious), but that npm install doesn't actually go to git to grab the files, instead they have a tar from the publishing process. That was the missing part for me. Anyway, if you want to have your own personal package built on install, use prepare.