It’s become clear to me that I am a below average programmer and there is no such thing as a working example of an express/socket.io server on the internet. Why am I getting this error when I try to load the page?
GET http://localhost:3700/socket.io/socket.io.js 404 (Not Found)
I executed the following command inside of my working directory to install express and socket.io
Npm install
My package.json file looks like this
{
"name": "RealTimeWebChat",
"version": "0.0.0",
"description": "Real time web chat",
"dependencies": {
"socket.io": "latest",
"express": "latest",
"jade": "latest"
},
"author": "developer"
}
This created a “node_modules” directory, inside of which is a “socket.io” directory.
So why can’t my application find the socket.io.js file?
Other relevant information, I’m working off this tutorial. I’m following it word for word.
I have a .jade file that looks like this.
!!!
html
head
title= "Real time web chat"
script(src='/chat.js')
script(src='/socket.io/socket.io.js')
body
#content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
.controls
input.field(style='width:350px;')
input.send(type='button', value='send')
Admittedly, I have no idea what jade is, but I'm just trying to get a simple example up and running. I learn best as I do. Final project is due on Sunday! Help I need a server!
I've got an end-to-end working example of Express and Socket.io on GitHub at https://github.com/hectorcorrea/intro-to-nodejs
Try this:
git clone https://github.com/hectorcorrea/intro-to-nodejs.git
cd intro-to-nodejs
npm install
npm install socket.io
node socketioDemo
Then open two browser windows and browse to http://localhost:3000 and you should be able to exchange messages between the two.
Related
I am trying to deploy a react app and a node server to my domain http://cv-devlabs.com/ with cPanel but failing to run. Most of the time I'm getting a "server responded with the 404 error".
I have tried methods from "hosting react app and express server cpanel" and "How to deploy a react app on cPanel?" and failed at both. I'm assuming I did something wrong here.
My file structure is:
Root-Folder--
-client
--build
--node_modules
--public
--package.json(client)(content added below)
-.gitignore
-package.json(server)(content added below)
-procfile
-server.js
Package.json (client)
"name": "client",
"homepage": "http://cv-devlabs.com/vidci-vid2/",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000",
Package.json(server)
{
"name": "vidci-vid",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"socket.io": "^2.3.0"
},
"scripts": {
"start": "PROD=true node server.js",
"postinstall": "cd ./client && yarn"
}
}
This is working fine on Heroku but on cPanel, it's not. The whole project can be found at https://github.com/ConsultVerraton/vidci-vid.git
Thanks to anyone who can help and thanks to anyone who can try. Do let me know if more information is needed.
Thanks
You cannot host a node.js app in most providers working with cpanel. If you want to host a node.js app you should deploy it on a vps. You can follow this tutorial for example:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
But in these cpanel providers, you could host a static react app (for example an app build with create-react-app). This kind of app does not need node.js at runtime. So you can build the assets and push them to your cpanel host.
You can follow this tutorial:
https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6
Yes you can, but it depend if the host provider allow it.
I'm actually running a express server on a cPanel account.
I didn't found the official documentation of cPanel but this is a pretty good one: How to create a Node.js application with cPanel using the Node.js Selector
If your looking to do it in command line, this the official documentation from cPanel :How to Install a Node.js Application.
I don't know about react but for anyone who wants to know how to deploy node js app to Cpanel this is a good source for him, this explains thoroughly how to deploy node js app to cpanel please check this
I have created one project which has index.html and script.js file. So i have done npm init -y to get package.json. If i explicitly double click the index.html file it is opening it normally and functions as i want but if i do with express as res.sendFile(path.join(__dirname, './index.html')); it is not functioning properly. So i want to write an start script in a such way that it should directly run index.html
i have tried this
router.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
})
But is is not functioning well. It is just rendering raw html in normal function it is asking me for permission to access camera and microphone. But here it asking nothing.
{
"name": "demo",
"version": "1.0.0",
"description": "VideoCall App",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "AkshayK",
"license": "MIT"
}
I want to render index.html when i do npm start.
I have made one application with this same functionality for you. You
can check it here. https://github.com/RajatKaushik/Camera-App
Express is Middleware for handling http requests, you will have to make a GET request from the browser. Once you make the request your express app will match the path and will respond back with the file(index.html) in your case.
So, If you want to deliver the index.html file on the browser, do the following steps:-
Run your node application using node [YOUR_FILE_NAME.js] (node script.js).
If your express server is running on port 4200, then make the request to
localhost:4200/
As that's the path that you have for responding back with the index.html file.
I think the reason why your Camera and Microphone is not working is because the code that initiate that is in some script file that you have include in your HTML file as <script src="index.js"> but you are not delivering that file using express.
You can use the following code snippet to deliver that static files needed.
app.use(express.static('__dirname' + '/public'), () => {
console.log('Request Recived');
});
where the public is the folder in which your index.js file is present.
I have made one application with this same functionality for you. You
can check it here. https://github.com/RajatKaushik/Camera-App
I am creating a small app to learn angularjs and installed it and other dependencies using npm. To serve the application I installed http-server package via npm locally. My app directory structure looks like so
restaurant > app, node_modules, package.json
The app folder looks like
app > index.html, app.js
Inside my index.html i tried referencing angular.min.js and bootstrap css files from node_modules like so
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../app.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js>"></script>
Inside of app.js I have declared an angularjs module so i can print an interpolation result from my index.html file.
package.json:
{
"name": "restaurant",
"version": "1.0.0",
"description": "An AngularJS app for Restaurants",
"author": "",
"license": "MIT",
"devDependencies": {
"http-server": "^0.11.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server -a localhost -p 4000 ./app"
},
"dependencies": {
"angular": "^1.7.8",
"bootstrap": "^4.3.1"
}
}
When i run npm start and go to localhost:4000/index.html it says
GET http://localhost:4000/node_modules/bootstrap/dist/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
index.html:4
GET http://localhost:4000/node_modules/angular/angular.min.js net::ERR_ABORTED 404 (Not Found)
app.js:1 Uncaught ReferenceError: angular is not defined
at app.js:1
(anonymous) # app.js:1
index.html:6 GET
http://localhost:4000/node_modules/bootstrap/dist/js/bootstrap.min.js%3E net::ERR_ABORTED 404 (Not Found)
My question is do I have to write some command inside my package to copy angularjs and other library files inside some other folder in my app directory?
If not why is localhost:4000/index.html not able to find these files?
TIA for any solutions.
You're asking the web server to serve everything under the directory app. So, on the web server, the root in the appdirectory. So the only two files that can ber served are /index.html (which the server finds in its root directory: app), and /app.js (which it also finds in its root directory app).
The root, by definition, is the root. There is nothing above the root, otherwise it wouldn't be the root. So asking for ../anythingwhen you're already at the root makes no sense.
Side note: AngularJS is basically an officially abandoned framework. It's still being maintained (security bug fixes only, see documentation) for a few months, and then it's finished. Why are you learning an abandoned framework?
I am trying to install CKEditor in my project. I am using Laravel.
I know I could download the files but I like making my life difficult and I decided that I want to install CKEditor as a npm dependency.
As stated in their documentation here, I added the package to package.json, like this:
"dependencies": {
"jquery": "^1.11.1",
"bootstrap-sass": "^3.0.0",
"elixir-coffeeify": "^1.0.3",
"laravel-elixir": "^4.0.0",
"font-awesome": "^4.5.0",
"ckeditor": "^4.5.7"
}
Now I guess I have to require it in my app.coffee, and so I tried:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')
This surely adds the ckeditor.js script to my app.js. However ckeditor seems to have its own dependencies such as config.js or editor.css, and of course the server responds with 404 for those requests.
How could I install CKeditor this way?
Thank you!
There is probably a problem with paths to those CKEditor dependencies. I'm not sure if you are using browserify or something different but for example in browserify using require('ckeditor') will result in ckeditor.js (bundled probably with other js files) file loading from same dir as your app.coffee file while CKEditor dependencies are in node_modules/ckeditor/ dir.
To tell CKEditor from which directory it should load its dependency you may use CKEDITOR_BASEPATH:
window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')
You may see if there is a problem with loading those files using Network tab in Dev console (e.g. F12 in Chrome).
Note that it's not ideal solution for production environment because then you need node_modules folder on your server. You should probably consider moving only those dependencies to other folder during building/releasing process (and use CKEDITOR_BASEPATH as before with path to this production folder).
Open the resources/js/app.js file
Add the following line:
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic');
Then execute the Laravel Mix command
npm run dev
HTML JS:
<html lang="es">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="[path]/public/app.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
I wish tho host my HTML5 application on Heroku. But I must choose one of the platforms (Java, Python, Node.js, etc) for my app. How can I run my application under Node.js? I have been able to create and deploy a simple Node.js app in Heroku however I am yet to figure out how can I merge my HTML5 app into this Node.js app.
I hope I make sense.
Tanks
"HTML5 app" is very non-descriptive and generic. If you mean an entirely client-side HTML application with no real backend logic, than that's trivial with node.js on heroku. If you put this in the root of your git repo in a file called server.js:
var app = require('express')();
app.use(express.static('app'));
app.listen(process.env.PORT);
Then put all of your HTML5 app in a directory called 'app' and node will serve it up.
Also in the root of your repo you'll need a Heroku Procfile with the following:
web: node server.js
Finally, you'll also want a package.json in the root of your repo so that Heroku can install your dependencies:
{
"name": "my-app",
"description": "My application",
"version": "0.0.1",
"dependencies": {
"express": "3.4.0"
},
"engines": {
"node": ">=0.10.0"
}
}
you can use ruby as well. rack based app Heroku rack based app
You need to create a config.ru file and put your HTML content into public folder
Here are more details about creating a static site based on rack app. Creating Static Sites in Ruby with Rack
Hope this helps!