Understanding deploy url and base href - node.js

I'm developing an Angular app which I need to deploy on path
https://examplePath/AppSection/myApp
There is a server which redirect http://examplePath/AppSection to http://localhost:8080.
So, what I thinked to do is to set, in my Angular.json, the base href property like this:
"serve": {
[..]
"options": {
"host": "0.0.0.0",
"port": 8080,
"browserTarget": "myApp:build",
"baseHref": "/myApp/"
},
[...]
Doing this the app was accessible but all the calls to runtime.js, polyfill.js, main.js, etc... doesn't work because the browser tryed to find these file on
http://examplePath/myApp
Then I read about the deployUrl property so I set the angular.json like that:
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {"deployUrl": "https://examplePath/AppSection/",
[...]
"serve": {
[..]
"options": {
"host": "0.0.0.0",
"port": 8080,
"browserTarget": "myApp:build",
"baseHref": "/myApp/"
},
[...]
This configuration works but with several issues and the browser usually remove AppSection/ from the url (I don't know why).
Then I edited my baseHref property adding AppSection/ and the result is:
"deployUrl": "https://examplePath/AppSection/"
"baseHref": "/AppSection/myApp/"
This configuration works but the browser has some problems with sockjs-node:
WebSocket connection to 'wss://examplePath/sockjs-node/570/wwadpefk/websocket' failed: Error during WebSocket handshake: Unexpected response code: 404 GET
https://examplePath/sockjs-node/570/00lb5fwe/eventsource 404 (Not Found) VM3475 sockjs.bundle.js:1
GET https://examplePath/sockjs-node/570/kqry21k3/htmlfile?c=_jp.a5d54nx 404 (Not Found)
Refused to display 'https://examplePath/sockjs-node/570/kqry21k3/htmlfile?c=_jp.a5d54nx' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Honestly I do not understood what I should do to deploy on a specific path.

Related

Cross origin error between angular cli and flask

first i post the user id and password from the UI(angular) to flask
public send_login(user){
console.log(user)
return
this.http.post(this.apiURL+'/login',JSON.stringify(user),this.httpOptions)
.pipe(retry(1),catchError(this.
handleError))
}
next i received it from backend
backend error
all the operations are working properly but at console the cross origin error is raising
Error at UI console
the http option in Ui side is mentioned below
constructor(private http: HttpClient) { }
// Http Options
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:9000',
'Access-Control-Allow-Methods': "GET,POST,OPTIONS,DELETE,PUT",
'X-Requested-With': 'XMLHttpRequest',
'MyClientCert': '', // This is empty
'MyToken': ''
})
}
the cors declared at backend is metioned below
cors = CORS(app, resources={r"/login": {"origins": "*"}})
#app.route('/login', methods=['GET','POST'])
def loginForm():
json_data = ast.literal_eval(request.data.decode('utf-8'))
print('\n\n\n',json_data,'\n\n\n')
im not able to find were is the problem is raising
Note: cross origin arising in the time of login process other wise in the consecutive steps
add below code in your app.py
CORS(app, supports_credentials=True)
and from frontend use
{with-credentials :true}
it will enable the communication between the frontend and backend
To me it seems the call is not leaving the front end (at least in my experience it is like this), because the browsers are securing this.
Create a new file proxy.conf.json in src/ folder of your project.
{
"/backendApiUrl": { <--- This needs to reflect the server backend base path
"target": "http://localhost:9000", <-- this is the backend server name and port
"secure": false,
"logLevel": "debug" <--- optional, this will give some debug output
}
}
In the file angular.json (CLI configuration file), add the following proxyConfig option to the serve target:
"projectname": {
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json" <--- this is the important addition
},
Simply call ng serve to run the dev server using this proxy configuration.
You can read the section Proxying to a backend server in https://angular.io/guide/build
Hope this helps.

Cucumber testing example is not running

I have setup a working nightwatch environment and now want to use cucumber for testing. I have followed this guide: https://www.youtube.com/watch?v=Jdlsv0CQ2CY&t=22s. No matter what I try I cannot get the test to work, I get this as output:
> cucumberpractice#1.0.0 test /Users/kieran/Documents/cucumberPractice
> cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty
Feature: Hacker News Search
Scenario: Searching Hacker News
Given I open Hacker News's home page
? undefined
Then the title is "Hacker News"
? undefined
And the Hacker News search form exists
? undefined
Warnings:
1) Scenario: Searching Hacker News # features/hackernews.feature:3
? Given I open Hacker News's home page
Undefined. Implement with the following snippet:
Given('I open Hacker News\'s home page', function () {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
? Then the title is "Hacker News"
Undefined. Implement with the following snippet:
Then('the title is {string}', function (string) {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
? And the Hacker News search form exists
Undefined. Implement with the following snippet:
Then('the Hacker News search form exists', function () {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
1 scenario (1 undefined)
3 steps (3 undefined)
0m00.000s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cucumberpractice#1.0.0 test: `cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cucumberpractice#1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kieran/.npm/_logs/2019-09-13T20_22_09_135Z-debug.log
I have package.json, nightwatch.conf.js, cucumber.conf.js, hackernews.feature and hackernews.js files.
const { client } = require('nightwatch-api');
const { Given, Then } = require('cucumber');
Given(/^I open Hacker News's home page$/, () => {
return client
.url('https://news.ycombinator.com/')
.waitForElementVisible('body', 1000);
});
Then(/^the title is "([^"]*)"$/, title => {
return client.assert.title(title);
});
Then(/^the Hacker News search form exists$/, () => {
return client.assert.visible('input[name="q"]');
});
Feature: Hacker News Search
Scenario: Searching Hacker News
Given I open Hacker News's home page
Then the title is "Hacker News"
And the Hacker News search form exists
const chromedriver = require('chromedriver');
module.exports = {
"src_folders": ["tests"],
test_settings: {
default: {
webdriver: {
start_process: true,
server_path: chromedriver.path,
port: 4444,
cli_args: ['--port=4444']
},
desiredCapabilities: {
browserName: 'chrome'
}
}
}
};
{
"name": "cucumberpractice",
"version": "1.0.0",
"description": "Cucumber framework",
"main": "index.js",
"scripts": {
"test": "cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty"
},
"repository": {
"type": "git",
"url": "git+https://github.com/BinaryJava/nightwatch-testing.git"
},
"author": "Kieran Marriott",
"license": "ISC",
"bugs": {
"url": "https://github.com/BinaryJava/nightwatch-testing/issues"
},
"homepage": "https://github.com/BinaryJava/nightwatch-testing#readme",
"devDependencies": {
"chromedriver": "^76.0.1",
"nightwatch": "^1.2.2"
},
"dependencies": {
"cucumber": "^5.1.0",
"cucumber-pretty": "^1.5.2",
"nightwatch-api": "^2.3.0"
}
}
How do I fix this?
you might giving the path wrong for step definition file in your package.json file,
"scripts": {
"test": "cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty"
},
for example my, here is my code in package,json,
"scripts": {
"test": "cucumber-js --require cucumber.conf.js --require tests --format node_modules/cucumber-pretty"
},
"--require tests": here "test" is the location folder where my feature file and my step definition files are exist.
Instead of Scenario: Searching Hacker News
you have to put
Scenario Outline: Searching Hacker News
to add Examples

Angular Using Wrong URL for querying MongoDB with NodeJS

I have this Angular 7 app that was working fine until I decided to move my logic out of the app.component.ts file into a new login.component.ts file. Ever since I did this, when I try and login and the app queries the database, it uses the wrong url--4200 instead of 3000. I set up a proxy.conf.json file like this:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
This actually was already set up before I made the switch out of my app.component.ts file. I didn't make any other changes than reconnecting everything from the move to another component. I can't find where Angular is pointed to localhost:4200 instead of 3000. Does anyone have any ideas? Thanks in advance. Banging my head against the wall. By the by my OS is Windows 10 running VS Code.
Here's the error of my next issue:
VM623:37 ERROR TypeError: Cannot read property '0' of undefined
at
LoginComponent.push../src/app/login/login.component.ts.LoginComponent.toPrint
And here are the two functions involved with this error:
toPrint(match) {
return `Name: ${this.match[0].name} Checking: ${this.match[0].checking}
Savings: ${this.match[0].savings}`
}
printUserData(match){
this.buttonPressed = true;
return this.loginComponent.toPrint(match);
}
Just include your proxy configurations in angular.json file so that at the time when you run your application it run your proxy as well.
Example -
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "movie-analysis:build",
"proxyConfig": "src/proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "movie-analysis:build:production"
}
}
}
Hope it helps :)

