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?
Related
Creating my first React (frontend)/Express (backend) app (3000:5000 respectively). Both are running but when I setup a proxy in my frontend package.js, the frontend is still trying to grab localhost:3000 and is not using the proxy to request data from the backend. I noticed that my package-lock.js doesn't the proxy reference like my package.js does. Is package-lock.js not updating? Or is this another issue?
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {..
I deleted the package-lock.json and regenerated it but no proxy mentioned in it again?
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 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'm using Firebase functions with a React application. I have some non-trivial code that I don't want to duplicate, so I want to share it between the deployed functions and my React client. I've got this working locally in my React client (though I haven't tried deploying) - but I can't deploy my functions.
The first thing I tried was npm link. This worked locally, but the functions won't deploy (which makes sense, since this leaves no dependency in your package.json). Then I tried npm install ../shared/ - this looked promising because it did leave a dependency in package.json with a file: prefix - but Firebase still won't deploy with this (error below).
My project directory structure looks like this:
/ProjectDir
firebase.json
package.json (for the react app)
/src
* (react source files)
/functions
package.json (for firebase functions)
index.js
/shared
package.json (for the shared module)
index.js
My shared module package.json (extraneous details omitted):
{
"name": "myshared",
"scripts": {
},
"dependencies": {
},
"devDependencies": {
},
"engines": {
"node": "8"
},
"private": true,
"version": "0.0.1"
}
My firebase functions package.json (extraneous details omitted):
{
"name": "functions",
"scripts": {
},
"dependencies": {
"myshared": "file:../shared",
},
"devDependencies": {
},
"engines": {
"node": "8"
},
"private": true
}
When I try to deploy with:
firebase deploy --only functions
It's telling me it can't load the module:
Function failed on loading user code. Error message: Code in file index.js can't be loaded.
Did you list all required modules in the package.json dependencies?
And I don't think the issue is how I export/imported my code- but just in case:
The export:
exports.myFunc = () => { some code };
The import (functions/index.js)
const myFunc = require('myshared');
And in my react code:
import { myFunc } from 'myshared';
So far the searching I've done hasn't yielded anything that works. Someone did mention entering the shared module path in firebase.json, but I couldn't find any details (including in the firebase docs) that show what that would look like. Thanks for any tips to get this going.
I found a solution. I'm not sure if it's the only or even the best solution, but it seems to work for this scenario, and is easy. As Doug noted above, Firebase doesn't want to upload anything not in the functions directory. The solution was to simply make my shared module a subdirectory under functions (ie ./functions/shared/index.js). I can then import into my functions like a normal js file. However, my shared folder also has a package.json, for use as a dependency to the react app. I install it using:
npm install ./functions/shared
This creates a dependency in my react app, which seems to resolve correctly. I've created a production build without errors. I haven't deployed the react app yet, but I don't think this would be an issue.
Another solution is to create a symlink. In terminal, under /ProjectDir, execute:
ln -s shared functions/shared
cd functions
npm i ./shared
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.