I am using nodemon in a straight forward express app, something has recently happened and every-time I save a child file in a folder, a dist folder is created and a child file created with the same name - with the addition of .dev. in the filename.
As far as I understand a dist file is created only once I finally compile the app for production - not when in development?
How can I stop the dist file from getting created each time I save?
My package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
i.e
Before Save
- routes
- tests.route.js
After Save
- routes
- dist
- tests.route.dev.js
- tests.route.js
I was using a plugin called: Sass/Less/Typescript/Jade/Pug Compile Hero Plugin with VScode, it was creating a new dist file on every save.
I followed this to fix it: Vs code create folder automatically with (dist) name - Basically you want to uninstall the plugin.
For fixing it I follow these steps Given bellow and it is solved:-
Click on Extensions button of VS Code or press Ctrl+Shift+X.
Search for Hero Extension which shown bellow.
Click on Disable.
Click on Reloade.
Related
My nextjs app was working properly I added some files to update my code now it is not deploying my app on vercel. gives this error
I tried googling the error but my case in unique.
This is the git repo
https://github.com/usman-174/google-calendar-frontend
These are my script tags from package.json
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "next lint",
"lint-fix": "next lint --fix"
},
next.config.js
module.exports = {
distDir: 'build',
}
I also ran into this error because the root directory of my app was not in the top-level directory of my Git repository, so Vercel was unable to find the .next folder.
I fixed it by going to the Vercel dashboard for my Vercel project, then -> Settings -> General and setting Root Directory to the subdirectory path to my application:
Issue was we were using 'latest' in package.json for next version. I fixed it to previous version of nextjs which is 12.3.1 for us seems to have fixed the deployment for now.
But still waiting for vercel support for best way to update nextjs version in deployment for vercel or is it some sort of bug their end.
Run npm run build (check all files in builded folder)
Create .next folder and move all files from build folder to .next
Commit your .next folder to vercel or maybe git.
In my case, make sure please if the folder within the project is called "web", the json name inside should be "web"!
In my case I had a few errors in my files
Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities
Which were being hidden in the Vercel build log because I forgot I had the following in next.config.js
eslint: {
ignoreDuringBuilds: true,
}
Which just showed me the error you have instead of the actual reason it failed.
Enabling eslint indirectly solved my issue as it led me to find the real error.
Overriding the build folder fixed my issue.
I have been struggling with deploy a next js application to azure app service as we want to render the application both static and dynamic so we need the node server to run. Is any body there is help me.
Note: I have already watched these videos and also applied these methods like adding the web.config and server.js files to root of my website but no luck it does not work. Also this article
https://parveensingh.com/next-js-deployment-on-azure-app-service/
but no luck.
A more detailed answer including steps using source control you can refer to.
I also test deploying directly from VS Code, which works fine, too.
Just like the link Monika post, the step to modify package.json you might forget. And make sure your project works well locally before publish to Azure.
package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
Below mentioned way's do not need server.js file or next export or pm2 scripts for deployment process.
Keep your package.json scripts as default next scripts:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
}
Way 1: VS Code - Azure Extension
Add below environment variable in your Azure App Service from Settings > Configurations
SCM_DO_BUILD_DURING_DEPLOYMENT="true"
Right Click on Azure App Service item and select Deploy to Web App option.
Select root folder for deployment.
Way 2: CI/CD Pipeline through Azure Devops(https://dev.azure.com/)
Here is a sample post you can refer
All credits goes to Suhas Talekar
https://itbusinesshub.com/blog/nextjs-node-app-on-azure-app-service/#how-to-host-next.js-app-on-azure's-app-service
Only change is you don't need pm2 script as startup command and no
need to create ecosystem.config.js file as well.
Rest process is same.
Starting nextjs app is taken care by Azure.
Is it possible to launch create-react-app App in a certain browser of my choice? Currently, it always runs in the Chrome while I want it to do that in the Chrome Canary. Does anybody know?
You can use BROWSER environment variable to set which browser you wanna open the app in. For example,
BROWSER=firefox yarn start
or
BROWSER=firefox npm start
will open the app in firefox.
So, you can put something like this in your package.json
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
"test": "react-scripts test --env=jsdom",
You can read more about it in this pull request thread
With current iterations of create-react-app this can be accomplished by adding a .env file to the project with a "BROWSER" key. It's described in the Advanced Configuration section of the documentation.
If you want to use Google Chrome Canary for your development browser (as I do) then you'll need to create that .env file in the root of the project with the following contents:
# Override default browser for npm start in react-script
BROWSER=Google Chrome Canary
Be sure you don't get overzealous and quote it or add a semi-colon at the end. I did both and scratched my head at first why it didn't work.
You can use .env file with BROWSER=firefox
https://create-react-app.dev/docs/advanced-configuration/
This worked for me:
Set Chrome Canary as default browser in PowerShell (choose the right path first)
$chromePath = "${Env:ProgramFiles(x86)}\Google\Chrome\Application\"
$chromeApp = "chrome.exe"
$chromeCommandArgs = "--make-default-browser"
& "$chromePath$chromeApp" $chromeCommandArgs
(answer from)
https://stackoverflow.com/a/17536704/11878186
Set variable BROWSER=Chrome in .env file in root directory
I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start
For example, if your package.json file contains:
"scripts": {
"start": "make start",
"test": "make test",
}
^ Will nodejitsu be able to parse and implement "make start"?
If the server.js file contains the static file path of the following directory then only the makefile functionality will work.
Nodejitsu should parse this just fine. Just be sure that you are calling node <app file>.js in your Makefile somewhere, or you change it to make start && node <app file.js>. Nodejitsu uses npm start to start your application, so the Makefile exiting without starting the app would cause the deployment to fail.