We have a react app deployed in AWS which allows us to store specific device information, and we also have created an ec2 instance which takes that data and allows us to configure the device it was based on. We are trying to create a way to run the playbook within the EC2 using a button on the web app, however currently drawing a blank on how to do so.
We used to use a application named Morpheus but ran into all sorts of issues. We are now trying to keep everything from within AWS.
Any suggestions are helpful.
So I have tried to make use of the SSM Document and it has begun to confuse me. I attempted to make use of the script to try navigate to my folder and then run the playbook. However my method is not working at all.
{
"schemaVersion": "2.2",
"description": "Command Document Example JSON Template",
"parameters": {
"Message": {
"type": "String",
"description": "Example",
"default": "Hello World"
}
},
"mainSteps": [
{
"action": "aws:runPowerShellScript",
"name": "navigate to file",
"inputs": {
"runCommand": [ "cd /echo_configure/Config" ]
}
},
{
"action": "aws:runPowerShellScript",
"name": "execute file",
"inputs": {
"runCommand": [ "ansible-playbook apply.yml" ]
}
}
]
}
Could I get some help to push me in the right direction
Related
I've got a Visual Studio solution with an ASP.NET Core Web API and React app (created using create-react-app). I have no issues getting things going, as long as they're on different ports.
But I'm trying to avoid the API calls from the React app needing the port, as I'd like all API calls to use relative paths (for both debug and production + so things will work when testing locally from other devices). In addition, this would avoid having to set up CORS.
I managed to figure out how to set up both React app & API to run from the solution by setting multiple startup projects in the solution. I even was able to get both the React app and API running on the same port -- but not at the same time.
If I try to run them both from Visual Studio as multiple startup projects, the FE app will start up just fine (and on the right port), and even load up in the browser, and when the API loads afterwards the FE can even make calls to the API.
However, refreshing the browser will show the FE has died (it 404s). And if I shut down the BE without shutting down the FE, it will enable me to load the FE again. So it seems like the BE running is killing the FE on the same port.
Here is the API launchSettings.json:
{
"profiles": {
"http": {
"commandName": "Project",
"launchUrl": "swagger",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"dotnetRunMessages": true,
"applicationUrl": "http://localhost:7032"
}
}
}
Here is the FE launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "localhost (Edge)",
"url": "http://localhost:7032",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "localhost (Chrome)",
"url": "http://localhost:7032",
"webRoot": "${workspaceFolder}"
}
]
}
Additionally, on the FE I have a .env file that is simply:
PORT=7032
In my solution's Startup Project properties, I have both API and FE projects set as "Start", with the API first in the order:
My understanding is this should be possible, but it seems like I should have it set up properly, but I'm obviously missing something.
Due to the various server components mixed (JavaScript dev server and Kestrel/IIS Express), you shouldn't expect port sharing to work on your local dev machine. Thus, running React and ASP.NET Core at different ports is what you should follow, and you should run ASP.NET Core on a port other than 7032.
Once you move ASP.NET Core away, revise your React project with the proper proxy options in setupProxy.js, as documented,
https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022#start-the-project
Note that this only works when you debug the React web app locally and when deploying to production environment the proxy must be configured on your web server (nginx/IIS and others) and the actual steps vary a lot.
Coming from a PHP background I am having real trouble debugging server-side code using the following set-up:
Visual Studio Code
Yarn
node.js/express.js
React
Redux
gql/Apollo
I start the local server with yarn start and then "Launch Edge against localhost" with the following 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": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"skipFiles": ["<node_internals>/**"],
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}"
}
]
}
I have made changes to a gqp call but I am unable to get the debugger to trigger inside what I believe to be the server-side code that executes the database query located at src/data/queries/[filename].js OR after the call is made on the client side, nor do I see any error that could shed some light on what has gone wrong.
Could someone please kindly point me in the right direction for debugging in this kind of set-up? At the moment the call seems simply to fail and nothing happens.
Thank you.
I am trying to use chrome.storage API. However, when I perform a console.log of chrome.storage in my browsers console, both my localhost and built extension returns undefined.
There is an extension which I know makes use of chrome.storage API and when I do the same it returns an object with correct information (looks like storage is the only thing that is different compared with both extensions). I have implemented chrome.storage.sync.set and chrome.storage.sync.get but I experience issues relating to chrome.storage being undefined.
My manifest.json file looks like below
{
"name": "Name of application",
"version": "1.0.0",
"manifest_version": 2,
"description": "A plain text description",
"icons": {
"32": "logo_32.png",
"64": "logo_64.png",
"128": "logo_128.png",
"256": "logo_256.png"
},
"browser_action": {
"default_icon": "logo_32.png"
},
"author": "Author name",
"chrome_url_overrides": {
"newtab": "index.html"
},
"permissions": [
"storage",
"http://localhost/*"
]
}
When I console.log just chrome (console.log(chrome)) I get returned object, which is different from the build extension.
I have searched around and can not find a solution. Most answers I have found simply state checking the permissions in the manifest file.
As I created the extension with create-react-app, is there any other configuration I need to change in order to be able to use chrome.storage?
Update
So instead of reloading extension from extensions, I deleted the extension and then added the extension back. This allows me to access chrome.storage when built. However, for my localhost, I still get chrome.storage is undefined. Is there a way to fix this?
I'm attempting to debug a React app with React Dev Tools and Firefox Developer Edition. I can't install React Dev Tools to the profile Firefox is using when it is launched via VSCode. I have React Dev Tools installed when I launch Firefox myself via opening it in /Applications.
However, when I run the below launch.json profile, there are no extensions shown under Preferences -> Extensions & Themes -> Extensions in FireFox after it launches.
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
However, I can follow the directions here and launch Firefox with the terminal and attach my debugger to it. This Profile has React Dev Tools and it works fine running:
/Applications/Firefox\ Developer\ Edition.app/Contents/MacOS/firefox -start-debugger-server
launch.json:
{
"name": "Attach",
"type": "firefox",
"request": "attach",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
But how do I make the first one work with a launch request instead of attach? From reading it seems to have something to do with the profile
I had the same problem and was able to fix it by adding to my launch.json:
"profile": "my-firefox-profile"
Firefox can have miltiple profiles installed. You can check them by typing about:profiles in firefoxes adress bar.
It will show you a list of profiles. The one marked as Default profile: yes should be the one to choose.
My launch.json now looks like this:
{
"name": "Firefox",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:4300",
"webRoot": "${workspaceFolder}",
"profile": "default-release-1"
},
Background:
Firefox profiles hold settings like browsing history, bookmarks - and most importantly - add-ons. By telling VSCode to use a specific profile it serves with the installed plugins.
This will also work if you have the same problem with Angular or Vue.
In addition to the accepted answer, I had to also add the following to launch.json to make Firefox launch with the specified profile.
"keepProfileChanges": true
I am using VSCode 1.52.1 and Firefox 84.0.2.
I am planning to build a new offline-first React Native Expo app where the user mainly will be browsing images and text content.
It must be a fully managed Expo app, without ejecting. So
Realm DB is not a solution, as it requires ejecting the Expo app
Occasionally, the user will be able to manually trigger a reload of the database (images and JSON files). This will download either the entire database (~50-100MB) or a differential update (which I have no idea on such an implementation yet).
Example of database.json
{
"dbVersion": "1.0.1",
"data": {
"animals": [
{
"name": "Dog",
"age": 5,
"quantity": 609,
"images": ["./assets/images/animals/dog/01.jpg", "./assets/images/animals/dog/02.jpg"]
},
{
"name": "Cat",
"age": 2,
"quantity": 66,
"images": ["./assets/images/animals/cat/01.jpg", "./assets/images/animals/cat/02.jpg"]
}
],
"food": [
{
"name": "Banana",
"color": "Yellow",
"quantity": 200,
"images": ["./assets/images/food/banana/01.jpg", "./assets/images/food/banana/02.jpg"]
}
]
}
}
Question: How will you implement the downloading of the database (JSON file and image files) for such an app? Is there a best practice for such an implementation in React Native w/ Expo?
My current thoughts: Can all the database files (JSON and images) be packaged into a .zip file hosted on a remote server (eg. Amazon S3), and the app will download this single file to its local file storage, delete all files associated with the existing database, then uncompress it the newly downloaded .zip file in its place?
Expo comes with SQLite support. Maybe if images are stored in SQLite as well, Expo can (somehow, unsure how) download a new SQLite db.db from a remote server, and overwrite the existing local copy of db.db?
Or do we have to roll our own converter that takes the downloaded db from the remote server, and convert them to SQL statements, which SQLite will execute to import the downloaded data.
Currently using Expo SDK 32, React Native 0.59.8.
If you want to simple way, use AsyncStorage
//save data
const data = JSON.stringify(yourJson);
AsyncStorage.setItem("#database", data);
//load data
AsyncStorage.getItem("#database").then(dataString => {
const data = JSON.parse(dataString);
})
or use local database(https://github.com/realm/realm-js)