I'm learning Node.js and in the introductory course, I had to set-up node and npm. Now according to the instructor, after typing "npm start" in the terminal and then making changes in the index.html file, the browser is supposed to automatically refresh the tab for the changes to take effect, but in my case every time I make a change I had to manually refresh Safari tab to see the changes.
Please note I'm using the same machine, i.e. there is no server and client side per se. Operating system is macOS Catalina 10.15.6.
Any possible fixes please?
Thanks
File Structure:
package.json file:
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
"author": "Raffay",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.5.4"
},
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"nodemon": "^2.0.4",
"popper.js": "^1.16.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/RaffaySajjad/conFusion.git"
},
"keywords": [
"conFusion"
],
"bugs": {
"url": "https://github.com/RaffaySajjad/conFusion/issues"
},
"homepage": "https://github.com/RaffaySajjad/conFusion#readme"
}
Starting nodemon from terminal using command "nodemon" prints following error
raffaysajjad#192 ~ % cd /Users/raffaysajjad/Desktop/Full\ Stack\ Web\ Development\ \(React\ Specialization\)/Course\ 1\ \(Front-End\ WebUI\ Frameworks\ \&\ Tools\ -\ Bootstrap\ 4\)/Week\ 1/Exercise/conFusion
raffaysajjad#192 conFusion % nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: html,json
[nodemon] starting `node index.html`
/Users/raffaysajjad/Desktop/Full Stack Web Development (React Specialization)/Course 1 (Front-End WebUI Frameworks & Tools - Bootstrap 4)/Week 1/Exercise/conFusion/index.html:1
<!DOCTYPE html>
^
SyntaxError: Unexpected token '<'
at wrapSafe (internal/modules/cjs/loader.js:1053:16)
at Module._compile (internal/modules/cjs/loader.js:1101:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47
[nodemon] app crashed - waiting for file changes before starting...
this is done by using the npm package of nodemon,
How to Use
npm install -g nodemon
and in your package.json use this
"scripts": {
"start": "nodemon npm run lite"
},
more about nodemon learn here
Yeah.Try installing nodemon.
npm install nodemon
It is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
To run your server :
nodemon [your node app]
Nodemon will not helo you to browser reload for that kind of things you jest try plugins like connect-livereload
There are so many packages are there for this.
https://www.npmjs.com/package/reload
https://www.browsersync.io/
Related
I am trying to use webpack to analyze my bundles, but I am unable to do so. Get the following errors. How can I fix this?
The contents of my JSON are as follows. I am posting the errors that am receiving on git
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --disable-host-check",
"start:local": "BACKEND=http://localhost:3000 webpack-dev-server --mode development",
"test": "jest",
"lint": "eslint --cache --ext mjs,jsx,js --format codeframe \".*.js\" src test",
"coverage": "nyc --all jest --collectCoverage",
"codecov": "rm -rf .nyc_output/ && yarn coverage && nyc report --reporter=text-lcov && codecov",
"heroku-postbuild": "yarn build"
},
"
The error is pretty clear: webpack requires that you use unix style new lines, but it found windows style new lines.
This error is when compiling index.jsx, so the json is irrelevant.
Every tutorial or doc I find says that I should do something like this:
var elixir = require('laravel-elixir');
elixir.config.assetsPath = 'themes/ei/assets/src';
elixir.config.publicPath = 'themes/ei/assets/'
elixir(function(mix) {
mix.sass('style.scss');
mix.scripts('main.js');
});
But when I run gulp from the command line I get:
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/home/andrew/Development/eiweb/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/home/andrew/Development/eiweb/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/home/andrew/Development/eiweb/node_modules/laravel-elixir/dist/tasks/recipes/default.js:30:6)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at requireDir (/home/andrew/Development/eiweb/node_modules/require-dir/index.js:123:33)
My package.json file includes:
"dependencies": {
"gulp": "^4.0.2",
"laravel-elixir": "^6.0.0-18"
}
...and I have gulp-cli installed global.
What am I missing?
This issue occurs because of version issue gulp 4 has different signature for the task and laravel-elixir uses old signature of gulp 3 so it will cause error.
Best case would be to move https://laravel-mix.com as its based on webpack so it support more functionalities. also laravel-mix syntax is similar so its plus point.
For laravel-mix create this pacjage package.json file in root. or user latest from [ https://github.com/laravel/laravel ] public repo.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
}
}
Create webpack.mix.js in your root
const mix = require('laravel-mix');
// change theme path according to your need.
const themePath = 'themes/rainlab-bonjour';
mix.options({
publicPath: themePath + '/assets/compiled/'
})
// change script name and path according to your need.
mix.js(themePath + '/assets/src/main.js', 'main.js')
.sass(themePath + '/assets/src/main.scss', 'main.css');
Commands [ you can use this command with yarn or npm (I am using yarn)], you can read more info here. [ https://laravel-mix.com/docs/4.0/workflow ]
yarn watch -> it will watch files and compile files then generate compiled out-put in publicPath directory. in our case files will be.
themes/rainlab-bonjour/assets/compiled/main.js
themes/rainlab-bonjour/assets/compiled/main.css
Now you can just include them in theme using 'assets/compiled/main.js'|theme OctoberCms filter.
if you have any doubts please comment.
Has anyone ever tried using pkg with featherjs before? I'm having trouble getting it to work.
I get the following error when running my executable:
WARNING: No configurations found in configuration directory:/../project/config
WARNING: To disable this warning set SUPPRESS_NO_CONFIG_WARNING in the environment.
pkg/prelude/bootstrap.js:1172
throw error;
^
TypeError: root path required
at Function.serveStatic [as static] (/snapshot/../project/node_modules/serve-static/index.js:40:11)
Not sure where to go from here if anyone has any guidance.
"bin": "src/index.js",
"scripts": {
"test": "npm run eslint && npm run mocha",
"dev": "./node_modules/nodemon/bin/nodemon.js src/",
"eslint": "eslint src/. test/. --config .eslintrc.json",
"mocha": "mocha test/ --recursive --exit",
"start": "node src/",
"pkg": "pkg . -t node9-macos-x64 --out-path pkg"
},
"pkg": {
"assets": [
"src/**/*",
"public/**/*",
"config/**/*",
"node_modules/config/**/*.*"
],
"scripts": [
"src/**/*.js",
"config/**/*.json"
]
},
The error is coming from node-config used by #feathersjs/configuration which trying to load config/default.json from the folder of the running application, not the the bundled package. You can either try building with the NODE_CONFIG environment variable set to the content of config/defualt.json or remove app.configure(configuration()) and app.set the configuration options your application needs, for example by requiring config/default.json (which should also work in theh packaged environment):
const config = require('../config/default.json');
Object.keys(config).forEach(key => {
app.set(key, config[key]);
});
I'm trying to deploy a React on Node project I was working on and am running into some issues and I'm not certain why. Below is some information pulled from the log:
2018-02-11T00:12:22.875338+00:00 app[web.1]: > dmdb#1.0.0 start /app
2018-02-11T00:12:22.875340+00:00 app[web.1]: > node server.js
2018-02-11T00:12:22.875341+00:00 app[web.1]:
2018-02-11T00:12:23.315310+00:00 heroku[web.1]: State changed from starting to crashed
2018-02-11T00:12:23.299113+00:00 heroku[web.1]: Process exited with status 1
2018-02-11T00:13:23.976931+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=dmdb1.herokuapp.com request_id=8d37e10b-6999-4a2f-82bb-f3e724bf1c4e fwd="108.14.98.161" dyno= connect= service= status=503 bytes= protocol=https
Based on what the log shows, it seems like there's an issue with the start script in my package.json file, but I'm not sure why since I've used a similar one for another project I've deployed successfully. I did some research on this and I believe my Server.js file is configured and the ports are set up properly, I removed devdependencies and confirmed it works locally but not deployed, and I've got my SECRET_KEY set up in the vars since this has auth set up. Below is how I have my ports set up, and what my package.json file looks like on the backend. If anybody could please provide some insight I'd greatly appreciate it. If there's any additional information I can provide please let me know and I'll do so ASAP.
Ports from Server.js:
//app listening on port 1337
const PORT = process.env.PORT || 1337;
app.listen(PORT, () => {
console.log(`LISTENING ON PORT ${PORT}`)
})
Updated Package.json from Backside:
{
"name": "dmdb",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"dev": "nodemon server.js",
"debugger": "DEBUG=*:* nodemon server.js",
"prod": "NODE_ENV=production node server.js",
"deploy": "cd client && yarn build && cp -a ./build/ ../public/",
"heroku-postbuid" : "cross-env NODE_ENV=production WEBPACK_CONFIG=browser_prod,server_prod webpack --colors",
},
"engines": {
"node": "8.5.0",
"yarn": "1.3.2"
},
"author": "Dan Levenson",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"cookie-parser": "^1.4.3",
"cors": "^2.8.4",
"dotenv": "^4.0.0",
"ejs": "^2.5.7",
"ejs-lint": "^0.3.0",
"express": "^4.16.2",
"express-session": "^1.15.6",
"isomorphic-fetch": "^2.2.1",
"method-override": "^2.3.10",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"pg-promise": "^7.0.3"
}
}
Thanks in advance!
Editing post to include Package.JSON from client:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.0",
"reactstrap": "^5.0.0-beta"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"
}
Adding Build Log:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.5.0
engines.npm (package.json): unspecified (use default)
engines.yarn (package.json): 1.3.2
Resolving node version 8.5.0...
Downloading and installing node 8.5.0...
Using default npm version: 5.3.0
Resolving yarn version 1.3.2...
Downloading and installing yarn (1.3.2)...
Installed yarn 1.3.2
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (yarn.lock)
yarn install v1.3.2
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.30s.
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> web
-----> Compressing...
Done: 20.7M
-----> Launching...
Released v12
https://dmdb-1.herokuapp.com/ deployed to Heroku
Rebuilt app using NPM instead of Yarn and it deployed without issue and is running fine now. Thanks for the help!
THIS SOLUTION IS FOR GO .
When you deploy an app through heroku, it does not allow you to specify the port number.
In other words, you can not specify your web service's port number as 8000 or something else, heroku decides the port number in runtime.
so, you can not use the following code:
log.Fatal(http.ListenAndServe(":8000", router))
What you can do is, getting the runtime port of heroku.
In short, just use the following code:
log.Fatal(http.ListenAndServe(":" + os.Getenv("PORT"), router))
app works in localhost but when I am trying to deploy in heroku, it gets uploaded but app crashes when visited. why did heroku not install bcrypt-as-promised? These are my package.json scripts:
"scripts": {
"prestart": "babel -d ./build ./server ",
"start": "node ./build/",
"bundle": "webpack --config ./webpack.prod.config.js --progress --colors",
"build": "relay-compiler --src ./js/ --schema ./server/schema.graphql",
"update-schema": "babel-node ./scripts/updateSchema.js"
},
and this is my error on heroku logs -t:
Starting process with command `node ./build/`
2017-09-26T04:03:12.946916+00:00 app[web.1]: module.js:471
2017-09-26T04:03:12.946928+00:00 app[web.1]: ^
2017-09-26T04:03:12.946928+00:00 app[web.1]:
2017-09-26T04:03:12.946927+00:00 app[web.1]: throw err;
2017-09-26T04:03:12.946929+00:00 app[web.1]: Error: Cannot find module 'bcrypt-as-promised'
this is my first time using bcrypt-as-promised and I am so confused. is it different on other module? what makes it not installed in heroku?