Is there a way to get simple repository information from GitHub (such as name, date uploaded, description, etc) with javascript and get it in a JSON file?
I am trying to get my repo information to import into my portfolio site.
Thanks in advance.
Try use github api, to get repository information, use GET /repos/:owner/:repo
As for javascript, you can use https://github.com/octokit/rest.js
After correctly importing the library (on server side, install the package via npm and require that module, on client side, download the browser library and insert a script tag in your html file), then you can try something like this
// const Octokit = require('#octokit/rest') // server only
const octokit = new Octokit();
const result = await octokit.repos.get({'owner', 'repo'});
Related
I created a React application using AWS Amplify, and part of the functionality that I need to implement is a a post-processing lambda function that happens after a user has made a purchase on the site.
The function needs to (1) retrieve a PDF file from S3, (2) alter the file in a few ways, and then (3) upload the file back to S3 under a new name. I am getting stuck in that first part when it comes to downloading the file as a blob in Lambda.
I followed the documentation in Amplify that suggested the following code:
import { Storage } from "#aws-amplify/storage"
await Storage.get('test.txt', {
level: 'public'
});
I realized that the function that AWS created uses ES5 and not ES6, and I cannot import packages that way. I need to use const something = require('something'); instead.
I tried following the documentation that I listed above, but I can't seem to find a good path forward. Is Lambda not supposed to be able to run a quick pipeline and retrieve a file from S3?
Thanks for the help!
You can use the AWS SDK for Node to retrieve the object from S3 and post the update. Amplify modules are targeted for browser use. You function will also require an execution role that permits the function to getObject and putObject in the appropriate S3 bucket.
For Node.js, I would recommend using v3 of the AWS SDK. Specifically, look at the GetObjectCommand.
https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/index.html
https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/classes/getobjectcommand.html
I have a react app that loads data from a local json file using
import data from './data.json'
it is all working fine without any issues and I'm able to open my index.html in 3000 and also open it as simple HTML page in browser.
Now I run npm run build which creates the build directory. However, my json values become kind of stagnant as it is hardcoded in the javascript in the build. So the question is how can my code in build directory reads json files from a specific location dynamically.
My question: Why not use fetch and serve the JSON from a server side API?
To partially answer your question:
Without changing any webpack configuration, you can use the import() function, instead of import, and a chunk will be built with the json content within a js file.
async function fn() {
const json = await import("./foo.json")
document.title = json.bar
}
On the other hand, probably, webpack has a way to configure this output to be json, but for that you'll need to npm run eject or use a tool to override the webpack production config.
Apart from other alternatives, what you're looking for vanilla Javascript is called fetch API. It's possible to read from either local or remote URLs via fetch method.
As per the example you provided above, instead of doing below;
import data from './data.json'
You can make use of it like;
fetch('./data.json')
Also it works pretty same way as per any URL;
// Sample working URL example to mock some real data
fetch('https://jsonmock.hackerrank.com/api/football_competitions?year=2015')
And best part of it, the parameter fetch method accept can be modified easily since it both accepts local file path and a URL as a variable very same way;
let baseURL = 'https://jsonmock.hackerrank.com/api',
endpointToCall = 'football_competitions',
year = '2015',
URL;
URL = `baseURL/${endpointToCall}?year=${year}`;
fetch(URL);
Note: With the last example above, my point is to destructure the same API endpoint used with previous example before, via dynamic variables in order to being able to more clearer. Please let me know if it's not and you need more clarification.
What you can do it before you run the npm run build you make a request to your server to get the data.json file and then just run the npm run build when it loads. You can write a simple script for it.
For example:
#!/bin/bash
# Get the file from the server
curl https://yourServer/data.zip -o data.zip
# Unzip the file, you can also use unzip
zip -d data.json
# Move the file to the desired directory
mv data.json /yourApp/data/data.json is
# Navigate to the directory where the npm package is
cd /yourApp/
# This one is optional but you should run a test to see if the app won't crash with the new json data that you fetched
# Run tests
npm run tests
# Run the build command for React
npm run build
You can modify this script with your paths and it should work.
Summary
Get the json data with curl
Unzip it
Move it to your react app where data.json is and replace it
Run the tests (optional)
Run the build
You're done.
Hope this helps.
I have a website where the jQuery.LiveAddress plugin is implemented, but it was deprecated and then totally removed by SmartyStreets in 2014.
https://www.smartystreets.com/archive/jquery-plugin/website/configure
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/5.2/jquery.liveaddress.min.js"></script>
<script>var liveaddress = $.LiveAddress({
key: "YOUR_WEBSITE_KEY_HERE",
debug: true,
target: "US|INTERNATIONAL",
addresses: [{
address1: '#street-address',
locality: '#city',
administrative_area: '#state',
postal_code: '#zip',
country: '#country'
}]
});
</script>
There is now a JavaScript SDK: https://www.smartystreets.com/docs/sdk/javascript
const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usStreet.Lookup;
// for Server-to-server requests, use this code:
// let authId = process.env.SMARTY_AUTH_ID;
// let authToken = process.env.SMARTY_AUTH_TOKEN;
// const credentials = new SmartyStreetsCore.StaticCredentials(authId, authToken);
// for client-side requests (browser/mobile), use this code:
let key = process.env.SMARTY_WEBSITE_KEY;
const credentials = new SmartyStreetsCore.SharedCredentials(key);
It says "for client-side requests (browser/mobile), use this code", but am I correct in assuming that it is not possible to get this code working as browser JavaScript? Wouldn't I need to be running node as a service on my server to be using this code?
The client-side code example can be used in the browser, not just in node. You will need to store your website key in a different way since the browser doesn't have access to process.env. You can store the website key in plaintext here since it will be tied to your hostname.
You will need to be using some kind of library or JS bundler to process the require statement you see on line 1. You can also import the SDK if that's what works better for your setup, for example
import SmartyStreetsSDK from "smartystreets-javascript-sdk"
Something to keep in mind with using the SDK vs the jQuery plugin is that the SDK does not provide and UI elements on the page. It's less of a drop in solution than the jQuery plugin is. You will need to design and create your own UI elements for the user to interact with.
disclaimer: I work for Smarty (formerly SmartyStreets)
I came across this same issue and unfortunately smarty streets decided to make it more difficult for users to implement their product.
Upon my search I came across this fiddle, it doesn't have all of the features the jquery plugin did but it is a good place to start that doesn't require building your own suggestion UI.
<script async src="//jsfiddle.net/smartystreets/uptgh7c8/embed/"></script>
jsfiddle source
The key file that I was missing was the browserify.js file in the SmartyStreets JavaScript SDK.
Run npm install smartystreets-javascript-sdk --save-dev in your project's root directory
Change directory to node_modules/smartystreets-javascript-sdk
Run npm install in this directory
Run rm -rf dist && node browserify.js (script will fail if the dist folder exists)
Copy dist/smartystreets-sdk-1...min.js to a dependencies folder for your main project.
I tried to write a grunt task to take the SmartyStreets SDK and automatically update it, browserify it, and deploy it along with the rest of our website, but it turned out to be too much of a hassle with the time constraints given. If anyone else writes a grunt task for this please share!
I want to use the cloudwatchlog client from AWS SDK (JS) and also set the credentials. So that I am not including the whole AWS SDK bundle inside my Application, because it is very large and slows down the page. Is there a way to configure the credentials and then only use the needed client from the AWS SDK?
so far I have tried this but it doesn't work with the config, typescript says the update method doesn't exist on Config:
import {Config} from 'aws-sdk/lib/core';
import {CloudWatchLogs} from 'aws-sdk';
Luckily I have just done this the other day to shrink down my bundle size as well.
First I would recommend getting the correct aws-sdk config library with:
let Config = require('aws-sdk/global');
To get just the individual CloudWatchLogs you would need to get it like so:
let CloudWatchLogs = require('aws-sdk/clients/cloudwatchlogs');
After this you can configure the credentials like you would before, and to get a new CloudWatchLog you can do: let cloudwatch = new CloudWatchLogs()
Hopefully this helps some.
I am trying to access a particular file from my app installed package but im gettin Javascript type mismatch error. what am i doing wrong. Please tell me a good way to access any file from my installed package.
Windows.Storage.StorageFile.getFileFromApplicationUriAsync("ms-appx://PackageName/images/appicon.png").done(
function (file) {
// Process file
}
);
Need to create an URI from the string first.
var uri = new Windows.Foundation.Uri("ms-appx:///datafile.xml")
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done()
MSDN Link: StorageFile.GetFileFromApplicationUriAsync