I am relatively new to Node.js. This is a very simple program so far, meant to just test the incorporation of material-components-web. I followed the instructions step-by-step in the readme, and this is what I have so far:
package.json
{
"name": "hello-polymer", "version": "0.1.0",
"description": "Intro to Polymer", "main": "index.js",
"scripts": { "start": "node index.js" },
"author": "vcapra1", "license": "ISC",
"dependencies": { "#webcomponents/webcomponentsjs": "^2.0.2" }
}
index.js
http = require('http')
fs = require('fs')
http.createServer((request, response) => {
response.statusCode = 200
response.setHeader('Content-Type', 'text/html')
let filename = "./" + request.url
if (request.url.startsWith("/#")) {
filename = "./node_modules/" + request.url
} else if (request.url == "/") {
filename = "./index.html"
} else {
response.statusCode = 404;
response.end("404 Not Found");
}
fs.readFile(filename, (err, data) => {
console.log("Request: ", request.url);
response.end(data)
})
}).listen(3000)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MWC Test</title>
<script src="#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="#material/mwc-icon/mwc-icon.js"></script>
</head>
<body>
Hello, World
<mwc-icon>sentiment_very_satisfied</mwc-icon>
</body>
</html>
Then I run the following command in the project folder:
polymer serve
I've also tried starting it with npm using:
npm start
Both commands allow me to go to the webpage at http://localhost:XXXX, but each time all I get is the text "Hello, World sentiment_very_satisfied", and the plain text stays there with no icon.
I'm not really sure what I'm missing. I find it strange that the script src attributes reference #webcomponents as a sibling folder while said folder is actually in the node_modules directory, so I tried changing that, but still no luck.
I got it working by running with
polymer serve --module-resolution=node --npm.
This tells polymer-cli to transform npm style references to relative references when serving files. Although it doesn't work for index.html for some reason, so relative paths are required there:
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="node_modules/#material/mwc-icon/mwc-icon.js"></script>
You can read more here https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview#packagenames
Related
I'm starting to use webpack, and I did a tiny project to try, but I'm finding an error that I don't know how to fix. When I run my index.html, it says that can't find bundle.js. I think is something wrong with the path, but I'm not sure. Hope someone can help me!
This is my structure
prueba1
node_modules
build
bundle.js
src
app.js
index.html
messages.js
style.css
package.lock.json
package.json
webpack.config.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Document</title>
<link href="style.css" />
</head>
<body>
<button id="connect">Conectar</button>
<script src="bundle.js"></script>
</body>
</html>
package.json
{
"name": "prueba1",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^5.51.1"
},
"devDependencies": {
"webpack-cli": "^4.8.0"
}
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.js",
output: {
filename: "bundle.js",
path: __dirname + "/build",
},
};
The problem is that your index.html and your bundle.js are in different directories (src and build). You could simply move your index.html to build and it will work.
Or you let webpack do that work with the copy-webpack-plugin (https://www.npmjs.com/package/copy-webpack-plugin): install it using npm install copy-webpack-plugin --save-dev, and add this to your webpack.config.js:
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "src", to: "build" }
],
}),
],
};
I need help with my simple hello world program based for electron.js.
I was reading the quick guide documentation on the official electronjs.org website.
Esentially I did everything it told me to do on that page including the package.json, package-lock.json, index.html and main.js; and installing electron.js however when I tried to boot up my program in cmd using npm start, I just got 2 messages instead of the program opening.
From there it shows me the cmd command line again waiting for an input which is shown in the picture
I don't know what's wrong and no matter how much I try to edit the package.json and the main.js it still seems to spit out the same error. I was getting so desperate that I just copy and pasted the exact same code in the docs and just edited the author and description as asked in the quick guide.
I am well and truly stuck if anyone has any ideas on how to fix this please let me know, I've also tried some simple troubleshooting, the simple reinstall of the electronjs API, tried administrator cmd, read the forums etc and I can't find anything code will be below..
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>
package.json
{
"name": "my-first-electron",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"aws-sdk": "^2.814.0",
"electron": "^11.1.0",
"electron.js": "^0.0.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC"
}
i have problem that i dont know what exactly is the cause the problem is, i have simple code in index.js as main and index.html, in main.js the script will send the version of electron to renderer file index.html, when i'm try it before build that script into .exe, the ipcRenderer can get value from sended value, the following image while i run before build into .exe file like this :
image that run before build into .exe
but when i build it into exe file using electron-packager .
it didn't return any value on it after index.js send version in html file, the following image while the following image while i run after build into .exe file like this
image that run after build into .exe
This is my following script and package.json :
index.js
const { app, BrowserWindow,ipcMain } = require('electron')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule : false
}
})
const appVersion = process.env.npm_package_version
// and load the index.html of the app.
win.toggleDevTools()
win.loadFile('index.html')
win.webContents.on('dom-ready', () => {
console.log(`Trying to send app version to renderer: ${appVersion}`)
win.send('app-version', appVersion)
console.log(`Current directory: ${process.cwd()}`);
})
}
app.whenReady().then(createWindow)
index.html
<html>
<head>
<title></title>
</head>
<body>
<div id ="appVersion">
</div>
</body>
</html>
<script>
'use strict'
const { ipcRenderer} = require('electron')
ipcRenderer.on('app-version', function (event,store) {
console.log(store);
});
</script>
package.json
{
"name": "test",
"version": "1.0.0",
"description": "test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^9.2.0",
"electron-packager": "^15.0.0"
}
}
Hello I am unable to see output in my chrome inspect element. Following are my files.
Output
Webpack.config.js
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
PACKAGE JSON
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "Gaurav Yadav guided by Jonas",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
TEST.JS
console.log("Export data");
export default 23;
INDEX.JS
// Global app controller
import num from "./test";
console.log(`${num} from test`);
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<script>
src = "js/bundle.js";
</script>
</body>
</html>
My project folder name is FORKIFY. There are three subfolders dist, src , nodemodules and three files pacakage-lock.json, pacakage.json, webpack.config.js. Directory image dir.
Please let me know why my console in empty ?
I was following this video to code
https://www.youtube.com/watch?v=sBEryysS1Tg&list=PL15NLmjJalxydhO9orvXv_yvgZEfrDQvX&index=127
Where is the problem and in which file ??
Do i need to change my webpack config file ?
Your folder structure is incorrect.
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
The dist folder will get created when you run the webpack command and you have mentioned your index.html file is present in the dist folder.
Place your index.html file at the root level of your project. Also, if js is folder within dist, then add slash to treat as a directory i:e path: path.resolve(__dirname, "dist/js/")
Appropriate Folder Structure
node_modules
src
-js
- index.js
index.html
package.json
webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js/')
},
watch: true
}
// index.js
console.log('logging');
// index.html
<h1>WebPack works!!</h1>
<script src="dist/js/bundle.js"></script>
Run command webpack, which will create bundle.js file within dist/js/ folder and then open your index.html file in the browser.
Apologies for what will likely be a beginners mistake. I have searched for days to try and find the answer, but am unable to successfully connect to a Firebase Database.
Extracts of all files are below.
I have installed node.js, then firebase init, firebase login, and then firebase serve.
I get the same result whether hosting locally, or after deploying to firebase hosting. I have tried the full paths to the firebase js files previously and similarly got the same result.
What do I need to do to be able to prove its connecting to Firebase ok?
Many many thanks!
index.html...
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/4.0.0/firebase-database.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="app.js"></script>
<title>Page Title</title>
I'm the header ...
</head>
<body>
I'm the body...
<script> getDatabaseRef() </script>
</body>
</html>
app.js...
function getDatabaseRef(){
console.log('Script called');
var firebaseRef = firebase.Database().ref();
console.log(firebaseRef.ref);
window.alert(firebaseRef);
console.log('Script finished');
}
firebase.json....
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
package.json
{
"name": "jobsheetpoc",
"version": "1.0.0",
"description": "my JS proof of concept",
"main": "app.js",
"dependencies": {
"firebase": "^4.0.0"
},
"devDependencies": {
"firebase-server": "^0.10.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jim",
"license": "ISC",
"keywords": [
"job",
"sheet",
"poc"
]
}
Output in Browser...
Output in Browser Window
I have a strange feeling you made a typo. You have a capital Database in firebase.Database instead of a normal one (firebase.database).