I am new to node.js, I have created a project using create-react-app with react, react-redux and react-router.
Now, I want to upload my project to a live server so, I was wondering if I am required to upload the node_modules folder to the server or is it all incorporated in the build folder somehow?
I have searched for answers but only got results related to "Pros and cons of including node modules in your git repository"
No you don't need to upload node_modules into the server.
If you are using a web service like HEROKU to deploy or AWS I recommend you use it so.
so the bottom line is that you don't need to upload the node_modules file. just commit the repo to a git hub and you can link it to your Heroku account so that the site will be live.
so what happens here is that when you not include the node_module file, you have seen that package.json file right ?
You can see all the dependencies that you have used to work on your project like this
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.4",
"generate-password": "^1.4.1",
"js-base64": "^2.4.9",
"jsonwebtoken": "^8.4.0",
"mongojs": "^2.6.0",
"mongoose": "^5.3.12",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0"
}
so that means using that package.json file the server will add and install all the dependencies that need to run the application. And of course this will run on a node environment only. So you will need to select it in the web service you are using. In Heroku you can deploy your app to a node environment. You it's easy you just need to go there and read their documentation on how to do it.you can try digital ocen too they also provide such facilities
heroku here amazon node app deploy here digital ocean docs
here
Related
I would like to download the images downloaded on strapi on fileRobot (Scaleflex). To do this, I completed the installation process (https://market.strapi.io/providers/provider-upload-filerobot#install-now-section).
However, nothing has changed and all my images are still saved on the /upload/ directory and i never see the filerobot API request on the network tab of my browser.
This is my dependencies versions :
"dependencies": {
"#strapi/plugin-i18n": "4.5.6",
"#strapi/plugin-users-permissions": "4.5.6",
"#strapi/strapi": "4.5.6",
"jks-js": "^1.1.0",
"mysql": "^2.18.1",
"provider-upload-filerobot": "^1.0.8"
}
I suppose that my plugins.js file is not used when i start strapi.
Is there an incompatibility ? Can you help me ?
Thanks
Does anyone have any clue why a babel config file would be loaded on npm run dev and why it would start flagging perfectly fine parts of my code?
I have a feeling it has something to do with Next.js. My package.json (that Im testing with) for reference:
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#svgr/cli": "^4.2.0",
"babel-jest": "^24.8.0",
"babel-preset-stage-2": "^6.24.1",
"jest": "^24.8.0",
"nodemon": "^1.19.1"
}
My goal is to have an app that runs both npm run dev and npm test and not one or the other. At the moment, if I remove all my babel config files (needed to run jest), my web app will boot up perfectly fine. And vice versa. Honestly I don't think I need or want any babel config files to be active when I start running the server, but I need them to run jest.
So... either there is a way to disable babel from certain package.json scripts or otherwise get jest tests to work without breaking the core functionality of the app?
edit-i fixed it
//.babelrc
{
"presets": [
[
"next/babel"
]
]
}
So I have simple express app. When it run locally, I can see js, css files got gzip compressed but when I deploy to cloud foundry, those files not compressed. The files size still the same.
Anyone know the reason, how to fix it or solutions for this issue ?
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.use(express.static('./public'));
Package.json
{
"name": "conversation-simple",
"description": "A simple Node.js based web app which shows how to use the Conversation API to recognize user intents.",
"version": "0.1.1",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"#google/chatbase": "^1.1.2",
"body-parser": "^1.18.2",
"botbuilder": "^3.15.0",
"cloudant": "^1.10.0-NOTICE",
"compression": "^1.7.3",
"cors": "^2.8.4",
"dotenv": "^2.0.0",
"express": "^4.16.1",
"gulp-rename": "^1.4.0",
"moment": "^2.22.2",
"nano": "^6.4.4",
"request": "^2.87.0",
"slick-carousel": "^1.8.1",
"underscore": "^1.9.0",
"universal-analytics": "^0.4.16",
"watson-developer-cloud": "^3.5.3",
"xml-js": "^1.6.3"
},
"engines": {
"node": "8.15.x"
}
}
Update:
Look like there is location problem. When it's deployed to Sydney, the compression doesn't work but Dallas is ok. IBM support have confirmed the issue in my ticket and currently investigate.
I have the same issue, I feel like I've tried absolutely everything so far:
Static Gzipping (serving .gz files)
Brotli (no dice)
Dynamic compression (like you)
Redirect to static .gz files
It works locally as it should but once deployed - farting noise nothing.
I have a feeling it happens in the proxy and needs to be enabled somewhere, where is not documented though
Commenting here to follow this, also I've contacted their support, if I get any answers I will put them here :)
This issue was fixed by IBM.
"After investigation, we found an issue that strips the header and decompresses the response in the Cloud Foundry Platform AU-SYD region."
I am trying to run a node.js application that uses PouchDB (a local CouchDB implementation). I can run this successfully locally and even upload it and build it on my Bluemix instance. However, whenever I send a request to my app, I do not get a response and I see the following error in my Bluemix console:
[Error: Module version mismatch. Expected 46, got 14. This generally implies that leveldown was built with a different version of node than that which is running now. You may try fully removing and reinstalling PouchDB or leveldown to resolve.]
I have tried to add npm rebuild into my build pipeline above the npm install, which I can see does indeed do a rebuild. However, I still get the previous error.
A bit about my app: It is a bot for the Slack platform. A user sends a command and my Bluemix app then responds. My Bluemix app has multiple documents that PouchDB stores. As I say, all this runs and responds correctly on my development machine.
Here is my package.js for reference:
{
"name": "XXXXXXXXXXX",
"version": "0.x.0",
"description": "XXXXXXXXXXXX",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"repository": {
"type": "git",
"url": "XXXXXXXXXXX"
},
"keywords": [
"slack",
"bot",
"nodejs"
],
"author": "xxxxxxxxx",
"license": "MIT",
"dependencies": {
"bluebird": "^3.1.1",
"body-parser": "^1.14.2",
"cfenv": "^1.0.3",
"cheerio": "^0.19.0",
"express": "^4.13.3",
"pouchdb": "^5.1.0",
"request-promise": "^1.0.2"
},
"engines": {
"node": "^4.2.x",
"npm": "^2.14.x"
}
}
Also some additional history: I ran a prior version of my app on Bluemix when I was using MongoDB instead of PouchDB. My node version at the time was the default that Bluemix gave me when I started, which was version 0.12.x. However, this version didn't support arrow functions, which I make heavy use of now. Hence, the bump to node 4.2.x.
Thanks!
Edit: After some digging I found out that 'leveldown' (a dependency of PouchDB) makes use of npm prebuilds where available. What this means is that if a prebuild is available on their GitHub it will be downloaded instead of the source, as a convenience. Looking through the logs I notice that version 1.4.2 is being downloaded as the prebuild version through Bluemix. However, there is a version 1.4.3 available that looks like it solves my 'Expected 46, got 14` issue. So the new question is why is Bluemix doing this and how can I rectify it?
I tried to push on Bluemix the same version that you are using ("^5.1.0") in your package.json and it is working fine, even using node engine "4.0.x".
Moreover according to CF infrastructure, the runtime is build during application staging step, so the pouchdb module should be built with the right dependencies and references.
Have you tried to push your application again in order to force a full application restage?
If yes, the first step to understand what is going on is to get the application logs during the staging process and also as soon as this error message is returned.
So, on your terminal, run the following commands:
1 - cd into your source directory
2 - connect to Bluemix API
cf api https://api.[REGION].bluemix.net

