I'm getting an error: "Cannot GET /main" when I access this address: "http://localhost/main"
I attach pictures of my code after ng build
I moved the created folder (named client) after ng build to the server
I hope you can help me
Thank you my code
I think your express server is not redirecting to your index.html.
You can also use the routing with hash.
More details can be found here
Angular static Base URl and routing with useHash=True
Could you share a picture of the main.component.ts please. The error occurs because it cannot find Maincomponent
I reckon the error comes because you have mispelt the main.components export.
Related
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 ?
I'm working on a Flutter Web App and today I got these errors:
A bad HTTP response code (404) was received when fetching the script.
Uncaught (in promise) TypeError: Failed to register a
ServiceWorker for scope ('https://adrieldf.github.io/') with script
('https://adrieldf.github.io/flutter_service_worker.js'): A bad HTTP
response code (404) was received when fetching the script.
The only thing "different" that I added to the code was a dependency for the Share library, but I don't think that that is the problem.
Here is the interesting thing, I've got the app hosted on Github Pages and after every commit I have a action that builds the web app. After the build, when I try to access it doesn't load and the errors appears. But building it and running it locally works normally.
Here is the source code if you want to check: https://github.com/Adrieldf/allthewidgets
The website link is in the repo description.
I solved my problem by changing the index.html file
from
<base href="/">
to
<base href="/directory_name/">
Looks, like you are trying to run the project from the project_root/web folder.
If you just start a webserver here (for example, by using python -m http.server 8088), the application will start and even will be working partially.
But compiled web app located in project_root/build/web. Try to run your webserver in that folder.
Solved by
changing base tag inside build/web/index.html
<base href="/">
to
<base href="./">
added . (dot)
Well, the problem is what the error message says. Your JS is trying to register a Service Worker from the script 'https://adrieldf.github.io/flutter_service_worker.js' but that does not exist on the server. If you open that URL it's a 404.
For me got resolved simply after upgrading flutter packages:
flutter packages upgrade
flutter create .
flutter build web
and use the project/build/web as server's location
you can use peanut to build your flutter app and copy it to gh-pages project using something like:
peanut --extra-args "--base-href=/directory-name/"
Solved by changing base tag inside build/web/index.html
<base href="/">
to
added . (dot) with the folder name inside which i added my flutter build
<base href="./flutter/portfolio">
If your PC web and Mobile web are different, you can try to upload flutter_ service_ worker.js in your PC web
While I try to mix everything up, using Angular, bootstrap, and node.js / express I am stucked on middle of my way.
I created my component using this (good) tutorial :
https://trinitytuts.com/create-simple-web-application-with-angular-2/
I found out that I had to 'ng buid' on client side and push everything on the server, but while I try to load my component on the server side I just get : "Loading..." and nothing.
On developer console / network I can see the index.html is loaded from proper directory, but all sub elements are loaded from root (/) instead of 'trinity-app' directory
see : https://www.rdv.li/trinity-app/
Sorry if it sound as a verry newbie question, how could I 'force' the angular component to load it's subelements from it's directory instead of root ?
in express I added :
app.use(
'/trinity-app',
express.static(
path.join(__dirname,'trinity-app', 'dist')
)
);
every clue will be greatly appreciated
regards
greg
I found a workaroud, : ng build --base-href /trinity-app/dist
It's not a clean solution, but it works
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/
I am getting a super unhelpful message 'Cannot GET /' printed to my browser when I run my node dev server through webpack. I am building a Vuejs application with the following:
VueJs structured in a way that was dicated by this Vue Template with my node scripts being identical to the default commands
Webpack config based on Vue Loader
Routes handled through Vue Router
I know this is not a great deal to go off but an idea of what is firing this error (Node? Webpack? Vue Router?) it would point me in the right direction and be greatly appreciated.
If you're experiencing this with Vite, make sure you ran just vite in your package.json script, NOT vite preview
I found myself in the same problem. In my case it was related to the use of Express with Vue.js. So I am leaving my solution in case anyone finds it useful
I added this code for handling the calls to my index.html file
app.route('/*')
.get(function(req, res) {
res.sendFile(path.join(__dirname + '/dist/index.html'));
});
module.exports = app;
Node is throwing the error and make sure your vue router is configured properly,Cannot GET simply means you have not assigned a view to your url e.g on express we use
app.use('/', your route)
and on connect we use
app.get or app.post
All it's saying is there is no content/view assigned to that url.
It turns out it was an issue with the vuejs webpack template I was working from: https://github.com/vuejs-templates/webpack
The build path was being used in the dev server configuration.
Made this pull request to fix the issue: https://github.com/vuejs-templates/webpack/pull/188#issuecomment-230968416
I had this issue while running my app in dev. Adding this to the devServer of my webpack.dev.config file helped:
historyApiFallback: true
Answer by Jezperp here.
If you are using express check that you have this line:
app.use(express.static('static'));
And that "static" matches with the folder specified in your vue.config.js
outputDir: path.resolve("../Server/static")