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?
Related
I have a static web-page that I want to be the home-page (the one that opens when you run npm start). Inside my package.json, I have:
{
"name": "app-name",
"version": "0.1.0",
"main": "public/home-page/home-page.html",
"private": true,
"dependencies": { ...
where public/home-page/home-page.html is the path from the directory of the package.json to the HTML that I want to open initially. This isn't working.
I created the react page with create-react-app and I put my static webpages from before into public and now want one of them to serve as the entry point of the program.
What am I doing wrong and/or how can I accomplish what i am trying to?
I have a desktop application, packaged using node-webkit JS. Is there any way to open this app with IP address from other computer by browser? I just set node-remote to http://localhost:3000 in package.json but is not working when I use chrome and open the IP. There are some errors like nw is not defiend and etc. Please tell me if this way can work or not. Thanks
I don't know nwjs but if I understand correctly, you want to access to localhost in your computer from another computer.
you can not use ip to access because of NAT. but fortunaly you can do that by a third computer (that is not behind NAT). to do that use localtunel.
for more info see this.
Do you think you could paste what your package.json looks like? I've done what you are talking about. Here is what my file structure looks like:
!(https://i.imgur.com/L3M6lvx.png)
The package.json that is in my project folder:
!(https://i.imgur.com/uZV7mzr.png)
The 1st thing that I did was install my dependencies into my project folder so that I don't get the command not recognized error. I did that by going to my project folder and typing:
npm init -y
npm install nw#0.50.1-sdk nwjs-builder -D
This creates a fresh package.json and adds the modules to the file as dependencies. Then I went into my src folder and created another package.json. I set the "main" tag to my index.html
Going back to the .json in my root project folder, we add to the "script" tag:
"script": {
"dev": "nw src/ --remote-debugging-port=9222"
}
(you can make dev whatever you want)
Once you have that setup, all you need to do is run npm run dev and your app will open up. Head over to chrome and type localhost:9222 and you should be set.
It is possible to create an app that can run in a regular browser, and also in NW.js with added features when it runs inside NW.js. You would need to basically wrap anything in if statements, like
if (window.nw) {
let fs = window.nw.require('fs');
let file = fs.readFileSync('./whatever.txt');
console.log(String(file));
}
You could then create two different npm scripts. One to just run a local web server and one to run it and launch NW.js.
{
"main": "http://localhost:4467",
"node-remote": "http://localhost:4467",
"node-main": "server.js",
"scripts": {
"start": "concurrently \"npm run serve\" \"wait-on http://localhost:4467 && nw .\"",
"serve": "node server.js"
},
"dependencies": {
"express": "latest"
},
"devDependencies": {
"concurrently": "latest",
"wait-on": "latest"
}
}
Example: https://github.com/nwutils/nw-local-server-example
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've begun using Node.js to make web applications. It's really awesome. I've come across a few modules that I want to incorporate into my build. I can work with the modules in Terminal after a global npm install. When it comes time to add them to my application, I have no idea how to go about placing them in my directory structure and I haven't found any good documentation on this. My typical node.js directory is:
ROOT
Server
server.js
node-modules
Client
index.html
css
-main.css
javascript
-main.js
-jquery.js
My process for installing the modules has been:
I cd into my Server file and run npm install
Then I go to my package.json file and include the module in the dependencies
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.1.0",
"jade": "*",
"stylus": "*",
"<node-module-here>": "1.0.x",
},
"engines": {
"node": "0.10.0",
"npm": "1.2.14"
},
}
After that, I head over to the server.js file I add:
module.exports = require('<path_to_node-module_lib>');
When I run functions that are dependent on the modules on the Client side (functions that work in Terminal), I don't receive an error but the function won't run. Because I'm not receiving errors I have no idea about how to debug. If anyone can recognize some fatal flaw in my structure or implementation and can offer some recommendations, I offer my first born.