I'm using nodemon with the following configuration in nodemon.json.
{
"verbose": true,
"ignore": ["node_modules", ".next", "app/"],
"watch": ["app.js"]
}
I'm using this booilerplate with follwing configuration in package.json.
"build": "cd app && next build",
"start": "npm run build && env NODE_ENV=production node app.js -p >$PORT",
"learn": "npm run build && env NODE_ENV=production node app.js",
"dev": "nodemon -w app.js app.js"
Once I run npm run dev, I'm getting following output.
Using "webpackDevMiddleware" config function defined in
next.config.js. Using external babel configuration Location:
"/home/shintaro/Desktop/projects/frontend/app/.babelrc"
and the server never starts...
Related
I was trying to get this setup to work for a while and there is no support or similar issues over the web. There is actually one closed topic on Local community but no solution at all.
So, my setup is:
Local by Flywheel server for WordPress
VS Code with Node installed
#wordpress/scripts to bundle all my CSS and JS files
browser-sync to live reload
Here is my .json file:
{
"name": "mywebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"live": "npm-run-all --parallel sync start",
"sync": "browser-sync start -p 'mywebsite.local' --files '**/*.php' 'build/*.js' 'build/*.css'",
"build": "wp-scripts build",
"start": "wp-scripts start",
"dev": "wp-scripts start",
"devFast": "wp-scripts start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#wordpress/scripts": "*",
"browser-sync": "^2.27.9",
"node-sass": "^7.0.1",
"normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5"
}
}
So, the Browser Sync starts nicely in the command line, when starting it opens a new browser windows with this Error below.
There is nothing in the Local's log as they advice on this error screen.
Do anyone encounters similar problems and have the knowledge how to fix that?
I would be super grateful for any hints, walkarounds or solutions or maybe someone can share the other simple setup ideas to achieve the live reload functionality?
I had the same issue, it comes from the combination of npm-run-all and browser-sync. Instead of using npm-run-all, I used browser-sync as a webpack plugin.
Install browser-sync-webpack-plugin
npm install browser-sync-webpack-plugin -D
Then add browser-sync-webpack-plugin as plugin in your webpack.config.js file. As you use #wordpress/scripts, your config will be :
const defaultConfig = require( '#wordpress/scripts/config/webpack.config' );
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
...defaultConfig,
plugins: [
...defaultConfig.plugins,
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost',
port: 3000,
proxy: 'http://YOURDOMAIN.local/'
})
]
};
Take care to replace YOURDOMAIN.
Now when you run :
npm start
browser-sync will be automatically launched.
I am on Windows 10 with Node v14.15.4 and npm 6.14.10
I have executed below command successfully
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest postcss-cli cssnano onchange
This has no effect :
"tw:prod": "SET NODE_ENV=production postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",
If I remove SET NODE_ENV=production it works but public/css/tailwind.css is still 3.2MB.
"tw:prod": "postcss build ./src/css/tailwind.css -o ./public/css/tailwind.css",
Why isn't it purging ?
You probably have to create a configuration file and provide the paths of your templates in the purge option.
npx tailwindcss init
// tailwind.config.js
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.vue',
'./src/**/*.jsx',
],
theme: {},
variants: {},
plugins: [],
}
I am trying to deploy my Storybook on Netlify, I'm using Next.js framework but it fails every time and I don't know what is wrong
Netlify configuration :
Build command: npm run build-storybook
Publish directory: storybook-static
My package.json:
{
"homepage": "https://github.com/alexCoding42/tailwind-storybook",
"name": "tailwind-storybook",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"next": "10.0.9",
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#netlify/plugin-nextjs": "^3.0.3",
"#storybook/addon-actions": "^6.2.0-alpha.22",
"#storybook/addon-essentials": "^6.2.0-alpha.22",
"#storybook/addon-links": "^6.2.0-alpha.22",
"#storybook/react": "^6.2.0-alpha.22",
"#types/node": "^14.14.35",
"#types/react": "^17.0.3",
"babel-loader": "^8.2.2",
"gh-pages": "^3.1.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.1",
"tailwindcss": "^2.0.4",
"typescript": "^4.2.3"
}
}
The error I get on Netlify:
Plugin "#netlify/plugin-nextjs" internal error
Error: No static assets found in .next dist (aka no /.next/static). Please check your project configuration. Your next.config.js must be one of serverless or experimental-serverless-trace. Your build command should include next build.
I have also tried to add a netlify.toml at the root of my project with this config:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
[[plugins]]
package = "#netlify/plugin-nextjs"
And added #netlify/plugin-nextjsas dev dependency of package.json but I get the same error...
Can someone help me on this please ?
I had a similar problem but not with the storybook but with nx + nextjs.
If I tried to deploy the app to the netlify I got the same error.
So I changed next.config.js in the root directory and add to distDir path to generated .static folder and it's working now.
and this is my netlify.toml ss
The Netlify Next.js plugin isn't required for a Storybook build. In fact, no plugins are required; the only configuration needed is, as OP says:
Build command: npm run build-storybook
Publish directory: storybook-static
Or, in netlify.toml:
[build]
command = "npm run build-storybook"
publish = "storybook-static"
No [[plugins]] fields are needed.
If Netlify is configured through the UI, go to https://app.netlify.com/sites/my-awesome-site/plugins and remove the Next.JS plugin.
I have node-sass installed and have set the options as in the bottom response on Using node-sass watch option with npm run-script, however, it just doesn't seem to work for me.
This is my package.json file with my latest attempt:
{
"name": "linkup-paints",
"description": "NPM for Linkup Paint Supplies website for 2019",
"version": "1.0.2",
"main": "index.js",
"scripts": {
"start": "run-script-os",
"start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*, !styles/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
},
"author": "dpDesignz",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.3",
"run-script-os": "^1.0.3",
"node-sass": "^4.9.4"
}
}
So I've tried:
"build:sass": "node-sass -r --output-style compressed styles/main.scss -o css/main.css",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
and:
"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"
and:
"scss": "node-sass --watch styles/main.scss -o css/main.css"
and (as suggested by sidthesloth):
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
I run npm i, and once that's complete I run npm start. The browser-sync starts, and watches the file changes, but my css/main.css doesn't compile, or update when I change an .scss file.
I've only just started/learnt how to use NPM, so any help would be much appreciated. I've poured over tutorials and answers (including Using node-sass, Watch and Compile Sass in Five Quick Steps, and Using node-sass to compile Sass files in an npm script) for the past 2 hours with no luck.
How can I get my watch and build to work?
Update
So just an update for anyone looking for this in the future, I didn't understand how scripts worked and didn't realise that my scripts weren't being run parallel to each other. I thought npm start trigerred all my scripts to run, I didn't realise that you had to call all of them. My final package.json file is as follows:
{
"name": "linkup-paints",
"version": "1.0.3",
"description": "NPM for Linkup Paint Supplies website for 2019",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"start": "npm-run-all --parallel browser-sync build-sass watch-sass",
"browser-sync": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
},
"keywords": [
"linkup",
"2019"
],
"repository": {},
"author": "dpDesignz",
"license": "ISC",
"devDependencies": {
"npm-run-all": "^4.1.3",
"browser-sync": "^2.26.3",
"node-sass": "^4.9.4"
},
"bugs": {
"url": "http://support.dpdesignz.co"
},
"homepage": "http://www.dpdesignz.co"
}
I ended up adding the npm-run-all script and changing my start args to npm-run-all --parallel browser-sync build-sass watch-sass as I don't need cross-os compatability with the old run-script-os args I had previously. I also put the -w (--watch) arg in the browser-sync line to cause the created .css files to trigger a sync as the build actually replaces the .css file, not "changes" it as required by browser-sync by default.
These are the two NPM scripts that I use to either build or watch SCSS files using node-sass:
"build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css"
"watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css"
Hope this works for you
Whenever i click submit on the form that should send a notification to my listener, i get a message that says Cannot find module 'paypal-ipn'.
When i track the error, it takes me to a line of code ib the IPN listener var ipn = Meteor.npmRequire('paypal-ipn');
I added papal-ipn in my package.json here
{
"name": "application-name",
"version": "1.0.0",
"paypal-ipn" : "3.0.0",
"redis": "0.8.2",
"github": "0.1.8",
"body-parser": "1.14.1",
"description": "Application description.",
"scripts": {
"start": "meteor --settings settings-development.json",
"staging": "modulus env set METEOR_SETTINGS \"$(cat settings-development.json)\" -p 'Staging' && modulus deploy -f -p 'Staging'",
"production": "modulus env set METEOR_SETTINGS \"$(cat settings-production.json)\" -p 'Production' && modulus deploy -f -p 'Production'"
}
}
What is the mistake am doing? help PLEASE
ok try removing what you added to the package.json Run npm install --save paypal-ipn and that will add the required info to the package.json automatically for you.