Best match

Most recent

Billboard

Global 200

Billboard Global 200 ranks the top songs based on streaming and/or sales activity from more than 200 territories around the world- including the U.S. - as tracked by Luminate. The ranking is ...

Billboard Global 200

Deep into the subtly monochrome landscape of the southern West Bank, Abu Ismaeel’s tent stands out amongst bare rolling hills that stretch into the horizon. A lonely gate, with no fence around it, signals the official entrance to two large tents in the ...

Masar Ibrahim Al Khalil (Abraham’s Path)

Inter Press Service

Shinzō Abe

Japan

Wake

Abe, whose grandfather ... the church has established a global presence, with Japan proving fertile ground for converts and their donations. The group claims to have 100,000 active believers ...

Japan may seek to dissolve Moonies church in wake of Shinzo Abe killing

The Guardian

Global warming

Africa bears brunt of global warming it did little to cause: WMO Sudan: ‘Dire’ health situation faces those on the run, $1 billion support package needed: UNHCR Ukraine: ‘Immense challenges’ impede justice for war victims say rights experts

global warming

UN News Centre

Georgia

Global Environment Outlook

Following a very successful UN Environment Assembly, the resolution on the future of the Global Environment Outlook (GEO) was approved by Member States on March 2, 2022. GEO-7 preparations began with the inaugural meetings of GEO-7 which are the Ad hoc ...

Global Environment Outlook 7

unep.org

Annex yard is the second facility of APT in RAK maritime city with a quay side of 172 meters, 40,000 sq. m area for offshore construction/loadout/afloat repairs/green ...

APT Global UAE RAK Annex Yard

LinkedIn

UNESCO

Global

UNESCO Global Geoparks (UGGp) are single, unified geographical areas where sites and landscapes of international geological significance are managed with a holistic concept of protection, education and sustainable development. Their bottom-up approach of ...

UNESCO Global Geoparks

Huawei

This is the result of China's overall development and close integration with global interests. In this era of globalization, the idea of kicking Chinese companies out of the industrial chain will ...

How should Raimondo accurately understand Huawei's new presales?: Global Times editorial

Global Times

Get the most recent info and news about ABE Global on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

ABE Global

Running Eleventy Serverless On AWS Lambda@Edge Eleventy is great. It’s a static site generator written in JavaScript, for “ ” It’s 10 to 20 times faster than the alternatives, like Gatsby or Next.js. You get all of your content statically rendered and ready to be CDN-delivered. You needn’t worry about server-side rendering to get those pretty social share unfurls. And, if you have a large data set, that’s great — Eleventy can with no issues. Fast Builds and even Faster Web Sites. generate tens of thousands of pages What if you have a HUGE data set? When building Sandworm’s , we wanted to generate a catalog of beautiful report visualizations for every library in the npm registry. That is, for every version of every library in the registry. We soon found out — that’s more than . Good luck generating, uploading, and keeping that amount of HTML pages up to date in a decent amount of time, right? open-source security & license compliance audits for JavaScript packages 30 million package versions We looked at reducing our data set to just the most popular packages. We looked at implementing partial builds, where stale report pages would get continuously generated and uploaded. But the solution we ended up implementing was , a plugin that runs one or more template files to generate dynamic pages. So instead of going through the entire set of pages at build time, this plugin allows us to separate “regular” content pages rendered at build from “dynamic” pages rendered on demand. We can then simply generate and upload static content (like the homepage, about page, etc.) in the CI, and then deploy some code to a compute provider that will generate an npm package page when a user navigates to a specific URL. Great! Eleventy Serverless at request time Except: Eleventy Serverless is built to work out-of-the-box with Netlify Functions, and we’re running on AWS. The good news is that you get Eleventy Serverless to run in AWS Lambdas. Even better, you can get it to run in Lambda@Edge, which runs your code globally at AWS locations close to your users so that you can deliver full-featured, customized content with high performance and low latency. can Setting up Eleventy First things first: let’s get Eleventy running the local build. We start by installing it: npm i @11ty/eleventy --dev Then, let’s create the simplest template for our static Eleventy page. We’ll write it using , but since it’s so simple, it won’t take advantage of any useful templating tags for now. Liquid Let’s call it : index.liquid <h1>Hello</h1> That’s it, we’re ready to build and serve! Run: npx @11ty/eleventy --serve

