my-app.html missing from bundled build folder - polymer

I have a situation where I am using polymer starter-kit template for my app. My polymer.json files looks like this:
{
"entrypoint": "index.html",
"shell": "src/my-app.html",
"fragments": [
],
"sourceGlobs": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
When I build using polymer-cli command - 'polymer build', the bundled folder seems to miss the shell file 'my-app.html'.
If I remove
"shell": "src/my-app.html",
from the polymer.json file, the my-app.html file gets created in the bundled/src folder as it should but then the index.html file goes missing.
I am using the polymer-starter-kit template and adding files to it. I can't figure out why my-app.html or index.html goes missing depending on how polymer.json is configured.
Can you please tell me what's going wrong here?
Thank you.

I had the same problem with you yesterday and I added "/" at front of urls in polymer.json.
{
"entrypoint": "index.html",
"shell": "/src/my-app.html",
"fragments": [
"/src/my-app.html",
"/src/my-home.html",
"/src/my-shop.html"
],
"sourceGlobs": [
"src/**",
"src/**/*",
"src/structure/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
I only added "/" at shell & fragments part and it worked.
I hope this can help.
Cheers.

Related

Webpack: How to add a content hash of js file for JSON

I am developing a chrome-extension with webpack and am building my javascript file names using contenthash
webpack.config.js
module.exports = {
mode: "production",
entry: {
index: "./src/index.js",
popup: "./src/popup.js",
background: "./src/background.js",
},
output: {
filename: "[name].[contenthash].js",
path: path.resolve(__dirname, "dist"),
},
}
In the same directory, I have my manifest.json where I need to reference my background.[contenthash].js file. (To simplify, I have left out some fields)
manifest.json
{
"manifest_version": 2,
"name": "*",
"version": "*",
"description": "*",
"browser_action": {
"default_popup": "popup.html"
},
"author": "*",
"background": {
"scripts": [
"background.*.js"
],
"persistent": false
}
I tried to access my background.[contenthash].js file by using scripts: [ background.*.js ] but I am unable to do so. I was thinking of just not using the contenthash all together for simplification, but I would prefer to have it. To clarify, they are both in the same directory.
You can use webpack-manifest-plugin in order to generate a manifest with file mapping, after the build, you can read it, and change the background field at the end.
A cool setup may be achieved by writing a custom webpack plugin which will load the manifest.json from src folder, change the required fields (version, background etc) and add it to be emitted to the dist folder.

How to Debug other project than "main"?

Using Visual Studio Code, I have two directories in my workspace (both node.js projects), but I can only launch one of them. The launch.json file exists in both folders, but only the first is available in debug menu. The launch.json files looks like that:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\app.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
How can I start debugging the second folder of my workspace?
I removed the first folder from the workspace, started the only project left, then added the removed folder again. Now I have both projects in the launch configurations.
I have found two solutions. Both involve editing your *.code-workspace file.
As OP found, you can reorder the folders. In the *.code-workspace file, place the folder with the desired launch.json at the top of the list of folders.
"folders": [
{
"path": "..\\ProjectWithLaunchJson"
},
{
"path": "..\\MyOtherProject"
}
]
Alternatively, you can include the launch configuration in the *.code-workspace file.
"folders": [
:
:
],
"settings": {
"launch": {
"configurations": [
{
<copy your launch.json's configuration into here>
}
]
}
}
YMMV. I had to tweak the path to the executable. And I had to remove the preLaunchTask property since VS Code could not find the Task. VS Code's support for this will likely evolve.

angular2 ng-cli: unable to add twitter-bootstrap to index.html

I recently started a angular2 web app using ng-cli. i'm trying to add Twitter-bootstrap (which I installed with npm) to my index.html file. For some reason it doesn't seem to find bootstrap even though the path is correct. Am I missing something? Is ng-cli moving bootstrap somewhere else?
My code:
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/stylesheet">
Angular cli does not work the way you are doing. it add third party library like below.
add install library using NPM
npm install bootstrap#next
add your script and style files in apps[0].scripts and apps[0].styles properties of angular-cli.json. like
apps": [
{
"root": "src",
"outDir": "dist",
......
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js",
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
after adding like this. it will add all the files into index.html

Use `folder_exclude_patterns` to only ignore top-level directory

I have a directory structure:
app
--controllers
----components
components
And in my sublime text 2 project file I want to ignore the top-level components directory (which was created by a bower install while keeping access to the components directory in controllers.
How do I do this? Here's my current sublime settings:
{
"folders":
[
{
"path": "/path/to/Project",
"folder_exclude_patterns": ["cake", "vendor", "node_modules", "components"],
"file_exclude_patterns": ["*.sublime-workspace"]
}
]
}
You can add additional paths to members of the folder_exclude_patterns array:
"folder_exclude_patterns": ["cake", "vendor", "node_modules", "Project/components"],
should work just fine.
as of 2020, (build 4067) it's possible to reference project-folder using '//'
"folder_exclude_patterns": ["cake", "vendor", "node_modules", "//components"],
before 2020, you could do:
"folder_exclude_patterns": ["cake", "vendor", "node_modules", "/path/to/Project/components"],
or on Windows - without ':'
"folder_exclude_patterns": ["cake", "vendor", "node_modules", "C/path/to/Project/components"],
Note there is no official release in 2020 yet, only dev.

Malformed bower.json file

I have the latest version of Bower installed. I am trying the command
bower register flatly-3 https://github.com/brandonjschwartz/bower-bootswatch-flatly.git
Bower has the error message that the bower.json file is malformed due to an unexpected string. I have tried a number of different things (punctuation etc) but get the same error... Any help is greatly appreciated
Bower is attempting to get tag 3.0.0 from your repo:
https://github.com/brandonjschwartz/bower-bootswatch-flatly/releases/tag/3.0.0
The bower.json from that release does have some issues:
{
"name": "bower-bootswatch-flatly",
"version": "2.3.2",
"main": "less/flatly.less",
"keywords": [
"flatly",
"bootstrap",
"twitter bootstrap",
"bootswatch",
"less",
"css",
"flat",
"flat ui",
"theme"
] <-- missing comma
"ignore": [
"**/.*",
"node_modules",
"components"
],
"dependencies": {
"bootstrap-less": "2.3.2"
}
}
Your best bet is to redo the tag