Application not loading when deployed to Firebase - firebase

i'm new to web development and i've created an application that i would like to deploy to firebase. i referred to the online resources and carried out the necessary steps (as shown below) to get my application online. now when i got to my site i don't see the data loading. I recieve the foll error. Now even if i remove the 'scroll to top' script referenced in the error, there is no data loading.
GET https://arrow.scrolltotop.com/arrow88.js net::ERR_INSECURE_RESPONSE
I am walking you through my workflow if that's all right. Any help would be appreciated.
The foll is my package.json:
{
"name": "xxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"angular-animate": "^1.5.0",
"angular": "^1.5.0",
"angular-aria": "^1.5.0",
"angular-ui-router": "^0.2.18",
"mdi": "^1.4.57",
"angular-material": "^1.0.5"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
the foll is my firebase.json
{
"firebase": "xxx",
"public": ".",
"ignore": [
"firebase.json",
"**/.*"
]
}
It think it may be worthwhile to mention that i don't recieve a blank page When i run the application on a local http-server. the application loads and i get all the data from firebase without any errors.
Thanks

Related

How does TeamsFx Hello World Tab sample app invoke local development?

I created the hello world tab example using TeamsFx toolkits VS Code extension. The part that I don't understand is how does the debug mode invoking the tab react app start script?
In the tasks.json file, there is a dependsOn teamsFx: frontend start setting. I couldn't figure out where frontend start script or frontend being declared.
Here is the task.json file
{
"version": "2.0.0",
"tasks": [
{
"label": "Pre Debug Check",
"dependsOn": ["dependency check", "prepare dev env"],
"dependsOrder": "sequence"
},
{
"label": "dependency check",
"type": "shell",
"command": "exit ${command:fx-extension.validate-dependencies}"
},
{
"label": "prepare dev env",
"dependsOn": ["prepare local environment", "frontend npm install"],
"dependsOrder": "parallel"
},
{
"label": "prepare local environment",
"type": "shell",
"command": "exit ${command:fx-extension.pre-debug-check}"
},
{
"label": "Start Frontend",
"dependsOn": ["teamsfx: frontend start"],
"dependsOrder": "parallel"
},
{
"label": "frontend npm install",
"type": "shell",
"command": "npm install --no-audit",
"options": {
"cwd": "${workspaceFolder}/tabs"
}
}
]
}
teamsfx: frontend start is a task contributed by Teams Toolkit extension using Visual Studio Code Extension API: Task Provider. Specifically, from TeamsFx GitHub repo:
the definition of this task is in https://github.com/OfficeDev/TeamsFx/blob/ms-teams-vscode-extension%403.8.0/packages/vscode-extension/package.json#L717-L729.
the implementation of this task is in https://github.com/OfficeDev/TeamsFx/blob/ms-teams-vscode-extension%403.8.0/packages/vscode-extension/src/debug/teamsfxTaskProvider.ts#L116-L129.

How to set dev and prod targets in Parcel

Please can anyone shed some light on how "Targets" work in Parcel, or at least how to separate unminified dev and minified prod files. The sparse documentation just raises further questions and no amount of Googling will find a solution. I am new to Parcel and to the modular nature of newer Javascript syntax.
This all started when I noticed that parcel watch does not minify/uglify the JS, and I don't want that to end up on the prod server. But parcel build WILL minify/uglify the JS. So it would be really swell if my start script could bundle files into build/wp-content/themes/yourproject/assets--dev and the build script could bundle files into build/wp-content/themes/yourproject/assets. That way I can put assets-dev in .gitignore and use those while building the site. Or is that even the proper way to acheive this? In Gulp you can just define different tasks or create one task to do both of these outputs, but I cannot find a way to do this in Parcel.
Description of the project - It's a WordPress site so I can't necessarily feed Parcel source html files to scan. Parcel is really just bundling JS and SCSS files, we are replacing our old Gulp setup. So in package.json, I have this (I'll explain what I have tried in "scripts" and in "targets" further down):
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets--dev",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss --dist-dir ./build/wp-content/themes/yourproject/assets"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
The root of the project is like this:
build/
-- build/wp-admin
-- build/wp-content
-- etc all the WordPress core/theme files that will ultimately end up on the server
The dev directory looks like this, basically just holding the source code for JS and CSS that get compiled into the theme:
In "scripts" I have tried setting "start" and "build" both with and without the --dist-dir flag. And I remove the "targets" object from package.json when I try --dist-dir.
For "targets", I can't find clear documentation/examples on what exactly goes here so I just tried anything I could think of. I have tried all of the following but nothing works the way I am intending it to. Parcel picks either assets-dev or assets and compiles everything there, it won't separate the code. Sometimes it will just compile files into a dist folder, which I am not using.
"targets": {
"start": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"watch": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"targets": {
"dev": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"prod": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
Ultimately I am looking for how to get unminified assets into one folder that I can conditionally load, and minified assets into another folder that will get loaded on the prod server.
I figured it out. The CLI commands in the "scripts" portion of package.json can include the --target flag. This way you can name a target and then define it in the "targets" property. This is the working package.json:
{
"name": "localtesting2",
"version": "1.0.0",
"description": "## Overview",
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel watch develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target default",
"build": "parcel build develop/js/index.js develop/styles/style--critical.scss develop/styles/style--noncritical.scss develop/styles/editor.scss --target build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"smoothscroll-polyfill": "^0.4.4"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.3.2",
"autoprefixer": "^10.4.2",
"parcel": "latest",
"parcel-bundler": "^1.12.5",
"parcel-resolver-ignore": "^2.0.0",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"sass": "^1.49.8",
"webfontloader": "^1.6.28"
},
"targets": {
"default": {
"distDir": "build/wp-content/themes/yourproject/assets--dev"
},
"build": {
"distDir": "build/wp-content/themes/yourproject/assets"
}
},
"parcelIgnore": [
"images/*.*",
"webfonts/*.*"
]
}
Still though there must be a better workflow for this, or maybe a way to get the watch command to minify everything like build does.

Cypress Scripts - Cross-Domain - iFrame Does Not Load

Hope all's well. Kindly request your help with this. We are executing a Cypress script that launches URL 1 - https://domain1.com. This website has an iFrame embedded that launches another site - https://domain2.com. Problem is, site 2 does not load within the iFrame and we keep getting the message - "domain2.com took a long time to respond". However, outside of Cypress if I launch https://domain1.com, the iFrame is opened and domain2 is launched and displayed successfully.
I have reviewed several posts and have performed the following,
cypress.json
"chromewebsecurity": false AND "modifyobstructivecode": false
index.js, followed by package.json
const path = require('path');
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
console.log(config, browser, args);
if (browser.name === 'chrome') {
const ignoreXFrameHeadersExtension = path.join(__dirname, '../extensions/ignore-x-frame-headers');
args.push(args.push(`--load-extension=${ignoreXFrameHeadersExtension}`));
args.push("--disable-features=CrossSiteDocumentBlockingIfIsolating,CrossSiteDocumentBlockingAlways,IsolateOrigins,site-per-process");
}
return args;
});
};
{
"name": "coral",
"version": "1.0.0",
"description": "Coral testing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"cy:run": "C:\\Testing\\Cypress\\Coral\\node_modules\\.bin\\cypress run",
"download-extension": "ced gleekbfjekiniecknbkamfmkohkpodhe extensions/ignore-x-frame-headers"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^4.1.0",
"mochawesome": "^5.0.0",
"mochawesome-merge": "^4.0.2"
},
"reporterEnabled": "mochawesome",
"dependencies": {
"file-system": "^2.2.2",
"nodemailer": "^6.4.6",
"chrome-ext-downloader": "^1.0.4"
}
}
I have downloaded the .crx file for this extension and renamed it to ignore-x-frame-headers under the extensions dir.
However, every time I run the test, the page for domain2.com does not load inside the iFrame.
Can someone please explain what are the steps I'm missing/executing wrong? Really appreciate your prompt and positive response.
Thanks in advance,
Karthik.

