I am setting up a copy of steemit cllient from https://github.com/steemit/steemit.com.
everything works in development environment but when I try to run same in production following steps provided in github repo, it gives error in console : "Failed to load resource: net::ERR_CONNECTION_REFUSED"
I am unable to relate this issue to anything. I am relatively new to webpack. Any help will be appreciated.
fixed it by removing "content="upgrade-insecure-requests" from server-html.jsx so that i can test production on local. it's useful for production. if anyone wants to look into it, i found details here: https://googlechrome.github.io/samples/csp-upgrade-insecure-requests/
Related
I can't deploy my node/express project with Netlify or Vercel.
I did on Heroku but it is finishing the free plan so I want to move my project to other free host.
The path of app.js(index.js) is /src/app.js
And the path of index.ejs is /src/views/pages/index.ejs (I use EJS template engine)
On Heroku I don't need to do any config to deploy with success.
I did some research and tried to created config files vercel.json and netlify.toml but don't help and honestly I don't understand all that these config files are doing.
I know that is a route path files problem, any config that I have to do to deploy.
Are there any better free host like netlify and vercel?
Thank you.
I am building a react front Dapp on Ethereum blockchain.
I created it with create react app cmdline.
I have an issue with Metamask extension.
locally when I run my app on my computer everything is ok.
I run it locally with "npm start".
however, when I do "npm run build" to statically serve my app I get the following at first loading in the browser :
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Then when I refresh the page the error disappears and everything works well.
Some chrome extension devs are having same error with extensions. They solve it by handling the fact that the extension is not answering but in my case I use ethers.js library and I think a way to solve my issue is in the loading process of my app
the error appears when I make an async req to the Metamask extension :
const accounts = await ethereum.request({ method: 'eth_accounts' });
Any help please ?
EDIT
the issue is that the js scripts output from 'npm run build' command are written in the wrong place in the 'index.html' file generated by 'npm run build'(at the bottom)
When I manually put theses js scripts at the top of the 'index.html' file then my app is working.
But, I still need to find a solution to dynamicaly do this modification in the build process :
either an option argument in 'npm run build'
OR
a custom script to parse and modify the generated 'index.html'
any solution please ?
Hello i'm having issues deploying my website/app to vercel. It's a node/express backend and a create-react-app front end.
I should start by saying that localy everything works perfectly.
As for deployment, when vercel builds it, in its build logs appears this line "Warning: Due to builds existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings".
Not only that, when visiting the vercel it appeears 404 not found. (https://note-keeper-node-backend-2gbi1g75b-orlandovsilva.vercel.app/)
Also followed this tutorial (https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa).
What could the issue be?
For 404 not found in vercel try to put in Settings->Project Settings->Environment Variables->Add New
Name field => CI
VALUE field => false
This works for me. Resolve 404 problem in vercel deployment.
Verify if you put Root Directory of your project correctly.
When I deploy I get the error Cannot find module '../../models/User' but my
solution works fine locally. here is a pic of my console console log of errors and a link to the repo https://github.com/No-MyNameIs/trashalbums
I understand similar questions have been presented and I worked through those solutions before presented and I tried working through those below with no luck. Any help would be appreciated.
Heroku deploy Error: Cannot find module - compilation
Heroku Cannot find module
console log of errors
The version of Node.js that will be used to run your application on Heroku, should also be defined in engines section of your package.json file.
For example:
"engines": {
"node": "11.0.0",
},
docs: https://devcenter.heroku.com/articles/deploying-nodejs#specify-the-version-of-node
I am running the webpack / webpack-dev-server portion of the base Vue.js Webpack template (https://github.com/vuejs-templates/webpack/) inside of a docker container I created. The container also contains the vue CLI in order to create new projects (you can get my container here if you want: https://hub.docker.com/r/ncevl/webpack-vue/).
Hot-reload does not work after moving from the webpack-simple template to this one.
Everything was working using the Webpack-Simple template which you can clone / see over here: https://github.com/vuejs-templates/webpack-simple
I was able to get the simple template running (with hot-reload working as intended) with the following webpack-development-server launch command:
webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll
That said the full (not simple) version of the webpack template does not appear to use a webpack-dev-server launch command and instead appears to use additional middleware as referenced in build/dev-server.js (https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js) and the webpack dev config.
Since the --watch-poll was the key to getting the WDS hot-reload functionality to work within a docker container in the last project, my thinking is that I need to do something similar with the webpack-hot-middleware but I dont see anything in their docs (over here: https://github.com/glenjamin/webpack-hot-middleware) that talks about changing to a polling based approach.
I am not 100% sure the polling flag will do the trick since I can see the container recompile my source when I make a change. I can also see the change in my browser if I refresh it manually.
Whats stranger still is if I inspect my page in browser within chrome dev tools, and then head over to network / XHR I can see that the browser actually does receive information from the webpack-dev-server, but visually it does not update.
Give the above I assume websockets (or socket.io which I think is used) are working and communicating between the browser and the WDS so maybe this is a browser caching issue of some sort?
I checked in my console and found this so it is looking like a header issue:
For reference the text error from that image (to make it easier for anyone having the same issue to find this post) is:
EventSource cannot load http://__webpack_hmr/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.
Again the Hot-Reload / Hot Module Reload was working with this identical container setup when using the webpack-simple Vue.js template.
I am wondering if anyone has run into anything similar or has any ideas on how to add the polling option . I guess my alternative would be roll back to a more basic webpack config and rebuild that portion of things to use the traditional webpack-dev-server / webpack config but give the above I am not sure that is going to fix it.
I am adding this as a separate answer since it more specifically answers the question in the title, while my other answer more specifically explains what solved my actual problem.
The vue.js webpack template project (which can either be init'd from the Vue CLI or pulled from its repo over here: https://github.com/vuejs-templates/webpack) separates its config files into several different directories.
I am posting this answer so that anyone who runs into the need to add polling to their project will be able to understand how / where to do that.
The base project structure for a Vue.js webpack template project looks like this:
The files that you care about if you are messing with trying to get hot module reload working are related to creating your server primarily with webpack-dev-middleware. The most important files related to that are highlighted here:
Basically if you want to add the polling code to the webpack-dev-middleware server you need to be in the /build/dev-server.js file on lines 20 to 24 that look like this:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
To add polling you would add it just before or after quiet: true. As a side note, if you are having trouble with HMR I would change "quiet:true" to queit false to get a more verbose read out of whats going on from webpack-dev-middleware. I have included verbose and polling modifications to the above code here:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: false, //Changed to for additional verbosity
watchOptions: { //Add Polling
aggregateTimeout: 300,
poll: 1000
}
})
My other answer is in regards to what ended up solving my problem, not necessarily how to actually add polling (which might be necessary for someone else but did not end up being needed to make my dockerized setup work).
It should also be noted that sometimes when HMR (webpack hot module reload) is not detecting changes it is due to the fact that webpack-hot-middleware or webpack-dev-middleware is running into an issue whereby some invisible characters are / were added to the name of the base project directory (probably by someone building the base Vue project) and therefore webpack on certain OSes is not able to see the changes.
If that happens to you and you are on OSx or running webpack inside of a docker container and you can't get HMR to detect changes, try to rename your vue-webpack project directory and it should work.
Ok. So I can't really take credit for this one since it was actually answered by Discuss user Cristian Pallarés over here: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
Christian says:
I was just trying the same. I just use "php artisan serve" on localhost:8000, and Webpack Dev Server on localhost:3000. You should make this:
set your webpack config "output.publicPath" as "http://localhost:3000/static/" instead of "/static/"
make your php application load this:
The key is the output.publicPath being absolute. Now, you should run "php artisan serve" and launch your webpack dev server too (in my case I use gulp).
Basically I took that and dug through the Vue.js Webpack Template files to locate the config file where webpack was looking for the public path. the public path setting ended up being in the index.js file located in the /config directory of the template.
I changed my code to look like this:
assetsSubDirectory: 'http://localhost:8080/static/', //!!Changed from /static/
assetsPublicPath: 'http://localhost:8080/', //!!Changed from /
As opposed to the previous setting which DID NOT WORK and looked like this:
assetsSubDirectory: '/static/',
assetsPublicPath: '/',
After that I was able to see my changes hot reload while running the vue.js Webpack template from within my docker container.