nodejs start react-app client - node.js

I've made a web app using create-react-app which works fine, and I usually run it using npm start but now I have to deploy it and make it work with nodejs forever module.
If I do node src/index.js it will give a syntax error and to fix this I used babel to transpile es6 to es5, but again I get the following syntax error when importing the css file:
/client/src/stylesheets/menu.css:1
(function (exports, require, module, __filename, __dirname) { header {
^
SyntaxError: Unexpected token {
This is my package.json file:
{
"dependencies": {
"async": "^2.5.0",
"axios": "^0.16.2",
"classnames": "^2.2.5",
"date-diff": "^0.1.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-table": "^4.0.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.12",
"react-select": "^1.0.0-rc.5",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"shortid": "^2.2.8",
"validator": "^8.1.0"
},
"scripts": {
"start": "react-scripts-with-stylus start src/stylesheets/menu.styl",
"build": "react-scripts-with-stylus build src/stylesheets/menu.styl",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8081",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"create-react-app-stylus": "^1.1.1",
"webpack": "^3.5.5"
}
}

To sum up the answer to this question:
If you need to deploy it, you should make a build, not run your application directly.
run npm run build and it will generate build files into a new folder.
You should not try to run the application with npm at all. You should copy all the files from the build folder into the root of your server and when a user opens the page it will be shown index.html file.
If your code has changed and is ready for production you can rebuild it, or you can automate this process with some CI tool.
You should only have React client files on your Git repository, build files should be generated during the build process on your server.

Related

electron-forge package Error: Cannot find module

I am trying to run the packaged electron app on my local Mac. But get an error message saying Error: Cannot find module ... I think the node_module is not installed.
I used electron-forge package to build the package.
Is there something wrong with my webpack config?
https://github.com/zhex900/mir-kiosk-electron/blob/master/electron-kiosk/webpack.main.config.js
#package.json
"dependencies": {
"#aws-sdk/client-iot": "^3.14.0",
"#aws-sdk/client-s3": "^3.14.0",
"#aws-sdk/s3-request-presigner": "^3.14.0",
"aws-iot-device-sdk-v2": "^1.4.5",
"babel-runtime": "^6.26.0",
"electron-squirrel-startup": "^1.0.0",
"macaddress": "^0.5.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}

How can i deploy this project on heroku?

i'm new with node, i have to deploy my first application.
this is my package.json:
{
"name": "tbcw",
"description": "TheBestCollectors",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"truffle-compile": "truffle compile",
"truffle-serve": "truffle serve",
"truffle-test": "truffle test --network test"
},
"dependencies": {
"vue": "^2.4.4",
"vue-draggable-resizable": "^1.5.1",
"vuex": "^2.4.1",
"web3": "^1.2.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"ejs": "^2.5.7",
"ejs-compiled-loader": "^2.2.0",
"eslint": "^4.8.0",
"ethereumjs-testrpc": "^4.1.3",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"node-sass": "^4.9.4",
"null-loader": "^0.1.1",
"sass-loader": "^5.0.1",
"truffle": "^3.4.11",
"truffle-contract": "^1.1.6",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.4.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.9.1"
}
}
in local with dev mode everything works correctly.
Now I would like to publish my app on heroku.
after uploading the files with herokuCLI, when i run the app, I get an error page.
reading them via the command "heroku logs --tail"
based on different attempts i got different errors, like webpack not found, start script not found, cross-env not found...
how can i proceed?
Please let me know if you need more info.
thank you for all the replies
Looking at your package.json, it seems your are working on a client-side application. Such applications run in the client's browser, rather than in Node. Heroku is for running server-side applications, so it's probably not the right place to deploy your app.
Take a look at something like Vercel or Netlify instead. They provide tools to automatically build and deploy client-side applications to edge networks with only a few clicks.
Heroku, by default, doesn't install devDependencies. It seems your cross-env and webpack are listed as devDependencies. And you don't even have a start script.

Should I use npm install or npm update to keep my code up to date?

So I'm working on some projects within my work space and I notice that a lot of my dependencies are roughly 3 years old, including React itself. The thing I'm worried about is that if I run npm install or npm update that things might break and I could run into a plethora of issues. In my scenario I would like to know if it is better for me to do an npm install, npm update, or just leave it the way it is? (which I'm sure no one would recommend).
Here is our package.json file
{
"name": "my-app",
"version": "0.0.2",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node src/entry",
"start-dev": "npm-run-all --parallel build babel-node",
"serve": "live-server public/",
"build-linux": "clear && webpack && clear && yarn build-server && clear && yarn start",
"build-windows": "cls && webpack && cls && yarn build-server && cls && yarn start",
"build-server": "babel src/server -d src",
"dev-server": "webpack-dev-server",
"babel-node": "nodemon --exec babel-node src/server.js"
},
"dependencies": {
"aws-sdk": "^2.358.0",
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"core-js": "^2.5.3",
"css-loader": "0.28.4",
"express": "latest",
"file-loader": "^1.1.5",
"fs": "0.0.1-security",
"google-maps-react": "^1.1.4",
"html2canvas": "^1.0.0-rc.3",
"image-webpack-loader": "^4.6.0",
"immutability-helper": "^2.4.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.1.0",
"jspdf": "^1.5.3",
"lodash": "^4.17.14",
"moment": "^2.22.2",
"node-sass": "^4.11.0",
"nodemailer": "^4.7.0",
"normalize.css": "7.0.0",
"npm": "^6.10.1",
"promise-mysql": "^3.1.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-csv": "^1.0.14",
"react-dom": "^16.0.0",
"react-router-dom": "4.2.2",
"react-scripts": "^2.1.3",
"sass-loader": "6.0.6",
"socket.io": "^2.0.3",
"style-loader": "0.18.2",
"table2csv": "^1.1.1",
"twilio": "^3.24.0",
"validator": "8.0.0",
"webpack": "^3.12.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"concurrently": "^3.5.0",
"npm-run-all": "^4.1.1"
}
}
I already tried updating my react and react-dom versions to the latest, but I started getting warnings about componentWillMount and componentWillReceiveProps being outdated. I tried updating react-router-dom to get rid of some of those warnings, considering they were pointing to things like Link, Route, Switch, but that did not suppress them.
If anyone knows what the best way for me to go about this would be, and what the effects of npm install vs npm update would do to my system that would be great. I know what each of them is capable of doing, but I'm just trying to be cautious and want to know which one would be better in my scenario. Thanks.
When you run npm install on a project, npm installs latest versions satisfying the semantic versioning ranges defined in your package.json. After initial install, re-running npm install does not update existing packages since npm already finds satisfying versions installed on the file system.
When you run npm update it freshen already installed packages. When you run npm update, npm checks if there exist newer versions in the repository that satisfy specified semantic versioning ranges and installs them.
I would say "bite the bullet" and update them to latest. It will be a tedious task but if you are looking to maintain this for longer run, it is your best bet.
Updating stuff can break things or some dependencies will be deprecated after an update. I would not update anything unless it is necessary.

Unexpected token "<" on first load of node.js app, then loads properly

I've just deployed a Node.js/React app on Google's Compute Engine. My VM is running Linux Debian 9 with Node version 10.11.0. My React app was created with create-react-app. I'm also using react-app-rewired to add a loader for one of my libraries. The issue is that when I build the app and deploy, the first time I load it from any browser I get an error: Syntax error: Unexpected token <. Upon further inspection, I find that this is because the main.js file in the static folder (/build directory) is my index.html from the static directory. If I refresh the page, the error is fixed. Then, if I go to another browser (including just another chrome browser linked to a different email), the same thing happens. So basically the first time anyone tries to load the page on a browser, even if it's days after it was deployed, this happens. Then they refresh and everything works normally. Does anyone have any idea what might cause this? Below is my package.json file along with how I'm serving the page in my server.js file. I don't know what other info is relevant, but let me know what other information might be needed and I can add it. Thanks in advance.
package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^1.4.0",
"#material-ui/icons": "^1.1.0",
"#material-ui/lab": "^1.0.0-alpha.8",
"#react-pdf/renderer": "^1.0.0-alpha.14",
"ajv": "^6.5.2",
"axios": "^0.18.0",
"blob-stream": "^0.1.3",
"classnames": "^2.2.6",
"debug": "^3.1.0",
"fs": "0.0.1-security",
"fullcalendar-reactwrapper": "^1.0.7",
"html-react-parser": "^0.4.7",
"joi-browser": "^13.4.0",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"pdfmake": "^0.1.37",
"react": "^16.4.1",
"react-app-rewired": "^1.5.2",
"react-big-calendar": "^0.19.2",
"react-calendar": "^2.16.1",
"react-dom": "^16.4.1",
"react-dropzone": "^4.2.13",
"react-load-script": "0.0.6",
"react-number-format": "^3.5.0",
"react-pdf": "^3.0.5",
"react-redux": "^5.0.7",
"react-responsive": "^4.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-signature-pad": "0.0.6",
"react-text-mask": "^5.4.2",
"react-transition-group": "^2.4.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-thunk": "^2.3.0",
"socket.io-client": "^2.1.1",
"transform-loader": "^0.2.4",
"twilio-video": "^1.13.0",
"yoga-layout": "github:naminho/yoga-layout-windows"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
server.js excerpt:
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
UPDATE:
The first time the browser loads the page, if I check the js folder, it has an incorrect name for the main js file. The file name is always main.#####.js where ##### is a series of random letters and numbers. The sequence is incorrect when I compare it to what's on the server, but upon reloading a new filename appears that matches the server and everything works fine. What's interesting is the html file that is mistakenly being served under the incorrect main.#####.js file contains a link to the correct main.#####.js filename. And again, I'm not saying this happens upon the first request. This happens every time a new browser attempts to load the page (Firefox, Chrome, Edge and Safari have been tested and all behave the same). So how is it that days after a deployment this still happens?

Trouble deploying nodejs app to heroku

I'm trying to deploy a nodejs app to heroku and I am getting the following error when I check the heroku logs,
sh:1: npm-run-all : not found
My package.json looks like this
{
"name": "web-training",
"version": "1.0.0",
"description": "web-training",
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdirp dist-server/dist",
"remove-dist": "node_modules/.bin/rimraf ./dist-server/dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist test lint build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node dist-server/server.js"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"compression": "^1.6.1",
"express": "^4.13.4",
"install": "^0.8.4",
"jquery": "2.2.3",
"material-ui": "^0.16.7",
"npm": "^4.0.5",
"open": "0.0.5",
"rd-react-overlay": "^1.4.2",
"react": "15.0.2",
"react-dom": "15.0.2",
"react-native-search-bar": "^2.16.0",
"react-native-vector-icons": "^4.0.0",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-skylight": "^0.4.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"toastr": "2.1.2"
},
"devDependencies": {
"axios-mock-adapter": "^1.7.1",
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"react-addons-test-utils": "15.0.2",
"react-search-component": "^1.1.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/XXX/YYY"
}
}
When I run my app locally with npm run build in the command line, it works perfectly.
Any suggestions?
I'm adding Procfile content:
web:npm run build
I'm not sure that's ok.
You'll need npm-run-all added to your "dependancies" and not on your "devDependancies" in your package.json.
This is because on deploying to Heroku, npm prunes your "devDependancies" when making a production build.
Just wanted to share my experience since I had a similar issue when deploying to Heroku using npm-run-all.
It seems like Heroku runs the start script by default when building the application and is unable to run npm-run-all successfully (I found out after running heroku logs in my terminal). I originally had my scripts like this (notice how I'm using npm-run-all in my start script) and encountered an application error.
I simply changed the start script back to just node server.js and created a new script to run npm-run-all, like this. This worked for me.
(Sorry about the image links. SO won't let me post images unless I have at least 10 reputation.)
Hope this helps anyone else encountering the same problem.
· Firstly make your account in git and heroku
· Install git and heroku on your system..if your using windows must install git bash
· Make your repository in git
· Now find out command below
-git init
-git clone {git repository url}
-cd {repository folder name}
· Copy your code on your local git repository folder
· Open terminal go to your repository folder then apply below commands
-git init
-git add *
-git commit -m "your comment"
-git status
-git push origin master
· Check your git repository on git cloud
· Open new terminal apply below commands
-git clone {repository url}
-cd {repository url}
-heroku login
-heroku create {name of your application on heroku}
-git remote(to verify heroku)
-git push heroku master
-heroku open
**Please follow above steps for deploy your code in heroku*
You can make demo node js project for heroku deployment by using below commands
express {name of project} --ejs
cd {name of project}
npm install
npm start

Resources