I want to debug my Polymer app in WebStorm, but there is no Polymer specific configuration option. The Node configuration Run is equivalent to polymer serve in cmd line, but Debug exits with code 0.
I know I can use Chrome to set breakpoints and inspect my code, but it would be nice to do it in WebStorm.
Here's the output when I click "Debug":
/home/user/.node_modules_global/bin/polymer --debug-brk=38501 --expose_debug_as=v8debug serve
/\˜˜/ /\˜˜/\
/__\/ /__\/__\ Polymer-CLI
/\ / /\ /\ /\
/__\/ /__\/ \/__\ The multi-tool for Polymer projects
\ /\ /\ / /\ /
\/__\/__\/ /__\/ Usage: `polymer <command> [options ...]`
\ /\ / /\ /
\/__\/ /__\/
Available Commands
analyze Writes analysis metadata in JSON format to standard out
build Builds an application-style project
help Shows this help message, or help for a specific command
init Initializes a Polymer project
install installs Bower dependencies, optionally installing "variants"
lint Identifies potential errors in your code.
serve Runs the polyserve development server
test Runs web-component-tester
Global Options
--env type The environment to use to specialize certain
commands, like build
--entrypoint The main HTML file that will be requested for
all routes.
--shell string The app shell HTML import
--fragment string[] HTML imports that are loaded on-demand.
--root string The root directory of your project. Defaults
to the current working directory.
--sources string[] Glob(s) that match your project source files.
Defaults to `src/**/*`.
--extra-dependencies string[] Glob(s) that match any additional
dependencies not caught by the analyzer to
include with your build.
-v, --verbose turn on debugging output
-h, --help print out helpful usage information
-q, --quiet silence output
Run `polymer help <command>` for help with a specific command.
Process finished with exit code 0
My html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>quick-tour</title>
<meta name="description" content="quick-tour description">
<link rel="manifest" href="/manifest.json">
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/quick-tour-app/quick-tour-app.html">
</head>
<body>
<quick-tour-app></quick-tour-app>
<img src="https://www.polymer-project.org/images/logos/p-logo-32.png">
</body>
</html>
My custom element:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<!--<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">-->
<!--<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">-->
<dom-module id="quick-tour-app">
<template>
<style>
:host {
display: block;
}
</style>
<h1>[[prop1]]!</h1>
</template>
<script>
/** #polymerElement */
class QuickTourApp extends Polymer.Element {
static get is() { return 'quick-tour-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'Hello'
}
};
}
}
customElements.define(QuickTourApp.is, QuickTourApp);
// window.customElements.define(QuickTourApp.is, QuickTourApp);
</script>
</dom-module>
what's the reason for starting Polymer with Node.js debugger? Are you going to debug Polymer cli? Or, you just like to debug your custom component? In the latter case, start the polymer web server in terminal using polymer serve, then create a JavaScript Debug run configuration, specifying your component URL there (the one that you normally enter in browser, like localhost:8080/components/my-el/) and hit Debug.
Related
i'm trying the wget command with the url below but it's not
downloading the CSV file correctly. Can anyone help with this?
https://www.statistik-berlin-brandenburg.de/opendata/AfSBBB_BE_LOR_Strasse_Strassenverkehrsunfaelle_2020_Datensatz.csv
I used --spider option to reveal true type of file under link
wget --spider https://www.statistik-berlin-brandenburg.de/opendata/AfSBBB_BE_LOR_Strasse_Strassenverkehrsunfaelle_2020_Datensatz.csv
and was informed that
HTTP request sent, awaiting response... 200 OK
Length: 758 [text/html]
Remote file exists and could contain further links,
but recursion is disabled -- not retrieving.
so despite .csv in name it is html, that is probably page I then downloaded and inspected said page, it looks as follows
<!doctype html><html lang="de"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="generator" content="Amt für Statistik Berlin-Brandenburg"/><title>Seite wird geladen</title><link rel="preconnect" href="https://api.scrivito.com" crossorigin/><link rel="preconnect" href="https://api.scrivito.com"/><link rel="preconnect" href="https://cdn0.scrvt.com"/><script defer="defer" src="/assets/index.65d54663cbf0759e5371.js"></script><link href="/assets/index.0823cc0c27dde2848784.css" rel="stylesheet"><script src="/js_snippets_head.js"></script></head><body><div id="application"><span class="loader">Seite wird geladen ...</span></div></body></html>
So it seems to be page with JavaScript which does prompt browser to download file. GNU wget does not support JavaScript execution so is not right tool for your task, you might get desired file downloaded using some browser automation tool instead.
I'm currently trying to set up a flask project using tailwindcss 3.0.23. For templating I'm using jinja. Furthermore yarn is used. During previous projects when working on frontend components I was used to an automatic adoption of styling by the usage of inline HTML classes. As I worked myself through this tutorial, I just realized I have to re-run npx tailwindcss -i ./static/src/style.css -o ./static/css/main.css to generate the most recent version of my tailwind css classes, that I defined in my style.css. As I'm now a lazy developer I would like to configure the project in a way that introduces two things.
#1 automatic generation of most recent css
This should allow me to add tailwind classes, which are automatically applied after saving my .css file and reloading my localhost:3000/index page.
#2 inline tailwind html classes for styling
As described earlier, I need to put all my tailwind classes into the style.css file which looks like the following code snippet, to define a class todo-text that is then later used in my templates/index.html. Instead I would be more flexible and also be able to add tailwind classes to my exisitng index.html like this. <p class="text-xl font-mono font-bold">text</p>
#tailwind base;
#tailwind components;
.todo-text {
#apply text-xl font-mono font-bold;
}
#tailwind utilities;
I have already read about the just-in-time engine of tailwind, but I'm not really sure how to configure my project so that it will work using tailwind 3.0.23. I further do not want to use a CDN as solution and I would appreciate anybody that would also add some explanation about the inner workings, why my current process is so cumbersome and furthermore, which role nodejs plays in this whole topic. Lastly, I've heard of the Flask Assets package but I'm not sure if this is even an option to solve my issues.
Config: My tailwind.config.js looks like this:
module.exports = {
content: ["./templates/*.{html,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
};
Update: As a limited answer to "Why node? What is node used for?" I want to reference this post. But want to encourage you to add more elaborate sources to understand the background of using nodejs better.
I came across the -watch flag that automatically regenerates the latest .css after changes occur.
So just open a new terminal and run npx tailwindcss -i ./static/src/input.css -o ./static/dist/output.css --watch to activate automatic updates after changes in your template files.
Hope that helps!
I was recently struggling with the same problem and was determined to get the compiler automatically started. After some research I found a way to plug-in a subprocess that is automatically torn down when the flask server shuts down.
The compiler is configured to only start in debug mode (flask --debug run).
Assumptions for this code to work:
tailwind was installed with npm
your npm package.json and tailwind.config.js are located in the parent folder of your flask app folder
you define the command to run tailwindcss (e.g. npx tailwindcss -i {src} -o {dst} --minify --watch) within your package.json file as a child of scripts.
package.json
{
"dependencies": {. . .},
"scripts": {
"watch": "npx tailwindcss -i ./app/static/src/main.css -o ./app/static/dist/main.min.css --minify --watch"
}
}
app/utils/compiler.py
import atexit
import json
import os
import shlex
import subprocess
from pathlib import Path
from typing import Optional
import flask
import werkzeug
class TailwindCompiler:
proc: Optional[subprocess.Popen] = None
def __init__(
self,
app: flask.Flask,
npm_script_name: str,
debugmode_only: bool = True,
):
"""Start subprocess to compile TailwindCSS on-the-fly on change.
Prerequisites: flask app is run in debug mode & second instance started
by `werkzeug` is running (this second instance is needed in debug mode
to watch for changes). This ensures that the subprocess is only started
once.
"""
self.app = app
debugmode = app.config["DEBUG"]
is_reloader = werkzeug.serving.is_running_from_reloader()
if debugmode and is_reloader:
self.run(npm_script_name)
elif not debugmode and not debugmode_only:
self.run(npm_script_name)
else:
pass
def run(self, npm_script_name):
"""Run TailwindCSS Compiler as subprocess.
Store the current working dir and assume that tailwind, configs,
etc. are in the apps parent dir. Change the working directory to the
parent dir. Get the command for running tailwind from the package.json.
Start the subprocess. Then change back to the original working dir.
Finally register the subprocess so that it can be shut down on exit.
Parameters
----------
npm_script_name : str
The script that should be run must be defined in a `package.json`
file as a child of the `scripts` key like so:
"scripts": {
"watch": "npx tailwindcss -i ./app/static/src/main.css -o ./app/static/dist/main.min.css --minify --watch"
}
"""
print("=== Starting TailwindCSS Compiler ===")
cwd = os.getcwd()
app_parent_dir = str(Path(self.app.root_path).parent)
os.chdir(app_parent_dir)
with open("package.json") as f:
package = json.load(f)
try:
cmd = shlex.split(package["scripts"][npm_script_name])
except KeyError:
raise ValueError(
f"No script with name '{npm_script_name}' "
"found in `package.json`."
)
TailwindCompiler.proc = subprocess.Popen(cmd)
os.chdir(cwd)
atexit.register(TailwindCompiler.terminate_on_exit)
#classmethod
def terminate_on_exit(cls):
print("=== Closing TailwindCSS Compiler ===")
TailwindCompiler.proc.terminate()
It is now very easy to use! Initialize the class after you created the app object.
app.py
from app import create_app
from app.utils import TailwindCompiler
app = create_app()
# Run TailwindCSS as subprocess; watch for changes; build css on-the-fly
TailwindCompiler(app, npm_script_name="watch", debugmode_only=True)
The output of the compiler is presented between the normal flask server logs.
flask --debug run
* Serving Flask app 'wsgi.py'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quit
* Restarting with stat
=== Starting TailwindCSS Compiler ===
* Debugger is active!
* Debugger PIN: 143-120-061
Rebuilding...
Done in 168ms.
127.0.0.1 - - [05/Dec/2022 11:48:21] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [05/Dec/2022 11:48:21] "GET /static/dist/main.min.css HTTP/1.1" 200 -
. . .
^C=== Closing TailwindCSS Compiler ===
Trying to load a local .json-file from the same folder in D3 (and logging it to the console), but there are two errors in the console:
d3.v5.js:5908 Fetch API cannot load
[buildings.json - file]. URL scheme must be
"http" or "https" for CORS request. json # d3.v5.js:5908 (anonymous) #
index.html:10
d3.v5.js:5908 Uncaught (in promise) TypeError: Failed to
fetch
at Object.json (d3.v5.js:5908)
at index.html:10 json # d3.v5.js:5908 (anonymous) # index.html:10 Promise.then (async) (anonymous) # index.html:10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v5.js"></script>
</head>
<body>
<script>
d3.json("buildings.json").then(data => console.log(data))
</script>
</body>
</html>
Does anybody see the reason & have a solution?
d3.json uses fetch.
export default function(input, init) {
return fetch(input, init).then(responseJson);
}
https://github.com/d3/d3-fetch/blob/master/src/json.js
So you are dealing with the same problem described in these SO posts.
Importing local json file using d3.json does not work
"Cross origin requests are only supported for HTTP." error when loading a local file
Fetch API cannot load file:///C:/Users/woshi/Desktop/P5/p5/JSON/birds.json. URL scheme must be "http" or "https" for CORS request
You are facing a problem with cross origin resource sharing which is a security feature by your browser.
Two options two avoid this:
use a webserver. To just run a simple webserver for your static html/js files something like the npm http-server (https://www.npmjs.com/package/http-server) could be used
Change your chrome startup parameters and let it know that you want to ignore this security feature. You can do this by changing your startup configuration for example like this
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="%LOCALAPPDATA%\Google\Chrome\User Data\development"
The parameters --disable-web-security --user-data-dir are the important part here.
Note: Just use this for development. You allow cross origin requests by this for all websites you visit.
Another possibility mentioned in How to launch html using Chrome at "--allow-file-access-from-files" mode? is to use a browser extension like Web Server for Chrome
I include my CSS files in the header:
<link rel="stylesheet" type="text/css" href="http://cdn.website.com/base.css">
In the S3 interface under Properties-->Metadata-->
Key: Content-Type
Value: text/css
Permissions are granted to Everyone with Open/Download
Still not working.
The problem is determining the path to the static content of the application (it depends on path the application starts olso)
Solutions are:
Start application from root application path
example: ApplicationName path=/home/ec2-user/site then need
cd /home/ec2-user/site && ./ApplicationName
Configure path for method .UseWebRoot(path_to_static_content)
I have just started working with WebRTC. I want to use WebRTC with NodeJS.
Currently I have tried webrtc.io package. When I write a basic code for using WebRTC, I get the following JavaScript error.
Error is :
Uncaught TypeError: Type error
rtc._socket.onopen
Error Location:
webrtc.io.js:65
Here is my code.
CLIENT CODE :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 getUserMedia</title>
<script src="socket.io.min.js" type="text/javascript"></script>
<script src="webrtc.io.js" type="text/javascript"></script>
<script>
rtc.connect('ws://abc.in:8001');
</script>
</head>
<body>
<video id="webcam" width="500" autoplay></video>
</body>
</html>
SERVER CODE :
var webRTC = require('/usr/local/node_modules/webrtc.io').listen( 8001 );
console.log( "Server Listening" );
webRTC.on( "connection", function() {
console.log( "Hi" ); // This gets executed successfully.
});
Q1.
Since "Hi" does get printed successfully, I don't know if JS error is actually making a difference or no. Help me resolve this JS error issue.
Issue also reported here.
Q2.
Hitting http://abc.in:8001/ through browser prints "Not implemented". Is that an issue?
Q3.
I wish to stream the audio+video from a mic and webcam to the server.
I understand that I need to create a peer to peer connection to achieve streaming of audio+video to server. Browser should act as one peer and the server would act as the second peer.
How do I send the WebRTC stream to the server? Lack of documentation of the webrtc.io package isn't helping me either.
Please help
EDIT : Browser used is the latest Google Chrome, Version 31.0.1650.57 m
I uploaded simplest webRTC code at
http://github.com/aungthuya-jse/simplest-webRTC/tree/master
You need to add the node_modules to under of project folder by installing
npm install express
and
npm install webrtc.io
after installation you will see /project-folder/node_modules/express folder and webrtc.io folder