[11ty] Writing _site/index.html from ./src/index.liquid
[11ty] Serverless: 3 files bundled to ./serverless/edge.
[11ty] Wrote 1 file in 0.12 seconds (v2.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/ Visit in your browser at this point, and you should see the “Hello” heading we’ve created above. Neat! http://localhost:8080/ Setting up the Eleventy Serverless plugin The Serverless plugin is bundled with Eleventy and doesn’t require you to npm install anything. We do need to configure it, though. To do that, we need to create an Eleventy config file: // .eleventy.js
const { EleventyServerlessBundlerPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(EleventyServerlessBundlerPlugin, {
    name: "edge",
    functionsDir: "./serverless/",
    redirects: false,
  });

  return {
    dir: {
      input: 'src',
    },
  };
}; Let’s break the plugin configuration down: Each plugin’s unique will determine the build output directory name and will be required when assigning permalinks. You can also instantiate multiple plugins to have different functions handle different pages. name The allows you to specify the path to the build output dir; in our case, the plugin will generate files in the directory relative to the app root. functionsDir ./serverless/edge configures how Netlify redirects should be handled — since we’re not running on Netlify, we set this to false to skip generating a file. redirects netlify.toml Lastly, in the configuration object we return to Eleventy, we specify an input dir for our content to keep things tidy. We’ll also go ahead and move the file we created earlier in the src directory. index.liquid Next, let's build again by running , and investigating what gets output under . npx @11ty/eleventy ./serverless/edge You should see the following: A number of js and json files starting with . Some are configuration files, and some are built to inform the Netlify bundler of function dependencies — we won’t need those for Lambda. eleventy- , a copy of the main configuration file in the app root. eleventy.config.js The directory with the template. src index.liquid An file with the actual serverless handler code that we’ll update and deploy to Lambda. index.js Let’s gitignore the build artifacts that we don’t want in our repo and only keep the file for now. index.js Add this to your file: .gitignore serverless/edge/**
!serverless/edge/index.js Good, we’re now ready to create our first dynamically generated page. Let’s make another simple Liquid file for it under : src/edge.liquid ---
permalink:
  edge: /hello/
---
<h1>Hello@Edge</h1> You’ll notice that for this file, we’ve added some to the liquid template. front matter data Specifically, we’ve defined a permalink for our page to respond to when running under the edge plugin. Eleventy won’t generate an page when building — this page will only be generated by invoking the serverless handler code. edge.html Making things Lambda-compatible Let’s now look at what’s going on with . This is only generated with the initial build, so we’re free to modify it — and we’ll definitely need to in order to support Lambda@Edge. serverless/edge/index.js First, we can remove the , as that’s only needed for the Netlify bundle process; require("./eleventy-bundler-modules.js") Next, we’ll need to get a reference to the current request path and query, as Eleventy needs that info to know what content to generate. With Netlify, you get these via , , and . With Lambda@Edge, we’ll be getting events generated by CloudFront on origin requests — see . We’ll also use querystring to handle parsing the query string. event.rawUrl event.multiValueQueryString event.queryStringParameters an example in the AWS docs Let’s update the code to this: const { request } = event.Records[0].cf; 
const path = ${request.uri}${request.uri.endsWith("/") ? "" : "/"}; 
const query = querystring.parse(request.querystring);
let elev = new EleventyServerless("edge", { path, query, functionsDir: "./", }); Finally, we need to update the handler’s returned objects to match the format expected by . Lambda@Edge Update the success & error responses status and headers to: { status: "200", headers: { "cache-control": [ { key: "Cache-Control", value: "max-age=0", }, ], "content-type": [ { key: "Content-Type", value: "text/html; charset=UTF-8", }, ], }, body: ... } We’ve also added a header to configure how CloudFront caches the returned results. We can get more thoughtful about this when moving to production, but for now, we’ll go with no caching. Cache-Control One last thing: we’ll want to separate build dependencies from edge handling dependencies, so let’s create a separate file in , and install as a prod dependency. package.json serverless/edge @11ty/edge As our edge function grows, we’ll add more things here, like database clients. Here’s our full handler code, for reference: Testing it out locally Good, let’s test this out locally before we deploy! It should be pretty easy to simulate sending an event to our handler function. Let’s create a simple file: test.js const { handler } = require('.');

(async () => {
  const response = await handler({Records: [{cf: {request: {uri: "/hello/", querystring: ""}}}]});

  console.log(response);
})(); Running in the console, you should see: node test.js {
  status: '200',
  headers: { 'cache-control': [ [Object] ], 'content-type': [ [Object] ] },
  body: '<h1>Hello</h1>'
} Take a moment to celebrate! You’ve just triggered your first Eleventy build in a serverless function. 🎊 Deploying to AWS Things look good — it’s now time to deploy this to AWS. To handle the deployment, we’ll be using Serverless. No, not the Eleventy Serverless plugin, but Serverless, the “ ” command-line tool. zero-friction development tooling for auto-scaling apps on AWS Lambda If you don’t have it installed, . run npm install -g serverless Then create a file to configure the deploy: serverless/edge/serverless.yml This will instantiate a CloudFront distribution connected to the bucket you specified under . Any calls to URLs matching the pathPattern will be forwarded to the serverless handler instead of being routed to the bucket. events>cloudfront>origin Fun fact: Lambda@Edge functions log console output to their regional CloudWatch. That is, if a user in Germany accesses your pages via the edge at , you’ll see logs for that specific run under the region and nowhere else. In the yml config, we make sure to give our function proper permissions to write log groups anywhere. eu-frankfurt-1 eu-frankfurt-1 We should also add an exception for the config file to — we want this in the repo. .gitignore If you already have a CloudFront distribution that you want to connect to your new serverless function, check out the plugin. serverless-lambda-edge-pre-existing-cloudfront We’re ready to deploy! Make sure you export AWS credentials for an IAM user with proper permissions for deploying the entire stack. When moving to production, for security purposes, you should create a dedicated user with the minimal set of permissions required — however, I haven’t been able to find a comprehensive list of such permissions, so this will likely be a tedious trial-and-error process of figuring them out by trying deploys and seeing what fails. While still in development, an admin user might be easier to use. Run to deploy. If all goes well, in a couple of minutes, you should see the URL to your new CloudFront distribution! sls deploy --stage prod Your settings will need to propagate globally though, so it might take a few more minutes for everything to be ready. You can check the current status of your distribution under the AWS console dashboard. Once it’s done deploying, navigating to in a browser should display our “ ” HTML header from the template. CF_URL/hello Hello@Edge edge.liquid We did it! 🙌 Bonus: making it dynamic Now let’s quickly make our serverless function actually do something async. Let’s have it accept a URL parameter that’s the name of a Pokémon, and respond with an image of said cute beast. We’ll use to get the image. https://pokeapi.co/ We could do the async work outside of eleventy, and then inject some global data like this: const eleventy = new EleventyServerless('serverless', {
  path,
  query,
  functionsDir: './',
  config: (config) => {
    config.addGlobalData('data', yourData);
  },
}); Or, better yet, starting with Eleventy 2.0.0, we can use . async filters Let’s first update our template to include the new HTML we want: edge.liquid ---
permalink:
  edge:
    - /hello/
    - /hello/:name/
