I'm new to Electron and Node.js and now I learn Electron from video tutorials. In the tutorial the guy installs axios with npm install axios --save and then imports it with const axios = require('axios'). The problem is I'm behind proxy at my work so installing packages with NPM is quite problematic. But I already have axios in my another project. So I just copied it and pasted to node_modules of my current tutorial project. But it seems like const axios = require('axios') doesn't work in it. How do use that copied axios in my current project?
Axios has a lot of devDependencies. Those do not get installed when you just copy it. I'd suggest duplicating your existing project (assuming it works there).
"devDependencies": {
"bundlesize": "^0.17.0",
"coveralls": "^3.0.0",
"es6-promise": "^4.2.4",
"grunt": "^1.0.2",
"grunt-banner": "^0.6.0",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-eslint": "^20.1.0",
"grunt-karma": "^2.0.0",
"grunt-mocha-test": "^0.13.3",
"grunt-ts": "^6.0.0-beta.19",
"grunt-webpack": "^1.0.18",
"istanbul-instrumenter-loader": "^1.0.0",
"jasmine-core": "^2.4.1",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "^1.1.1",
"karma-jasmine-ajax": "^0.1.13",
"karma-opera-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sauce-launcher": "^1.2.0",
"karma-sinon": "^1.0.5",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"load-grunt-tasks": "^3.5.2",
"minimist": "^1.2.0",
"mocha": "^5.2.0",
"sinon": "^4.5.0",
"typescript": "^2.8.1",
"url-search-params": "^0.10.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
Related
I have used mongoose package in my nest project but when I am trying to build the project using npm run build.Then its throwing below error in my console:
node_modules/mongoose/node_modules/mongodb/mongodb.d.ts:34:15 - error TS2305: Module '"tls"'
has no exported member 'TLSSocketOptions'.
34 import type { TLSSocketOptions } from 'tls';
I have even updated the mongoose package to the latest version.Then also I am getting the same error:
Below are my dependencies inside package.json file:
"dependencies": {
"#apollo/gateway": "^0.38.0",
"#google-cloud/translate": "^6.2.1",
"#nestjs/common": "^8.0.6",
"#nestjs/core": "^8.0.6",
"#nestjs/cqrs": "^8.0.0",
"#nestjs/graphql": "^8.0.2",
"#nestjs/microservices": "^8.0.6",
"#nestjs/mongoose": "^9.0.3",
"#nestjs/platform-express": "^8.0.6",
"#types/luxon": "^1.15.1",
"apollo-server-express": "^2.25.2",
"bunyan": "^1.8.12",
"bunyan-rotating-file-stream": "^1.6.3",
"connect-redis": "^3.4.1",
"consul": "^0.40.0",
"device-detector-js": "^3.0.3",
"elasticsearch": "^16.2.0",
"express-session": "^1.16.2",
"firebase-admin": "^9.4.2",
"graphql": "^14.7.0",
"graphql-tools": "^4.0.4",
"json-rules-engine": "^3.1.0",
"kafkajs": "^1.15.0",
"lodash": "^4.17.21",
"luxon": "^1.16.0",
"moneysafe": "^2.2.1",
"mongodb": "^3.5.9",
"mongoose": "^6.3.0",
"nestjs-i18n": "^8.1.1",
"node-wit": "^6.0.0",
"reflect-metadata": "^0.1.12",
"rimraf": "^2.6.2",
"rxjs": "^7.3.0",
"ts-morph": "^12.0.0",
"typescript": "^4.3.5",
"uuid": "^3.3.2"
},
"devDependencies": {
"#nestjs/testing": "^5.1.0",
"#types/jest": "^23.3.1",
"#types/lodash": "^4.14.134",
"#types/node": "^10.7.1",
"#types/supertest": "^2.0.5",
"jest": "^23.5.0",
"nodemon": "^1.18.3",
"prettier": "^1.14.2",
"supertest": "^3.1.0",
"ts-jest": "^23.1.3",
"ts-loader": "^4.4.2",
"ts-node": "^7.0.1",
"tsconfig-paths": "^3.5.0",
"tslint": "5.11.0"
}
Someone let me know how can I resolve this error.Any help on this will be really appreciated.
I fixed this by updating #types/node to the latest version. This specific error message is then fixed!
Beginner question. Got an app running on a server, it is a complex one.
Now in the client directory there is an index file called index.html (I thought node was using express/routed, what is it doing there)
module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
//devtool: '#cheap-module-eval-source-map',
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
1) Why are the image URLS encoded? And I can instead paste absolute URLS? This is not developer friendly, makes me want to abandon Node right away if they dont have proper views and need extra steps
<img class="color loader-box-image" data-v-553e61a2="" alt=. src="data:image/png;base64,iVBOR....." LONG STRING />
2) Ok so assume I am updating the index file in there, it does not update the live page. I have to assume the index file is either cached or Node itself is caching some version of it. Is the index.html just a static file? And if not, why?
What are best practices to get a simplified workflow?
Thank you
Edit: I understand node itself is acting like a webserver (JS based) and that routes have to be established. How do static files play into this?
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"bootstrap": "^4.0.0",
"bootstrap-social": "^5.1.1",
"dependency-list": "^0.2.2",
"jquery": "^3.2.1",
"jquery-sparkline": "^2.4.0",
"moment": "^2.20.1",
"react-stockcharts": "^0.6.1",
"sitemap": "^1.13.0",
"socicon": "^3.0.5",
"vee-validate": "^2.0.2",
"vue": "^2.5.2",
"vue-authenticate": "^1.3.4",
"vue-axios": "^2.0.2",
"vue-event-calendar": "git+https://git#github.com/adi-darachi/vue-event-calendar.git",
"vue-multiselect": "^2.0.8",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-search-select": "^2.5.0",
"vue-social-sharing": "^2.3.3",
"vue-socket.io": "^2.1.1-a",
"vue-tweet-embed": "^2.0.0",
"vue-virtual-scroll-list": "^1.2.4",
"vuetrend": "^0.2.3",
"vuex": "^3.0.1"
},
> "devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"bootstrap-vue": "^1.4.1",
"chai": "^4.1.2",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"compression-webpack-plugin": "^1.1.11",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"npm": "^5.5.1",
"offline-plugin": "^4.9.0",
"opengraph-html-webpack-plugin": "^1.0.0",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
"portfinder": "^1.0.13",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"sitemap-webpack-plugin": "^0.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.18.2",
"webpack-merge": "^4.1.0"
},
You are conflating node and webpack. Node isn't encoding those images, one of the webpack plugins is and is doing so to save you a network request.
Additionally, you said in one of your comments:
Thanks, good advice but I cant. I simply need to modify some CSS and
swap the logo - that should be simple enough but for that I need to
get a basic understanding of NodeJS in very little time. I dont get
why there is an index.html file in the first place when I learned that
Node uses dedicated directories for files previously
You are using html-webpack-plugin. That generates the index.html file for you. Don't modify the generated file, modify the configuration that generates the file. Otherwise you're going to get a regression. Read the documentation on that plugin and you should be able to figure out where the logo is being drawn from in your code.
The problem is that this some sort of pre-built starter project, and the developer made some decisions which you don't fully understand yet.
Since this strategy has frustrated you, I recommend trying a different strategy: build the simplest possible project that you possibly can, using as few libraries as possible, and build out from there. Good luck!
I have an electron app that uses Vue.js.
I ran electron-packager and got a nice looking folder. When I run the executable on my own computer it works. The window is displayed, and everything works great.
However, if I run it at any other winx64 computer it fails.
No error is displayed, running through cmd doesn't display anything and background processes are started, but the window doesn't open.
So I thought maybe it's a dependency issue. However, I have both dependencies installed. I have googled for ages but cant find out what the issue is.
"dependencies": {
"axios": "^0.18.0",
"electron-log": "^2.2.14",
"electron-logger": "^0.0.3",
"electron-packager": "^12.1.0",
"moment": "^2.22.1",
"nfc-pcsc": "^0.6.2",
"vue": "^2.0.1",
"vue-config": "^1.0.0",
"vue-momentjs": "^0.1.2",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.46",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
"#babel/polyfill": "^7.0.0-beta.46",
"#babel/preset-env": "^7.0.0-beta.46",
"#babel/register": "^7.0.0-beta.46",
"babel-loader": "8.0.0-beta.2",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"devtron": "^1.4.0",
"electron": "^2.0.0",
"electron-debug": "^1.5.0",
"electron-rebuild": "^1.7.3",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue-devtools": "^3.1.9",
"vue-loader": "^15.0.9",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
Edit:
I found out the nfc-pcsc library i'm using is the root of my problem.. No idea why and how to solve it... Im gonna dig in a bit further. Any idea's wy?
I have deployed django app on heroku, and everything is fine, no errors, etc. I'm using react on frontend, and I want to do npm install, gulp build so I can configurate my app properly.
I can not run heroku run npm install, all I have is bash: npm: command not found, and I suppose that is ok because I need to trigger it somehow when he is building the app on the server, so I've modify my package.json like this:
{
"name": "Test app",
"version": "1.0.0",
"description": "Testing",
"main": "bundle.js",
"scripts": {
"postinstall": "npm install"
},
"dependencies": {
"bootstrap": "^3.3.7",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"engines": {
"node": "8.0.0",
"npm": "5.0.4"
},
"author": "",
"license": ""
}
But that still does not trigger npm install process on deployment, so can any one help me understand how can I configurate this properly?
This is my Procfile:
web: python manage.py runserver 0.0.0.0:$PORT --noreload
worker: python worker.py
Heroku supports different server-side languages via buildpacks:
Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. Buildpacks are composed of a set of scripts, and depending on the programming language, the scripts will retrieve dependencies, output generated assets or compiled code, and more.
Since the Python part of your application seems to be installing correctly Heroku must be detecting it as a Python application (because it includes a requirements.txt file) or you have configured it as one manually. In many cases a single buildpack is sufficient.
However, since you are also using Node.js you should enable a second buildpack:
There are many scenarios in which a single buildpack is not sufficient when building an application. This includes cases when you need to:
Run a buildpack for each language your app uses. For example, run a JavaScript buildpack for assets and a Ruby buildpack for your application.
The basic flow looks like this (using the Heroku CLI on your development machine):
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 2 heroku/nodejs
The links I provided above contain many more details. I recommend reading both of them in their entirety.
So my issues are mostly the same as posts from here. It starts to explain all the issues and steps needed for windows users and node-gyp problems.
As I am sure you can imagine, I ran into the same problems as everyone else on windows trying to run 'npm install'. The culprit is node-gyp. I followed ToTallNate's solution step by step multiple times and still can't get node-gyp to do a rebuild. I have uninstalled and reinstalled everything in the correct order only God know's how many times. My Python is the correct V and is in my PATH as well as node. I've tried on VS2010 and 2015 express with no luck. I am preparing to restore my image to day one and start over again with the installs (it's a new desktop we just started working on so no big losses here)
To give you a quick background My client handed me a stack of Reactjs components that were developed on os x and linux and is pretty much forcing me to use this stack on a windows environment because it uses a tech stack approved for use by this company. The dev team I am working with is all on windows 7 enterprise
My questions are:
How many npm modules/packages depend on node-gyp? And just what is node-gyp doing for them? can someone please elaborate/point me in the right direction. I've seen the npm documentation a million times so that won't help me right now...
Is there a better set of modules I should be using with windows from npm?
Can anyone recommend a better way to get started with a reactjs/flux project on windows? Would grunt work better than gulp?
I'm relatively new to working with this frontend stack so thank you for your patience.
Here is the package.json they want me to work with:
`"config": {
"server_port": "4040",
"browser_sync_port": "8080",
"livereload_port": "35729"
},
"scripts": {
"start": "gulp",
"build": "gulp build --prod",
"test": "./node_modules/karma/bin/karma start karma.conf.js",
"ci-test": "./scripts/ci-test.sh"
},
"devDependencies": {
"aliasify": "^1.4.0",
"async": "^0.9.0",
"axios": "^0.5.4",
"body-parser": "^1.9.2",
"browser-sync": "^1.3.7",
"browserify": "5.10.0",
"chai": "^1.9.1",
"component-mocker": "^0.2.0",
"compression": "^1.0.11",
"connect-livereload": "0.4.0",
"envify": "~3.0.0",
"express": "~4.8.5",
"falafel": "^0.3.1",
"glob": "^4.0.5",
"gulp": "~3.8.7",
"gulp-arialinter": "0.0.1",
"gulp-autoprefixer": "^2.0.0",
"gulp-concat": "^2.4.3",
"gulp-if": "^1.2.1",
"gulp-jshint": "~1.8.4",
"gulp-livereload": "2.1.0",
"gulp-nodemon": "^2.0.2",
"gulp-notify": "^1.4.0",
"gulp-react": "^2.0.0",
"gulp-sass": "^1.3.3",
"gulp-scss-lint": "^0.1.4",
"gulp-shell": "~0.2.9",
"gulp-streamify": "0.0.5",
"gulp-strip-line": "0.0.1",
"gulp-tar": "^1.3.2",
"gulp-template": "^3.0.0",
"gulp-uglify": "~0.3.0",
"gulp-util": "^3.0.0",
"gulp-watch": "~0.6.9",
"jshint-stylish": "~0.4.0",
"karma": "^0.12.21",
"karma-bro": "^0.7.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.1.4",
"karma-coverage": "^0.2.6",
"karma-firefox-launcher": "^0.1.3",
"karma-mocha": "^0.1.9",
"karma-phantomjs-launcher": "^0.1.4",
"karma-safari-launcher": "^0.1.1",
"karma-spec-reporter": "0.0.13",
"merge-stream": "~0.1.5",
"messageformat": "~0.2.1",
"mkdirp": "~0.5.0",
"mocha": "^1.21.4",
"nopt": "^3.0.1",
"react-tools": "^0.12.0",
"reactify": "^0.15.2",
"request": "^2.47.0",
"requirefrom": "~0.2.0",
"rewireify": "~0.0.9",
"rimraf": "~2.2.8",
"run-sequence": "~0.3.6",
"sinon": "^1.10.3",
"sinon-chai": "^2.5.0",
"s-ui-build": "0.1.14",
"s-ui-icon": "^0.1.9",
"through": "~2.3.4",
"vinyl-source-stream": "^0.1.1",
"watchify": "^1.0.2"
},
"dependencies": {
"accounting": "^0.4.1",
"classnames": "^1.1.4",
"console-shim": "^1.0.3",
"es5-shim": "^4.0.1",
"inherits": "^2.0.1",
"jquery": "~1.11.1",
"lodash": "~2.4.1",
"moment": "2.7.0",
"react": "~0.12.0",
"react-router": "~0.11.6",
"uuid": "^2.0.1"
},
"aliasify": {
"aliases": {}
}
}
`