How to disable react-transform-hmr in production?

I have a problem with my create react app. When I run dev version everything is fine. When I'm trying to run build version I get error:
Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
at n (react-datepicker.js:4634)
I tried this: babel.rc file
{
"presets": ["es2015", "stage-0"],
"env": {
// only enable it when process.env.NODE_ENV is 'development' or undefined
"development": {
"plugins": [[
"react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
// if you use React Native, pass "react-native" instead:
"imports": ["react"],
// this is important for Webpack HMR:
"locals": ["module"]
}]
// note: you can put more transforms into array
// this is just one of them!
}
]]
}
}
}
and my build command is:
"build": "set NODE_ENV=production && react-scripts build",
Any idea why this happens or where should I look for solutions?
Thanks

Starting Selenium Server with Nightwatch.js

I was using selenium-webdriver and wanted to try out nightwatch.js to see if it is easier to use. I followed the instructions here. I decided to let Nightwatch automatically start the selenium server for me so I did what I thought was the proper configuration based on the linked provided above. I get an error that I can't figure out and the output says:
Starting selenium server... started - PID: 1760
[Test] Test Suite
=================
Running: demoTestGoogle
Error retrieving a new session from the selenium server
Error: connect ECONNREFUSED 127.0.0.1:8080
at Object.exports._errnoException (util.js:856:11)
at exports._exceptionWithHostPort (util.js:879:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1053:14)
Connection refused! Is selenium server started?
Process finished with exit code 1
The selenium debug log file says this
13:43:03.394 INFO - Launching a standalone Selenium Server
13:43:03.474 INFO - Java: Oracle Corporation 25.73-b02
13:43:03.474 INFO - OS: Windows 7 6.1 amd64
13:43:03.483 INFO - v2.52.0, with Core v2.52.0. Built from revision 4c2593c
13:43:03.530 INFO - Driver class not found: com.opera.core.systems.OperaDriver
13:43:03.530 INFO - Driver provider com.opera.core.systems.OperaDriver is not registered
13:43:03.536 INFO - Driver provider org.openqa.selenium.safari.SafariDriver registration is skipped:
registration capabilities Capabilities [{browserName=safari, version=, platform=MAC}] does not match the current platform VISTA
13:43:03.665 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
13:43:03.665 INFO - Selenium Server is up and running
This is my nightwatch.json file
{
"src_folders": [ "tests" ],
"output_folder": "reports",
"custom_commands_path": "",
"custom_assertions_path": "",
"page_objects_path": "",
"globals_path": "",
"selenium": {
"start_process": true,
"server_path": "./bin/selenium-server-standalone-jar/jar/selenium-server-standalone-2.52.0.jar",
"start_session" : true,
"log_path": "",
"host": "",
"port": 4444,
"cli_args": {
"webdriver.chrome.driver": "",
"webdriver.ie.driver": ""
}
},
"test_settings": {
"default": {
"launch_url": "http://localhost",
"selenium_port": 8080,
"selenium_host": "localhost",
"silent": true,
"screenshots": {
"enabled": false,
"path": ""
},
"desiredCapabilities": {
"browserName": "firefox",
"javascriptEnabled": true,
"acceptSslCerts": true
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
}
}
Edit: Added demoTestGoogle, I have a nightwatch.js file in which I run and then it runs the demoTestGoogle function.
nightwatch.js which runs demoTestGoogle
require('nightwatch/bin/runner.js');
demoTestGoogle function in separate JS file
this.demoTestGoogle = function (browser) {
browser
.url('http://www.google.com')
.waitForElementVisible('body', 1000)
.setValue('input[type=text]', 'nightwatch')
.waitForElementVisible('button[name=btnG]', 1000)
.click('button[name=btnG]')
.pause(1000)
.assert.containsText('#main', 'The Night Watch')
.end();
};
As suggested by this great guide to Nightwatch, dwyl-learn-nightwatch, you can replace your nightwatch.json file with a .js file to add features like variables, globals and even requiring in Selenium so Nightwatch can see it and run it.
Here's a simple example I modified from that GitHub source to start selenium with its tests. Make sure to install the dependencies in the project, first:
npm install --save-dev nightwatch chromedriver selenium-server
Then replace that JSON file with a .js one, perhaps named nightwatch.conf.js and notice the config options under the selenium key in the config file:
nightwatch.conf.js
const seleniumServer = require("selenium-server");
const chromedriver = require("chromedriver");
const SCREENSHOT_PATH = "./screenshots/";
module.exports = {
"src_folders": [
"tests/e2e"
],
"output_folder": "./reports",
"selenium": {
"start_process": true, // tells nightwatch to start/stop the selenium process
"server_path": seleniumServer.path,
"host": "127.0.0.1",
"port": 4444, // standard selenium port
"cli_args": {
"webdriver.chrome.driver" : chromedriver.path
}
},
"test_settings": {
"default": {
"screenshots": {
"enabled": true, // if you want to keep screenshots
"path": SCREENSHOT_PATH // save screenshots here
},
"globals": {
"waitForConditionTimeout": 5000 // set a (default) timeout period, maybe 5s
},
"desiredCapabilities": { // use Chrome as the default browser for tests
"browserName": "chrome"
}
},
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true
}
}
}
}
function padLeft (count) { // theregister.co.uk/2016/03/23/npm_left_pad_chaos/
return count < 10 ? '0' + count : count.toString();
}
var FILECOUNT = 0; // "global" screenshot file count
/**
* The default is to save screenshots to the root of your project even though
* there is a screenshots path in the config object above! ... so we need a
* function that returns the correct path for storing our screenshots.
* While we're at it, we are adding some meta-data to the filename, specifically
* the Platform/Browser where the test was run and the test (file) name.
*/
function imgpath (browser) {
var a = browser.options.desiredCapabilities;
var meta = [a.platform];
meta.push(a.browserName ? a.browserName : 'any');
meta.push(a.version ? a.version : 'any');
meta.push(a.name); // this is the test filename so always exists.
var metadata = meta.join('~').toLowerCase().replace(/ /g, '');
return SCREENSHOT_PATH + metadata + '_' + padLeft(FILECOUNT++) + '_';
}
module.exports.imgpath = imgpath;
module.exports.SCREENSHOT_PATH = SCREENSHOT_PATH;
And the command I use to run this is this, using the locally installed nightwatch version:
nightwatch --config nightwatch.conf.js
Hope that helps!
Goodluck and good on your for testing your code.

Resources