Allow third party cookie in incognito mode from expo-web project - javascript

I have a website on expo-web, in incognito mode my website is not able to send cookie.
So I found the solution here Chrome Extension in incognito mode
Expo uses app.json for generating manifest.json. Is there any way I can add incognito option in the expo app.json?
Here is my current app.json file
{
"expo": {
"name": "website name",
"slug": "website-name",
"privacy": "public",
"incognito": "split", // I want to add this property
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"packagerOpts": {
"sourceExts": [
"tsx",
"js",
"json",
"ts",
"jsx"
],
"config": "metro.config.js"
}
}
}

Related

Error: Problem validating fields in app.json. See https://docs.expo.io/workflow/configuration/ • should NOT have additional property 'nodeModulesPath

Trying to use expo publish in order to host my react native app and show other people but running into this error. It seems to indicate the need for the removal of a 'nodeModedulesPath' property from my app.json but ...well here is the structure. I'm not quite sure what needs to be removed or why, any help would be greatly appreciated.
{
"expo": {
"name": "new",
"slug": "new",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#9CB2A5"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#9CB2A5"
}
},
"web": {
"favicon": "./assets/favicon.png"
},
"plugins": [
[
"expo-notifications",
{
"icon": "./assets/icon.png",
"color": "#ffffff",
"sounds": [
"./local/assets/notification-sound.wav",
"./local/assets/notification-sound-other.wav"
]
}
]
],
"extra": {
"eas": {
"projectId": "027e8e01-7c7e-4212-8812-a49f5db4f826"
}
}
}
}
I tried finding the nodeModulesPath, there is no string with those characters in the entire project directory, and the configuration workflow shown in expo's documentation doesn't exactly explain what would cause this error.

Problem with launch.json file: Visual Studios Code -> Firefox for localhost not working

So I want to launch my JavaScript code from VS-Code to Firefox but cant figure out how to setup the launch.json file.
Terminal:
Terminal view when I run: npm run dev
Debug URL option:
When I hover over "local: http://localhost:3000/"
Error:
Error message that pops up when I try "Debug URL"
launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "firefox",
"request": "attach",
"name": "Attach"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"program": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe"
},
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"reloadOnAttach": true,
"name": "Launch index.html",
"file": "${workspaceFolder}/index.html"
},
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\Project 3 Three.js\\main.js"
}
]
}

How to implement Google AdMob service in React Native?

While working with testing ads, it was fine, but with real ad units, it didn't show up, and most importantly how to implement For the module to attribute interactions with ads to your AdMob app properly you will need to add a googleMobileAdsAppId property to app.json under [platform].config."
enter image description here
change googleMoblieAppId to your own app id. The one you get from admob.
{
"expo": {
"name": "YourappName",
"slug": "Slugname",
"privacy": "public",
"android": {
"package": "in.learner.yourappname",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": "yourGoogleAppId goes here"
}
},
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"config": {
"googleMobileAdsAppId": "your GoogleAppId goes here"
}
}
}
}

Replace React Native Expo Splash Screen Image with Real Splash Screen

How to Replace React-Native Splash Image With Some Custom React-Native Page. Currently I'm using an image as splash screen. I want the splash screen to be dynamic and load/display some data from server. Here is my configuration of app.json:
{
"expo": {
"name": "SplashDemo",
"slug": "SplashDemo",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.sample.splash",
"versionCode": 1
}
}
}
Primary focus on the splash configurations given as:
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
Can we somehow replace it with the React-Native page? How?

vscode launch config for next.js app

I'm developing a next.js app with Visual Studio Code (vscode) and I like that editor a lot! I've installed Debugger for Chrome from the extension store. The config below starts a new Chrome instance and I can start to debug. It stops on the breakpoint in vscode but here comes the problem. It doesn't show the values of the function and jumps into the node_modules event though I added it to "skipfiles".
Breakpoints also won't stop on the constructor. Is next.js somehow not supported?
I'm using async await syntax a lot. Debugging server side code works perfectly.
{
"name": "My Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/my-client/",
"skipFiles": [
"node_modules/**/*.js",
"<node_internals>/**/*.js",
"node_modules",
".next"
]
}
Following worked for me (extending from Maximiliano Cespedes answer):
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "NPM Launch",
"runtimeExecutable": "npm",
"cwd": "${workspaceFolder}/my-app",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"console": "integratedTerminal"
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"stopOnEntry": false,
"restart": true
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
}
],
"compounds": [{
"name": "Debug-Full",
"configurations": ["NPM Launch", "Attach", "Chrome"]
}]
}
I hope is not too late for you ma friend,
Here you have the original documentation from VSCode that solve the issue:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
],
"port": 9229,
"console": "integratedTerminal"
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}

Categories

Resources