where [REGION] is one of
eu-gb for United Kingdom
ng for US South
au-syd for Sydney
3 - Login to Bluemix and choose the right ORG and SPACE
cf login -u [BLUEMIX USERNAME]
cf target -o [BLUEMIX ORG] -s [BLUEMIX SPACE]
4 - push your application and, as soon as it has been staged, run
cf logs [app-name] --recent > staging_output.txt
5 - tail the application logs, running
cf logs [app-name]
and without closing it make the request that is generating the error message
6 - check the output generated at step #5 for details on where in the code your application is failing and on the failing module
After a lot of debugging the answer, as ever, was to delete my Bluemix application first and then push a new version via the build system. The leveldown prebuilt npm package that was causing the error was cached somewhere. I could only get rid of this by deleting my app. Nothing special there.
OK, I'm fairly new to all this front end programming and I hope my question is not silly.
I have an existing app made with an express.js framework with a custom gulp config and ejs. Now, I want to integrate the all new shiny Foundation for Apps into it.
On the Zurb website, the manual install is only a one-liner through bower or npm (http://foundation.zurb.com/apps/docs/index.html#!/installation)
bower install foundation-apps --save
npm install foundation-apps --save
So that's what I did, but the Foundation formatting is not happening at all.
I tried to include the CDN reference lines (css and js) too, but the same is happening.
When I proceed to create an app with the "normal" installation, everything is working great. But I want to use the Express framework and this is not the case here!
I am missing something but I don't see what.
package.json
{
"name": "2004app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"apache-server-configs": "^2.7.1",
"body-parser": "~1.12.0",
"browser-sync": "^1.3.0",
"cookie-parser": "~1.3.4",
"debug": "~2.1.1",
"del": "^1.1.0",
"ejs": "~2.3.1",
"express": "~4.12.2",
"foundation-apps": "^1.1.0",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "0.2.2",
"gulp-changed": "^1.0.0",
"gulp-concat": "2.5.2",
"gulp-csso": "^1.0.0",
"gulp-flatten": "0.0.4",
"gulp-if": "^1.2.1",
"gulp-imagemin": "^2.0.0",
"gulp-jshint": "^1.6.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "0.1.5",
"gulp-nodemon": "^2.0.2",
"gulp-rename": "1.2.2",
"gulp-replace": "^0.5.0",
"gulp-sass": "^1.2.0",
"gulp-size": "^1.0.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.0.1",
"gulp-uncss": "^1.0.0",
"gulp-useref": "^1.0.1",
"jshint-stylish": "^1.0.0",
"morgan": "~1.5.1",
"opn": "^1.0.0",
"psi": "^1.0.4",
"require-dir": "^0.1.0",
"run-sequence": "^1.0.1",
"serve-favicon": "~2.2.0"
}
}
For example, the following code is not rendering like it should. It only shows a line with 3 times "Content goes here", instead of this : http://foundation.zurb.com/apps/docs/#!/accordion
<zf-accordion>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
<zf-accordion-item title="Input your title here">
Content goes here
</zf-accordion-item>
</zf-accordion>
Is what I am trying to do possible ?
How can I use the CDN references ? (I successfully put CDN references for bootstrap in another app)
Thanks!
It is possible!
Though it has quite a few moving pieces that you should understand.
I recently did the same thing, but depending on the size of your app's frontend it may take some time to understand everything that is going on. It's not as simple as just including a library.
You mention express app, is it an Angular app? First thing if your not familiar with Angular I would read about it and specifically 'Modules' as in the end that is all Foundation Apps is.
https://docs.angularjs.org/guide/module
You will need to create your angular module and have Foundation as dependency.
Also it is good to realize that the way that foundation for apps is packaged its meant to be compiled in its own weird sort of way. So basically whenever you make changes your re-compiling your front end html/logic/css.
Make sure your express app is serving up the Single Page Application which is Foundation Apps. Be sure to watch your web development console to see if your getting any strange Angular errors. If you are you can typically click on them and get help from the angular site.
Also the Foundation Apps gulp task is unique in it has its own little plugin to create the routing based off the templates. See the following link:
http://foundation.zurb.com/apps/docs/#!/angular
If your just getting into Front End Frameworks I would suggest going through a few basic Angular tutorials before tackling a angular app such as Foundation Apps.
Once familiar with Angular look at exactly what the Gulp build is doing (gulpfile.js). It takes care of the following:
Copies static resources
Its running SASS and compiling styling
Copies Foundation for Apps Javascript
Copies the templates and builds the routes (the route building is a little hidden
Once you understand what the Gulpfile.js is doing you should start to piece together how the front end is built.
I reworked it using Grunt, but ended up switching back to gulp because of their template job (ngHtml2js)
Don't giveup, be persistent and it will slowly make sense!
I'm working on the same task you mentioned up there, an existing MEAN application, that I developed with ejs front end template, and a front-end that I developed with the foundation-apps tools, the front-end has everything I need for my MEAN back-end, now for merging all of this together into a single node app.
UI is developed independently using foundation for app build tools such as gulp, considering my UI is developed with all the zurb foundation html parts are included to represent all the required functions served by my MEAN app. So after the build with foundation-apps the resulting build folder contains basic assets without any SASS or the need for foundation-apps to be in the package.json dependencies, since the foundation.js file is in the assets folder for the front-end, and sass is already built into app.css
I dont see how it's possible to have two single page web apps running on the same node server, in case I try separating the two different app configurations, angular dependency injection, routes, index files separated etc..
The challenge is wrapping up a single page web app with all dependencies, while maintaining how the foundation UI manages it's routing, as it is quite different from how express manages routing, it happens using different libraries.