After 3 hours of combining I decide to write question here.
I'm trying write a application on my pc using yeoman for building application. I'm trying use socket.io but I see 404.
What I do
I have installed yeoman.
I have installed socket.io under /node_modules/
I have installed angular-socket-io by bower
In my index.html I have included needed scripts: index.html
In app.js I added module btford.socket-io
In my controller I inject socket : .controller('ChatCtrl', function ($scope, socket) {
And I run? server using grunt server command
So where I make mistake or what I wrong understand so my application can't find socket.io.js file?
Here you can find my full code: https://github.com/w00caSh/FunWithAngular
EDIT:
It's very important. Do I have to enable any node server for this?
The problem was, that I used wrong code for listening sockets in server.js file.
I rewrite this file and now it's working well.
Related
We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript).
We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error:
Cannot GET /index.html
We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same.
The url is this: https://consoleadmin.azurewebsites.net/index.html
Last week the application was running correctly.
We forget to do something?
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
The web app by default points to opt/startup/hostingstart.html
It also puts a hostingstart.html in home/site/wwwroot
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
So how to change the default pointer? It's simpler than it looks:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
This will tell the web app to serve wwwroot folder. And that's it.
Image for reference:
Screenshot explaination
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
Ok you are gonna love this. This happened to me today also. Same exact thing.
I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.
I found this obscure answer with no votes and it did the trick (with a little extra finagling)
BONUS! this also fixed my router issues I was having only on the deployed site (not local):
Credit: #stormwild: Default documents not serving on node web app hosted on Azure
From #stormwild's post see here:
https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
Steps:
Go to your azure portal, select your app service and launch ssh
In ssh terminal, navigate via command line to /home/site/wwwroot
create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Be sure to restart your app service if it doesn't do so automagically
A workaround, I changed the webapp stack to PHP 7
Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
This will tell pm2 to associate all requests to index.html as your app service starts up.
Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/
Please keep in mind, I have not worked with angular JS, nor did I write the code that is causing the error.
I am getting an 404 error on this path:
https://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
but not this path:
http://www.helivalues.com/Su6UsWuf/bb/option/mfg/all
It was noticed that when a user views a certain page in https, the drop down does not load options. Angular Js makes a call to the path mention above which is not an actually file but is used by a php file that based on this path, has a switch that fills in the drop down.
Any ideas on how to get the https version to work? This is on a joomla site and I do have access to the htaccess file if needed. I really just need it to work for a few months while I work on building a new site.
Thanks!
Angularjs is not the issue. Your webserver (Apache/2.2.15 (SuSE) Server at www.helivalues.com Port 443) states the file can not be found. So it looks like something is misconfigured with your apache site.
Hoping someone can answer this because I'm struggling...
I have an angular js app that was build with the yo-angular generator. All works fine with deploying through grunt build control, as long as I'm not using the #-free "html5mode."
However, once I enable html5mode to remove the # from my routing and then deploy, my app on github pages doesn't point to the correct source for its scripts and such... For instance, I'm getting a 404 error because it's looking for http://{{user name}}.github.io/scripts/{{name of file}}, instead of http://{{user name}}.github.io/{{app name}}/scripts/{{name of file}}
How can I get it to point to the correct directory?
Hope this makes sense. I'll share more if needed!
You also need to configure the server. The configuration change will depend on what technology you are using to host the app on the server. How to configure your server to work with html5mode
I am trying to follow the tutorial on creating a MEAN app on scotch.io.
I am using the WebStorm IDE and after completely following through I am stuck with a problem that seems to emerge from WebStorm. If I click on the "Open in Chrome"-Button in the IDE I am referred to:
localhost:63342/scotch_mean_tutorial/views/index.html
However, the actual port that I specified in my server.js is 8080 file:
// listen (start app with node server.js) ======================
app.listen(8080);
console.log("App listening on port 8080");
I have built a node API and it works when I go to:
http://localhost:8080/api/todos
However, clicking on the "Open in Chrome" through my WebStorm IDE uses a different port (i.e. 63342) and thus I am left with the following error:
GET http://localhost:63342/api/todos 404 (Not Found)
I am not sure how to resolve this? Any ideas?
You need to create a javascript debug run configuration with the correct URL (http://localhost:8080/api/todos) and use this configuration to open your URL in browser. Another option: specify this URL in Live Edit/Browser tab of node.js run configuration you use to run your server.js and tick 'after launch' checkbox to automatically start the browser with this URL on server start.
In Webstorm 9, you can configure the port for debugging apps. In Preferences:
Build, Execution, Deployment > Debugger > Built-in Server Port
I am trying to merge a working Socket.io, AngularJS and ExpressJS 3.x project into the new Yeoman: Express Stack.
I started by following the directions given on https://github.com/yeoman/yeoman/tree/express-stack,
namely,
yeomen init angularcrud # Standard Angular app
yeomen init angularcrud:crud post # Angular CRUD routes/views
yeomen init express post # Express CRUD
yeomen server
I have merged the codes carefuly checking that at each point the new code works. This process is sucessful until I add socket.io. At that point, when I run "yeoman server", I get the error "/socket.io/socket.io.js Not Found" which is substantially similar to the error in the following question Socket.io not being served by Node.js server. In First Zero's answer to the question, he states that "node_modules should be in the same directory as server.js, not above server root". In the directory set-up that Yeoman: Express Stack creates, this is exactly the situation, node_modules is one level above the server root (index.js). If one simply moves index.js to the same level as node_modules, one gets a cannot find module error.
I would like to know how to modify the set-up to get Yeoman: Express working with socket-io.
I've been testing this branch a bit the last few days though not with socket.io
class I know this much that node_modules goes in the project root not in server/
You may need to either install socket.io via npm as a global or put ../ before before
your require('../socket.io') or something. Also we do what most Express/Angular stubs/seeds/examples have too which is to include a wildcard route at the end of Express
route definitions.
If you also need a catchall route and/or set html5mode to true
then you need to make sure you define it like below or angular spirals
your client session into a self-referencing loading loop:
app.get(/^((?!\/styles|scripts\/).)*$/, function(req, res){
res.render('<app_path>/app/index.html'); // or chrome.html if you call it such
});
Hope that helps somewhat
Another idea for your module issue try going into /yeoman-custom dir and installing it there as that is the actual root that yeoman-custom/cli/tasks/server.js serves up with Node.