---
<h1>Hello@Edge \{\{ eleventy.serverless.path.name }}</h1>
{% if eleventy.serverless.path.name %}
  <img src="\{\{ eleventy.serverless.path.name | escape | pokeimage }}" />
{% endif %} We’ve added a new that includes a name path parameter. That will become available in the data cascade as . permalink eleventy.serverless.path.name We’re transforming this param via two filters: and . Remember, user input should be treated as potentially malicious 😉. name escape pokeimage We need to define our filter. This is where the async magic happens. Add this to your file: pokeimage .eleventy.js eleventyConfig.addAsyncFilter("pokeimage", async function(name) { 
const results = await fetch(https://pokeapi.co/api/v2/pokemon/${name}); 
const json = await results.json();
return json.sprites.front_default;
}); We’re relying on the node’s built-in API here — it’s a good thing we’ve set in our file. fetch runtime: nodejs18.x serverless.yml Let’s update our file to query the URL, and run again. test.js /hello/ditto/ node test.js In the console output, you should now see: {
  status: '200',
  headers: { 'cache-control': [ [Object] ], 'content-type': [ [Object] ] },
  body: '<h1>Hello@Edge ditto</h1>\n' +
    '\n' +
    '  <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png" />\n'
} One last to get this deployed, and done! You’ve mastered setting up Eleventy Serverless on Lambda@Edge. sls deploy --stage prod All of Sandworm’s npm package report pages are generated using Eleventy Serverless and Lambda@Edge.

Running Eleventy Serverless On AWS Lambda@Edge

Python for Data Science: How to Scrape Website Data via the Internet's Top 300 APIs

2019 in Frontend Development: JS, TS, React, Vue & More

In this tutorial, we’ll create an Ethereum Dapp and will run its different components in a separate docker container. You can clone the project using this . GitHub link Thanks to the people who’s article and courses helped a lot: For HTML and CSS ( ) Brandon Morelli Build a Weather Website For and course on Udemy. Stephen Grider Ethereum Docker Before beginning lets understand what we’re going to build and how the structure of our Dapp will look like. In the Dapp there will be three modules: ganache-cli Ethereum-Dapp and Server Client (React App) The above 3 modules will run in individual docker containers. D app Why we’re building individual container for each service when they all can be build in one container? Yeah, all can be build in one container and everything will be straight forward. Just for some fun, we’re using different containers. Project Setup Create a project folder and give it the name . “docker-ethereum” Directory Structure docker-ethereum
- client
- ethereum
- server
- .dockerignore
- docker-compose.yml
- Dockerfile
- Dockerfile.ganache
- package.json package.json Create a package.json and paste the below code: <a href="https://medium.com/media/e3cd81e218a11fa85b4edd61c180ad05/href">https://medium.com/media/e3cd81e218a11fa85b4edd61c180ad05/href</a> We have finished installing the dependencies for the project. To build any application our network should be ready. So, let’s first start with our ganache-cli as the network. 1. ganache-cli It is a test network which comes with 10 accounts with 100 ethers each. It is best for development where you don’t have to wait for the transactions to mine. is a personal blockchain for Ethereum development you can use to deploy contracts, develop your applications, and run tests. Ganache In our application ganache-cli will run in a docker container. Inside the project directory, create a Dockerfile.ganache . In this Dockerfile, we’ll write all the instructions to set up and run the ganache-cli inside the container. <a href="https://medium.com/media/46b4b595e1b9f82f4fdce1f3cace95a3/href">https://medium.com/media/46b4b595e1b9f82f4fdce1f3cace95a3/href</a> On line 2, to build this ganache-cli image, we’re taking node:alpine as a base image. On line 5, we’re setting /app folder as the working directory of the image where all our instructions will run. On line 8, we’re installing globally. ganache-cli On line 12, we’re setting ganache-cli -h 0.0.0.0 as the default command of the image. Ganache-cli’s default host is 127.0.0.1 but for docker instance it is 0.0.0.0 I have explained all the above instructions in detail in . Please check it, if you find any difficulty here. my last post Our network is configured. 2. Ethereum Dapp and Server Ethereum Dapp Create a Ethereumfolder in the project directory. Directory Structure Ethereum
- build
- contracts
  - Message.sol
- compile.js
- deploy.js
- logic.js
- receipt-ganache.json
- web3.js Inside the Ethereum directory: contracts Create a new folder contractsand a new file Message.sol in the contracts folder and paste the below code. <a href="https://medium.com/media/bc4614c23d99c5efcb6ad7d99ea74f25/href">https://medium.com/media/bc4614c23d99c5efcb6ad7d99ea74f25/href</a> We’re creating a simple message contract. There will be 3 functions in this smart contract (1) constructor (2) setMessage (3) getMessage In the Message smart contract when it will run for the first time, that time the constructorwill set the message as the initial message. The setMessage function will set a new message. The getMessage is a view function and it’ll return the value of the message variable which was set either by constructor or setMessage . compile.js Create a new file compile.js and paste the below code in it. This will compile the Message.solsmart contract and save the compiled contract in the build folder as Message.json . <a href="https://medium.com/media/3044fa9a6e067617f8cfaec09be7e3bb/href">https://medium.com/media/3044fa9a6e067617f8cfaec09be7e3bb/href</a> web3.js Create a web3.js file which will work as a bridge between the application and the ethereum network. web3.js is a collection of libraries which allow you to interact with a local or remote Ethereum node, using an HTTP, WebSocket or IPC connection. web3.js can be used in 2 ways, (1) server-side web3js: transaction signed on the server side (2) client-side web3js: transaction signed on the browser side. In this web3js invoked by third-party like Mist or Metamask. In the client-side web3js invoked in the html pages. For this project, we’re using server-side web3js. Copy and paste the below code to the web3.js <a href="https://medium.com/media/85604d42fc68c84a481f8b4ad6e36ed6/href">https://medium.com/media/85604d42fc68c84a481f8b4ad6e36ed6/href</a> Take note of web3 provider http://ganache:8545 . Here, is the name of the container in which ganache-cli is running. ganache deploy.js Create a deploy.js file and paste the below code in it. It will take the compiled contract Message.json and deploy the contract to the network. <a href="https://medium.com/media/1ebc43427e3e79225e222401d09770d3/href">https://medium.com/media/1ebc43427e3e79225e222401d09770d3/href</a> From the web3.js file, deploy.js import the web3 instance of ganache-cli and web3network as ganache . logic.js Create a new file logic.js and paste the below code in it. It consists of all the logic to interact with the deployed Message contract on the network. <a href="https://medium.com/media/60c70758f9a83461714948a860cbf466/href">https://medium.com/media/60c70758f9a83461714948a860cbf466/href</a> There are 3 functions inside the logic.js getContractObject it will return the contract object/instance which was deployed on the network using deploy.js . This object will then call the smart contract. setMessage it requires 1 string argument and set this as a message to the message variable in the smart contract. getMessage will return the message set either by constructor or setMessage The ethereum module is complete. Now, server needs to be set up which will call the ethereum module. server Create a server folder in the project directory. Directory Structure server
- routes
  - contract-API.js
  - smart-contract-API.js
- index.js routes Create a routes folder inside the server folder. contract-API.js Create a contract-API.js file and paste the below the code. <a href="https://medium.com/media/774480db68cc91a1bd11d0b4a74fdca4/href">https://medium.com/media/774480db68cc91a1bd11d0b4a74fdca4/href</a> To compile and deploy the contract we have created APIs instead of manually compiling and deploying it on the network. If you remember, our Message smart contract’s constructor requires an initial message. To keep it simple, by default we’re setting initial message as Hello World! . You can change it in the deploy router. smart-contract-API.js Create a smart-contract-API.js and paste the below code. <a href="https://medium.com/media/28a9e9c3b3d4af2dcf107a7d6ad4bc4f/href">https://medium.com/media/28a9e9c3b3d4af2dcf107a7d6ad4bc4f/href</a> smart-contract-API.js routers will call setMessage and getMessage from logic.js index.js Create a index.js file in theserver folder and paste the below code. <a href="https://medium.com/media/2e7d393aace24fd23deb729c3fd5a15d/href">https://medium.com/media/2e7d393aace24fd23deb729c3fd5a15d/href</a> This is the server for ethereum dapp. At the top, we’re importing routes contract-API.js and smart-contract-API.js . The server is listening at the port 4000 . The server module is complete here. Let’s dockerize it. Dockerfile Create a Dockerfile in the root project directory and paste the below code. <a href="https://medium.com/media/cd336a0c89a418a89c4502083fa1ae23/href">https://medium.com/media/cd336a0c89a418a89c4502083fa1ae23/href</a> The docker image will create according to Dockerfile. node:alpine To create an image we require a base image which comes with some pre-requisite software. Our server and ethereum are dependent on node that’s why we are using node:alpine as a base image. alpine in short, is the minimum required libraries to run a node application. WORKDIR /app setting /app directory of base image as the working directory. Line 8 & 9 Installing the pre-requisite software for the ethereum dapp like python is required to install the web3 library. COPY ./package.json . Copy package.jsonin /app directory RUN npm install Install the dependencies mentioned in package.json COPY . . Copy the complete root directory and paste in the /app directory CMD ["npm","start"] set the default command If you noticed we are copying the complete root directory which includes node_modules . This will make the image large and it makes no sense as we’re installing it from the copied package.json inside the image. To ignore the files or folders while building the docker image just like the .gitignore in docker there is .dockerignore file. .dockerignore Create a .dockerignore file and paste the below code. node_modules/

client/ It will ignore the node_modules and client directory which we’ll create in the next section. If we don’t ignore the client directory then it will copy the client application too. Now, we can move to our last module React application the client . 3. Client (React Application) For the react application, we’re using create-react-app tool for the Dapp. Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. — treehouse Installing Create React App We need to install the create-react-appglobally. Open your Terminal or console and run: npm install -g create-react-app From the project directory, open the terminal or console to create the react app by name client and run the below command. create-react-app client Directory Structure client 
- public
  - favicon.ico
  - index.html
  - manifest.json
- src
  - App.css
  - App.js
  - App.test.js
  - index.css
  - index.js
  - logo.svg
  - message.js
  - serviceWorker.js
- .dockerignore
- Dockerfile
- package-lock.json
- package.json
- README.md Once the client is created you will see a folder structure like above except message.js inside the src ,Dockerfile and .dockerignore. For more information on react please follow the below links: https://facebook.github.io/create-react-app/docs/getting-started https://blog.teamtreehouse.com/getting-started-create-react-app-tool index.html Open index.html from the public folder and change the title to Message App . Add the below link in the <head> tag. This is the fonts which are used in the application. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> App.css Open the App.css from the src folder and paste the below css which is used in the application. /*

Styles from this codepen:

https://codepen.io/official_naveen/pen/rgknI

*/

body {

width: 800px;

margin: 0 auto;

font-family: 'Open Sans', sans-serif;

}

.container {

width: 600px;

margin: 0 auto;

}

fieldset {

display: block;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-before: 0em;

-webkit-padding-start: 0em;

-webkit-padding-end: 0em;

-webkit-padding-after: 0em;

border: 0px;

border-image-source: initial;

border-image-slice: initial;

border-image-width: initial;

border-image-outset: initial;

border-image-repeat: initial;

min-width: -webkit-min-content;

padding: 30px;

}

.ghost-input, p {

display: block;

font-weight:300;

width: 100%;

font-size: 25px;

border:0px;

outline: none;

width: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

color: #4b545f;

background: #fff;

font-family: Open Sans,Verdana;

padding: 10px 15px;

margin: 30px 0px;

-webkit-transition: all 0.1s ease-in-out;

-moz-transition: all 0.1s ease-in-out;

-ms-transition: all 0.1s ease-in-out;

-o-transition: all 0.1s ease-in-out;

transition: all 0.1s ease-in-out;

}

.ghost-input:focus {

border-bottom:1px solid #ddd;

}

.ghost-button {

background-color: transparent;

border:2px solid #ddd;

padding:10px 30px;

width: 100%;

min-width: 350px;

-webkit-transition: all 0.1s ease-in-out;

-moz-transition: all 0.1s ease-in-out;

-ms-transition: all 0.1s ease-in-out;

-o-transition: all 0.1s ease-in-out;

transition: all 0.1s ease-in-out;

}

.ghost-button:hover {

border:2px solid #515151;

}

p {

color: #E64A19;

} message.js Create a message.js in the src folder and paste the below code. This is the file which will work as the front-end of the application. Note: I am not good at React so I can just give details of methods which are used in it. <a href="https://medium.com/media/eea7ce6cd76d3183074fdd8dbf375a09/href">https://medium.com/media/eea7ce6cd76d3183074fdd8dbf375a09/href</a> A component is the building block of any react app. To create a component it requires Component module from reactthe library. The endpoint is set to http://localhost:4000 as the server is running at 4000 port. To make any request to the server axios library is used. To learn more about it follow this . link Open the terminal from the client directory and run the below command: npm install axios --save We have created a Message component by extending the Component and at the bottom exported the Message . There are 2 states in the Message component message and output . States are the data which defines and control the behaviour of the component. Learn more about states in this . link The messagestate will store the message entered in the form and this state will use as an argument to send the POST request to localhost:4000/ to setMessage. The output state will store the response from the server and display it. Following methods are used in message.js : onChange set the message state according to the entered input onsubmitcompile send the request to localhost:4000/compile to compile the smart contract onsubmitdeploy send the request to localhost:4000/deploy to deploy the smart contract onsubmitsetmsg send the request to localhost:4000/ with message state as an argument to set the message to the smart contract onsubmitgetmsg send the request to localhost:4000/ to get the message from the smart contract App.js Open the App.js from src folder and paste the below code. The application’s Route set at / . On this route, it will serve the message.js component. <a href="https://medium.com/media/4d489bc95c57bffc11bfe025a93fd549/href">https://medium.com/media/4d489bc95c57bffc11bfe025a93fd549/href</a> To create the route react-router-dom library is used. Open the terminal from client directory and run the below command: npm install react-router-dom --save Dockerfile With this Dockerfile our client module will complete. In this Dockerfile we will write the instruction to create the image of the react application. Create a Dockerfile in the client directory and paste the below code. <a href="https://medium.com/media/1c71fcdbd391a1c90f72a679f64f50d4/href">https://medium.com/media/1c71fcdbd391a1c90f72a679f64f50d4/href</a> All the commands are self-explanatory. According to this Dockerfile, a docker image will build. The client (react-app) will run inside the container using this image. The COPY command is copying the node_modules too. Create a .dockerignore . .dockerignore Create a .dockerignore file in the client directory and paste the below code. node_modules/ Our client module is also finished. Everything is set. Now, the last thing we have to do, build these docker images and run them as individual containers. docker-compose.yml Create a docker-compose.yml in the root project directory and paste the below code. <a href="https://medium.com/media/2047ab75234fe012e342c2eb0b9334f5/href">https://medium.com/media/2047ab75234fe012e342c2eb0b9334f5/href</a> You might be thinking about why we even need docker-compose.yml . It just makes the application bit smooth. How? Compose is a tool for defining and running multi-container Docker applications. We have created 3 Dockerfile for the 3 modules of the application. If we don’t use the docker-compose.yml then we have to separately build the 3 images and then run them separately in 3 different terminals. So, that’s a drag. In docker-compose.yml we can define all the containers’ configuration and all can be run with a single command. version the version of a docker-compose file services all the containers’ definition. There are 3 services/containers: 1. ganache ganache is the name of the container build where to find the Dockerfile to build. If we don’t give the name of Dockerfile then by default it builds the Dockerfile . For ganache we have created Dockerfile.ganache . Its syntax will be a little different. Under the build there is context it is a path of Dockerfile and dockerfile name of the Dockerfile . ports A container is isolated from outside which means whatever request we will try to make from the outside of the container it will not respond. That’s why we set the ports which maps the outside’s port to container’s port. Here we mapped port8545 to 8545if we make any request from outside to 8545 it will send the request to the container at 8545 . 2. dapp dapp is the name of the container. build find the Dockerfile in current directory . ports map the ports at 4000:4000 depends_on start after the ganache 3. react react is the name of the container build find the Dockerfile in client directory ports map the ports at 3000:3000 depends_on start after the dapp To learn more about docker-compose.yml follow this . link So, the hard part is over. Now, the fun part let’s run the application. Open the terminal from the root project directory and run the below command: docker-compose up --build It will check for docker-compose.yml file in the current directory and will run it. For the first time, it will take some time so have patience. Once everything is running, open the browser and go to localhost:3000 you’ll see the react application running. localhost:3000 You’ll see the message as compiled successfully. Compile Contract: compile contract It will send back the address of the contract at which it is deployed. Deploy contract: deploy contract Note: After compile or deploy command wait for a couple of seconds before running any other commands as both commands restart the server. Why? On compile, it saves the compiled contract in build, if the server doesn’t restart then it will use the last compiled contract to deploy the contract. On deploy, it saves the receipt in which deployed contract address is saved, if the server doesn’t restart, it will interact with the last deployed contract as the server is still using the last deployed contract’s address. If you remember we set the initial message as Hello World! Get Message: Hello World! Set the message and it’ll return the transaction hash of the transaction. I set the message as and is the transaction hash. Set Message: “Docker Ethereum Dapp” “ 0x464385a1914b0d8ffb48d660aa55d419f0afe040e0def20ff581338bbce545e2” Set Message Check the message using “Get Message” Get Message We successfully created the Ethereum Dapp with React and Docker. You don’t have to build the docker-compose.yml every time. Next time you just have to run the below command to run the application. docker-compose up You can clone the complete project from the . GitHub link Hope you like the tutorial. Please comment for any improvement in the article. Please clap and share if you learn something interesting. <a href="https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href">https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href</a>

Create an Ethereum Dapp with React and Docker

The original reasoning for the move was purely cost related, however the performance improvement was huge. Our company decided to officialy move into the “Cockroach Age”, and by that it sadly meant moving a lot of our server-side implementation out of Heroku. Heroku made things simple, that’s for sure, but we had a ton of Amazon credits and were feeling a bit taken advantage of by paying more and getting less all for pure laziness. I can’t say it was easy. I literally looked at dozens of articles, all providing partial information or outdated/wrong information. I was thinking to myself “this is weird, why is there no simple and clear guide to tell us small and poor startups how to move away from Heroku”. So after a lot of guides, stack overflow error solving, AWS architect 1 on 1, and some sheer frustration on the brink of giving up, I am here providing you a full guide on how to do this scary move. 1. Elastic Beanstalk (EB) Most of us have already used or are aware of EC2 instances, but when using a dedicated EC2 instance for an entire backend, it becomes harder to scale when workloads change. Therefore I chose to use Elastic Beanstalk, which is an easy to use service for deploying and scaling web applications, and moreover it is free. Here is how to set it up for Flask ( : I use the EB CLI interface, so you will need to download it prior: http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3-install.html ) Go to the folder where your project lies In the command line type: eb init Choose your region, create a new application, enter its name, and select its platform (Python in our case). Choose the version (most likely 2.7), say yes to setting up SSH, and either select an existing key pair you already had set up in AWS or create a new one. Now we have finished setting up the directory for EB, and we can create our running environment. Type in the command line: eb create Congrats! you have just created your first EB environment. EB has now created an EC2 instance and attached a storage volume to it. You can now go into your AWS EB dashboard and see your newly made environment. EB is pretty smart, and as you see it was simple to set up. It zips and uploads your folder to AWS, and constructs the server based on its knowledge of Python environments. It will look at your requirements.txt file to know what libraries to download, and will try to find your WSGI configuration to start up the server. You can go into the configuration tab and change its scaling and networking. You can also see the enviroment’s health in the dashboard or fetch logs if you need to have more intel of what’s going on. Of course my execution brought with it a handful of errors, and the key thing to focus on is a creature they call “.ebextensions”. This is a folder you need to add to your project which consists of .config files. These files basically allow you to configure your environment while it is being set up. #my example.configpackages:yum:git: []libffi-devel: []libjpeg-turbo-devel: [] container_commands:01_wsgipass:command: 'echo "WSGIPassAuthorization On" >> ../wsgi.conf'AddGlobalWSGIGroupAccess:command: "if ! grep -q 'WSGIApplicationGroup %{GLOBAL}' ../wsgi.conf ; then echo 'WSGIApplicationGroup %{GLOBAL}' >> ../wsgi.conf; fi;" option_settings:"aws:elasticbeanstalk:container:python":WSGIPath: application.pyNumProcesses: 3NumThreads: 20"aws:elasticbeanstalk:application:environment":EXAMPLE_ENV_VAR: env_var_value In my case I was using the command to install some cryptography libraries and git on the machine. I used to add all my environment variables. Most importantly I had a few WSGI issues I needed to fix. WSGIPath to tell EB what file to launch my app from. to allow basic HTTP authentication headers to not be truncated when passed to the server, and due to issues I had related to this article: yum aws:elasticbeanstalk:application:environment 01_wsgipass AddGlobalWSGIGroupAccess http://djm.io/deploying-scipy-into-aws-elastic-beanstalk/ Alright! now after you have added your .ebextensions folder, just go back to the CLI and issue the command , and that basically re-deploys your server with the new changes. eb deploy 2. Workers We had a few more things to figure out, as we also had a worker process running our longer tasks, or tasks we didn’t want to have block our server. We used a Redis Queue and a separate dyno on Heroku to produce our current worker configuration. Luckily, Elastic Beanstalk also comes with a Worker environment that is pretty simple to set up. What you need to do is follow the same steps as setting up the web environment, only this time choose the existing application you have created and when prompted choose to create a worker environment. The worker environment will prompt you about an SQS creation, which we will talk about now. The way worker environments work in EB is by communicating with the web env using SQS. SQS is basically a simple queue service that you can send information to. In this case, our web env can send a message to the SQS queue and the worker thread has a daemon installed that listens to that queue and fetches the message when it arrives, does what is needed and returns a 200 (ok) status back. If it doesn’t return a 200, the message gets sent to a dead queue which can then be used if these failed requests need to be re-issued. What needs to be set up to make this work: Install (AWS SDK for Python) on your flask backend and create a method that sends an SQS message to the desired queue that was set up for the worker env . In my case, I sent an SQS message consisting of two parameters, a function name, and an argument list. boto (you will probably need to set up the proper AWS permissions for your server to allow you to send SQS messages) def send_message_to_sqs( ):# Put the message in the queuem = boto.sqs.message.RawMessage()m.set_body(json.dumps( ))status = q.write(m)print status data data send_message_to_sqs({'func':'save_to_s3_and_update_user', 'args':{'user_id':str(usr.id)}}) b. Have an endpoint in your worker env for it to have the SQS messages be sent to. You configure the endpoint name in the Worker env configuration. c. The method of that endpoint in my worker env basically looked at the incoming message, based on the function name understood what function to call, and gave it the argument list. At the end if everything was successful, it just returned a 200 (ok) status. Here is an example and Amazon provides as an example. web environment worker environment If you were able to reach this point, you most likely now have configured a basic Elastic Beanstalk web app with a worker thread that interacts with it. Hurray! 3. MongoDB We used one of the Heroku add-ons (mLab) for our MongoDB database. It makes things super simple, and they offer you full support, do the setting up, and maintain the database for you. However, we decided to give AWS a fair chance with this as well. This is a pretty long and elaborate guide, so I am just going to link you to the best guide I found on this: _EC2 instances can be configured with either ephemeral storage or persistent storage using the Elastic Block Store (EBS…_docs.mongodb.org Amazon EC2 Just a few pointers if you are having trouble or receiving errors (like we did): Make sure you have a security group that opens ports 22 and 27017. You will need to SSH to your machine so you need port 22, and 27017 is for your MongoDB connection. Edit /etc/mongod.conf and look for . If it is pointing to the localhost, you won’t be able to access it from an outside ip. Either give it the ip of the machine that needs to access it, or comment out that command entirely. bind_ip Make sure you add a user (or the right role that fits your needs) to your MongoDB users for the database you are interacting with. You do this by connecting to your mongo shell (SSHing then typing or doing a remote command from your local machine), and then issuing a command. The role I gave my new user is: dbOwner mongo mongo db.createUser() “roles” : [ {“role” : “dbOwner”, “db” : “my_database_name”} ] If you connect to your database without any user, you might be in read-only mode. Make sure you are connecting to the database with the right username and password on your flask backend. 4. Add-ons Heroku had a lot of neat add ons, specifically in my case I found a lot of use for the UI logging, and periodic database backups. No one said you can’t do that on EB too! Papertrail for logging _AWS Elastic Beanstalk is an easy way to quickly deploy and manage applications in the Amazon Web Services cloud…_help.papertrailapp.com AWS Elastic Beanstalk Basically as simple as adding another config file to your .ebextensions and configuring it properly :) Periodic backups for your MongoDB _node-mongodb-s3-backup - A node.js package that makes syncing a MongoDB database to S3 simple._github.com theycallmeswift/node-mongodb-s3-backup Simple and easy to use Node package that backups your database to S3 every day. Final Words I hope this guide was able to help you on journey of moving from Heroku to AWS, or at least showed you my personal tackling of it. Since our move, we are definitely more cost effective, have better response times for our app, and are pretty satisfied :) your is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

ABE Global

abe.io

-- employees

Since n.d.

COMPANY RANKING

ABE Global

EVERGREEN INDEX #574

See more notable links about ABE Global

Apply to get your Tech Company News Page live on HackerNoon.com today!

Read More Tech Stories Related to #ABE Global

ABE Global

ABE Global

abe.io

-- employees

Since n.d.

COMPANY RANKING

ABE Global

EVERGREEN INDEX #574

Related CompaniesRank

ABE Global Story MentionsComplete List

See more notable links about ABE Global

Apply to get your Tech Company News Page live on HackerNoon.com today!

Read More Tech Stories Related to #ABE Global

ABE Global