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.
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/
I have a create-react-app project where I am creating a front side for users and an admin side, and want this two sides to use the same code base and run on one time instead of building two separate apps and each will use a different theme and files.
As suggested in some places I have ejected my create-react-app App and then tried adding a different entry point as suggested in this tutorial:
http://imshuai.com/create-react-app-multiple-entry-points/
but when i navigate to /admin nothing happens...any suggestions?
I am using react-router-dom as well.
When you navigate to /foo Webpack dev server has a little convenience feature to consider /foo/index.html as well if /foo does not exist. This is probably meant to be compatible with the user's expectations of other HTTP servers (i.e. Apache, Nginx). This means that /admin resolves to either something actually called /admin or /admin/index.html if the former is unavailable.
If you did follow the linked tutorial, the path you are looking for is clearly not supposed to be /admin but /admin.html. And your normal 'user' front end remains at /index.html, which is why you can still navigate to it the same way you were used to before ejecting.
Note: I don't speak Japanese, but I do read Webpack, so I just looked at the sample Webpack config and layout of the build/ folder as described in the tutorial.
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.
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
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.