These search widgets make it easy to browse the content of five APIs, and are available here: https://search-widgets.trade.gov/
List of widgets:
- Consolidated Screening List
- Trade Leads
- Trade Events
- Export Assistance Centers
- International Office Locations
- Install Node.js (this app was developed with LTS v8.16.0).
- Install dependencies with
npm install. - Then,
npm run startlaunches the app in development mode, with changes viewable at http://localhost:3000.- The page will reload if you make edits.
- You will also see any lint errors in the console.
- The page will reload if you make edits.
In one terminal tab, launch server with npm run start.
In another terminal tab, launch tests with npm run test.
Expect the suite to pass within 10 seconds (depending on network speed).
- Host the build bundles (
/build/static/js/widget.jsand/build/static/css/widget.csswhich are generated by runningnpm run build). As an alternative to the bundled css file, it's also possible to use/src/ITAwidget.css, which allows for editing in situ. - Add the following lines to the
<head>of the html doc:
<link rel="stylesheet" type="text/css" href="widget.css">
<script type="text/javascript" src="widget.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
endpoints = {
"consolidated_screening_list": "consolidated_screening_list_widget_container",
"trade_leads": "trade_leads_widget_container",
"trade_events": "trade_events_widget_container",
"export_assistance_centers": "export_assistance_centers_widget_container",
"international_office_locations": "international_office_locations_widget_container",
};
window.Explorer.renderWidget(endpoints);
});
</script>The endpoints object passed as the first parameter to renderWidget should contain a key-value pair for each endpoint name and corresponding div ID where you'd like that particular widget to appear. Remove any key-value pairs that are not needed for your application.
- For each widget desired, put
<div id="ID_from_the_object"></div>(substitute the ID used in the object above as the HTML id value) to where ever you'd like the widget to appear within the<body>of your HTML document.
npm run build && npm run deploy
This project was bootstrapped with Create React App, and has been ejected to enable customization of webpack.
Prerequisites
- Azure CLI https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest
- Docker CLI https://docs.docker.com/engine/reference/commandline/cli/
- KUBECTL CLI (if deploying to AKS) https://kubernetes.io/docs/tasks/tools/install-kubectl/
- Azure Subscription
- Azure Container Registry (ACR)
- Azure Kubernetes Service (AKS)
- A DNS Zone has been configured with a sub-domain that points to an ingress controller in AKS
- An AKS Ingess Controller with TLS
- Additional documentaion: https://docs.microsoft.com/en-us/azure/aks/ingress-static-ip
- Log in with the Azure CLI:
az login - Select the appropriate Subscription. Ex:
az account set --subscription "Sample_Subscription" - Get credentials. Ex:
az aks get-credentials --resource-group my-resources --name myAKS --overwrite-existing - Rename
kube-config-template.ymltokube-config.ymland update it with the following: - image locations - namespace for each section - host names in the Ingress section - Update
deploy-aks.shwith the appropriate Azure Container Registry and Azure Container Key - Execute
deploy-aks.sh - For Azure DevOps pipeline configuration, update:
azure-pipelines.yml
The application will be available at the following URL: [http://ip-dns-name.location.cloudapp.azure.com] The location in the URL will be the location of the Kubernetes cluster. Ex: eastus, centralus, etc...