Run grunt task with target/argument in VSCode

I have VSCode version 1.18.1, and this in my Gruntfile.js
grunt.registerTask('release', 'Release process', function(target) {
...
}
The target is there so that I can run grunt release:one or grunt release:two. However, I can't figure out how to make VSCode run the task with the one|two target.
This is tasks.json file VSCode created with Grunt task auto detected.
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "grunt",
"task": "release",
"problemMatcher": [],
"label": "Release Process",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
If I put release:one to the task attribute of the tasks.json file, VSCode will complain with something like
Error: The grunt task detection didn't contribute a task for the following configuration:
Anyone has done something similar to this? Can you please guide me on how to do it?
Thank you!
The way I solved this issue myself was by creating a Task of type shell instead, and putting in the full command. For example, you can do following:
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "Release one",
"command": "grunt release:one",
"problemMatcher": [],
}, {
"type": "shell",
"label": "Release two",
"command": "grunt release:two",
"problemMatcher": [],
}
]
}

What do I need in my package.json file in Meteor?

I think I'm confused as to what to have in my package.json file for my Meteor app. My app was originally built with v1.2 and recently updated Meteor to 1.4.1.1 (bypassing 1.3). I have no npm packages installed; all my packages were installed through atmosphere. Do I need to list the dependencies of atmosphere packages? I deploy to Modulus. Here's my file:
{
"name": "sonatina_database",
"private": true,
"mod-project-name": "SONATINAAPP",
"version": "1.0.0",
"description": "Client database for queries, reports, bulk emails, teaching schedule, etc",
"repository": {
"type": "git",
"url": "git+https://github.com/matt-moon/SonatinaDB.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "mj_moon",
"license": "ISC",
"bugs": {
"url": "https://github.com/matt-moon/SonatinaDB/issues"
},
"homepage": "https://github.com/matt-moon/SonatinaDB#readme",
"engines": {
"node": "4.4.7"
}
}
Sorry for the simple question, but it's confusing me.
These aren't a list of dependencies but a list of Meta information for your applications.
It's better to keep this just incase in the future you do decide 'npm' packages later in the future with 'meteor npm install {package name}.
I hope this helps.

Resources