I've created my first app with Nodejs and Express. It's working fine, but it's slow to load pages when navigating from one route to another. I put a log inside the pages to see what happens and apparently the delay occurs between the page call and the rendering, ie it seems (I think ...) it seems to be the server's time to return the reply, but I'm not sure.
Does anyone know what I can do to decrease page load time?
package.json
{
"name": "cancela",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.17.1",
"chart.js": "^2.6.0",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"express": "~4.15.2",
"log": "^1.4.0",
"moment": "^2.18.1",
"morgan": "~1.8.1",
"mysql": "^2.13.0",
"pm2": "~2.6.1",
"pug": "~2.0.0-beta11",
"serve-favicon": "~2.4.2"
}
}
Are you in dev mode ? if yes, that's because caching and other way isn't activated. When you will move to production, caching will be activated and your nodejs won't need to reload and parse every html page
But what's your current page load time ?
Related
I have a node js webiste, when I run it on localhost on my computer, it runs blazingly fast but when I deploy it on heroku, it becomes very slow. So will this also happen if I host my site with digital ocean or any other hosting provider?
This is my package.json
{
"name": "something",
"version": "1.0.0",
"engines": {
"node": "16.x"
},
"description": "",
"main": "app.js",
"scripts": {
"start": "cross-env NODE_ENV=production node app",
"dev": "cross-env NODE_ENV=development nodemon app"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"compression": "^1.7.4",
"connect-mongo": "^4.6.0",
"cross-env": "^7.0.3",
"cryptr": "^6.0.3",
"dotenv": "^16.0.0",
"express": "^4.17.3",
"express-handlebars": "^6.0.5",
"express-session": "^1.17.2",
"flatted": "^3.2.5",
"got": "^12.1.0",
"lodash": "^4.17.21",
"method-override": "^3.0.0",
"moment": "^2.29.3",
"mongoose": "^6.3.1",
"most-common-words-by-language": "^3.0.10",
"node-fetch": "^3.2.4",
"passport": "^0.5.2",
"passport-google-oauth20": "^2.0.0",
"randomcolor": "^0.6.2",
"request": "^2.88.2",
"workbox-cli": "^6.5.3"
}
}
It is most likely not a hosting provider issue but rather a limitation issue.
Heroku uses the Linux containers Dynos to execute your code in their platform, and they have multiple types with differentiating characteristics. If you have an unverified account, then you're given the free dyno type by default. Check Heroku's dynos page. You'll see that for the "Always on" row, the free type has the trait:
"Sleeps after 30 mins of inactivity, otherwise always on depending on your remaining monthly free dyno hours."
This is your issue. Your app starts slower when the dynos are asleep. The speed improves as you continue using the app, but it's not going to be performant and it's going to start slow again once the app is inactive for 30 mins. If you want your app to be blazingly fast in Heroku, then you need to verify your account and purchase a non free or hobby dyno type.
Take note that you will also face similar issues with other hosting providers if you are using free account on their platform.
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.
I'm looking for deploying my NodeJS API with AWS.
I tried to use Elastic Beanstalk but I always get this issue:
Image of the error I get
There is my package.json
{
"name": "",
"scripts": {
"start": "node server.js"
},
"version": "0.0.0",
"private": true,
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"hammerjs": "^2.0.8",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.4.20",
"mongoose-unique-validator": "^2.0.2",
"multer": "^1.4.1",
"tslib": "^1.9.0"
}
}
And I also have a nodecommand.config into a folder named ".ebextensions"
option_settings:
aws:elasticbeanstalk:container:nodejs:
NodeCommand: "npm start"
Also, is Elastic Beanstalk the best way to deploy my API ?
Thx for the answers !
Based on the comments.
The primary issue was using rar for deployment packaged instead of zip. After fixing that, config files had to be adjusted to work with Amazon Liunx 2.
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?
im trying to make an App with Node and Express using express generator and packing everything with node-webkit. express generator creates an extremely basic app , but it works running npm start on localhost:30000.
the manifest
{
"name": "app",
"version": "0.0.0",
"private": true,
"node-main": "./app.js",
"main": "http://localhost:8080",
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.15.1",
"bower": "^1.7.9",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"express": "~4.13.4",
"morgan": "~1.7.0",
"pug": "^2.0.0-beta4",
"serve-favicon": "~2.3.0"
}
}
the folder structure
When i run the app with nwjs the window displays that the page can not be loaded, but the console doesn't show any error. I tried changing
"main": "http://localhost:8080" to "main": "http://localhost:3000"
which is how the app runs usually, but it didnt work either.
is this possible?
what am i missing?
thanks in advance
This can be a bit late, but anyway.
Here is the source: https://github.com/nwjs/nw.js/wiki/NW.js-use-express-and-similar-web-frameworks
node-main should have path to file, which sets up the server. In this case I assume it is located in bin directory and is named www. Therefore, the package.json should be like:
{
...
"node-main": "./bin/www",
"main": "http://localhost:3000",
...
}
Also check the port number if it is 3000 or something else.