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

NovoSource

novosource

[108 Pages Report] Global Sulphur Fungicides Market report is a comprehensive analysis of the industry, market, and key players. The report has covered the market by demand and supply-side by ...

Sulphur Fungicides Market's Growth Potential & Predicted Landscape from 2023 to 2031

The top three suppliers remained unchanged from the previous year, with NovaSource leading, followed by SOLV Energy, and Spain's Solarig in third place. Across the portfolios analyzed by Wood ...

US solar O&M contract prices averaged $7.90/kW in 2022, says WoodMac

Previously a division of NovaSource Power Services, Heliolytics brings a suite of robust solar inspection diagnostic and analytic capabilities to further Zeitview’s advanced energy and ...

Zeitview Acquires Heliolytics, Becoming the Market Leader in Solar Aerial Inspections

How We Enhanced Remotion Performance through GPU-Accelerated Server-Side Rendering Running with hardware acceleration in headless mode can be more challenging than it appears. We embarked on this journey with , which is an excellent framework that enables developers to "Make Videos Programmatically.” On our way, explore various Nvidia driver versions, including those from Nvidia's website and Ubuntu's official repositories. Google Chrome Remotion We collaborated with the vibrant Open-source community to find the answer for using . After encountering some setbacks on our way, we were able to make it work for Remotion eventually. We consolidated our findings in the Remotion Docs at and simplified the instructions for Remotion developers to make the most out of it. Although the whole research was done for , the same process will work for any headless application that requires GPU power, especially in headless mode. Remotion GPU with Remotion for server-side rendering Using the GPU in the Cloud Remotion Hardware Acceleration in Browser Rendering Hardware Acceleration is to your browser what " " is for a gasoline car. It uses the power of specialized hardware like GPUs to make your web pages load faster, and videos play smoothly. Hardware acceleration improves the part where the web page is displayed and shown to you, known as rendering. This results in a smoother and snappier browsing experience. Nitrogen Fuel DLAMI from Marketplace? One may wonder why we didn't opt for the AWS Deep Learning AMI or DLAMI. But we needed fine-grained control over the GPU drivers and utilities and the outdated DLAMIs despite all the bloatware was not the answer. Such tasks are often challenging to achieve with pre-packaged AMIs, as discussed in " .” Tailoring the environment to our exact requirements also helped us troubleshoot issues effectively. Why Deep Learning AMI is Holding You Back We experimented with multiple packages to identify the key ones needed for Google Chrome to recognize the GPU. Despite these efforts, GPU recognition remained elusive, and in some instances, GPU drivers were crashing even at initialization. The long and arduous journey has brought us to the end of the tunnel, yet the darkness persists, and the solution remains as elusive as ever. As we decided to call it a day, We stumbled upon on 's Github issues, which did not give us any hope but did give us a new perspective and drive to achieve our goal. this thread Puppeteer The Fresh Start It was time to return to the drawing board and start afresh. We started with a clean base Ubuntu AMI on AWS EC2 Instance. After that, we downloaded and installed the Nvidia Tesla T4G drivers from Nvidia's official website. Once it was confirmed that the GPU was working properly using , we installed Google Chrome and tested it for hardware acceleration. To our relief, Google Chrome finally gave a nod to work with Hardware Acceleration. nvidia-smi Launching an EC2 Instance Launching an EC2 instance can be achieved in various ways, with the AWS Web Console and AWS CLI being two notable options. Regardless of the method, the important parameters are instance type and AMI selection. At the time of writing, the AMI ID for our chosen instance is . For launching the EC2 instance via , the following command can be used after replacing the placeholders with actual values. g4dn.xlarge ami-053b0d53c279acc90 aws-cli aws ec2 run-instances \
  --instance-initiated-shutdown-behavior "terminate" \
  --image-id "ami-053b0d53c279acc90" \
  --instance-type "g4dn.xlarge" \
  --key-name "<KEY_NAME>" \
  --subnet-id "<SUBNET_ID>" \
  --security-group-ids "<SECURITY_GROUP_ID>" \
  --iam-instance-profile Arn="<ARN>" \
  --block-device-mappings '[
  {
    "DeviceName": "/dev/sda1",
    "Ebs": {
      "VolumeSize": 8,
      "VolumeType": "gp3"
    }
  }
]' Ubuntu and Kernel Upgrade Ubuntu 22.04 AMI on AWS comes with Linux Kernel (specifically ). At this point, we have two options either we stick with Kernel or Upgrade to ( ), we decided to upgrade the Kernel. This decision is crucial as the Nvidia driver compiled for one version will not work for the other. ami-053b0d53c279acc90 v5 5.19.0-1025-aws v5 v6 v6.2.0-1013-aws After launching the instance, SSH into the instance and initiate the Ubuntu packages upgrade process. To update all the installed packages, including Linux Kernel, execute the following one-liner. sudo bash -c "apt update && export DEBIAN_FRONTEND=noninteractive && export NEEDRESTART_MODE=a && apt upgrade -y && reboot" We can also split , and . But the reason behind doing it like this is to install these updates in non-interactive mode. apt update apt upgrade -y reboot After the execution, the system will reboot with Linux Kernel Version 6. We can confirm the kernel update with . Rebooting is essential when upgrading the Ubuntu system because it loads the new Kernel on the next boot, and Nvidia drivers will subsequently be built for the updated version. uname -r Nvidia GPU Driver Installation The process of installing GPU drivers is straightforward when we have the correct driver for the GPU and the corresponding compatible version. Before starting the installation, we need to install a couple of packages: and . The former is a bundle with a variety of compilation tools required to compile the Nvidia driver. The latter, while not mandatory, is required by Google Chrome. Therefore, it's a good idea to install it beforehand to enable support for Vulkan ICD loader for Nvidia, should we require it in the future. build-essential libvulkan1 sudo apt install -y build-essential libvulkan1 After build tools are installed, we can proceed to download and install the GPU drivers using the following commands: DRIVER_URL="https://us.download.nvidia.com/tesla/535.104.12/NVIDIA-Linux-x86_64-535.104.12.run"
DRIVER_NAME="NVIDIA-Linux-driver.run"
wget -O "$DRIVER_NAME" "$DRIVER_URL"
sudo sh "$DRIVER_NAME" --disable-nouveau --silent
rm "$DRIVER_NAME" Now we can run to confirm the GPU driver installation. The output will look similar to this: nvidia-smi Configuring the Startup Service We learned this the hard way: running once is needed for the proper initialization of and . Google Chrome and Chromium fail to initialize without this preliminary setup. To automate this process, we will create a service that runs at boot time using the following commands: nvidia-smi EGL ANGLE EGL nvidia-smi echo '[Unit]
Description=Run nvidia-smi at system startup

[Service]
ExecStart=/usr/bin/nvidia-smi
Type=oneshot
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target' | sudo tee /etc/systemd/system/nvidia-smi.service
sudo systemctl enable nvidia-smi.service
sudo systemctl start nvidia-smi.service Testing the Installation To test hardware acceleration with Google Chrome or Chromium, we can follow these steps. It's worth noting that Google Chrome has more dependencies, making it an easier choice if we plan to use the Node.js library, Puppeteer. On the other hand, Chromium is a lightweight option with a smaller footprint of dependencies, but we can still use Puppeteer with Chromium by installing a few extra dependencies. Installing Chromium Installation Installing Chromium is straightforward, as it is readily available with Ubuntu's official software repositories. We can install it using with the following command. apt sudo apt install -y chromium-browser Testing Chromium is fully prepared to handle Hardware Acceleration tasks. We can verify its readiness by launching Chromium with the specified parameters. chromium-browser --headless --use-gl=angle \
   --use-angle=gl-egl --use-cmd-decoder=passthrough \
   --print-to-pdf=output.pdf 'chrome://gpu' Installing Puppeteer Dependencies To use Puppeteer with Chromium instead of Google Chrome, there are a few extra dependencies that should be installed. sudo apt install ca-certificates fonts-liberation \
    libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 \
    libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 \
    libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 \
    libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 \
    libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
    libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
    libxtst6 lsb-release wget xdg-utils Installing Google Chrome Installation Google Chrome can be installed from multiple options, but we will use the Google Chrome official repository for Debian. We need to add it to Ubuntu's repo list along with the public signing key. curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable Testing Google Chrome is ready for our Hardware Acceleration tasks. We can test it by launching Google Chrome with the following parameters. google-chrome-stable --headless --use-gl=angle \
    --use-angle=gl-egl --use-cmd-decoder=passthrough \
    --print-to-pdf=output.pdf 'chrome://gpu' The above commands will generate , and transfer it to your local machine to check the status of Hardware Acceleration in Google Chrome or Chromium. If the process goes smoothly, the resultant will look like this. output.pdf PDF Working with Puppeteer To verify GPU acceleration using the Node.js library Puppeteer, follow these steps: Installation Install Node.js, as this clean Ubuntu AMI does not include any unnecessary packages. Use the following commands: curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
NODE_MAJOR=18
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt update
sudo apt install nodejs Testing After installing Node.js, we can install Puppeteer by running in our code directory. Here's a sample file for checking hardware acceleration: npm i puppeteer index.js const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: true, 
    args: ['--use-gl=angle', '--use-angle=gl-egl'], 
  });
  const page = await browser.newPage();
  await page.goto('chrome://gpu');
  await page.waitForTimeout(2000);
  await page.screenshot({ path: 'output.png' });
  await browser.close();
})(); Run the script using . This will generate an file containing hardware acceleration information. node index.js output.png Note from the Creator has been immensely helpful in helping the “ ” community adopt GPU-accelerated rendering.He's researched and written about how to obtain, configure and run EC2 containers and headless Chrome correctly in order to take advantage of graphics acceleration.This area has been especially hard to crack, and without we would not have been able to unlock huge speed boosts. Mirza Remotion Mirza We are super grateful for that! -- Jonny Burger Creator / Remotion.dev Conclusion With hardware acceleration now readily available in headless mode, we can harness the power of GPUs for faster and more complex rendering tasks. Our next steps involve creating a custom AMI from this instance and streamlining the process using AWS Image Builder Pipelines for efficiency. Additionally, we plan to extend hardware capabilities to Docker containers, further extending our options. Resources Remotion - Make videos programmatically: https://remotion.dev Remotion - Using the GPU in the cloud: https://www.remotion.dev/docs/miscellaneous/cloud-gpu Cannot enable GPU acceleration: github.com/puppeteer/puppeteer/issues/3637 : Recommend a workflow for using the GPU on a AWS instance https://github.com/remotion-dev/remotion/issues/2889 Getting Started with Headless Chrome: developer.chrome.com/blog/headless-chrome Why Your AWS Deep Learning AMI is Holding You Back and How to Fix: mirzabilal.com/why-your-aws-deep-learning-a.. Deep Learning with “AWS Graviton2 + NVIDIA Tensor T4G” for as low as free* with CUDA 12.2: mirzabilal.com/deep-learning-with-aws-gravi.. How to install FFmpeg with Harware Accelaration on AWS: mirzabilal.com/how-to-install-ffmpeg-with-h.. CPU vs GPU for Video Transcoding - Challenging the Cost-Speed Myth: https://mirzabilal.com/cpu-vs-gpu-for-video-transcoding-challenging-the-cost-speed-myth Also published . here

Unlocking GPU-Accelerated Server-Side Rendering in Remotion With Chrome, Chromium & Puppeteer

When you’re getting started with Docker, it is important to understand what is a Dockerfile. You will work with Dockerfiles in every project you work on regardless of the operating system you’re using in your image. If you want to follow along with the demos in this blog post, you will need the food trucks’ repo from the Docker community repos. You can find it on their . GitHub https://youtu.be/DqyNssbqEaE?embedable=true A Dockerfile is similar to a batch script that contains all the commands to build a . The first line states that the base image is to begin with, and then follow the instructions to install required modules, copy files, and deploy the code which results in a working environment. Docker image Every Dockerfile must start with the FROM instruction. This tells Docker what base image to use as you build your final image. In this case, we are using the ubuntu standard OS image. You can find images for many different operating systems and development environments for any technology you’re using. The LABEL instruction adds metadata to an image. A LABEL is a key-value pair. You can add multiple labels to a Dockerfile to include any custom information you want. In this example, we are creating a key named “maintainer” and setting it equal to the text on the right. Labels are visible when you use a docker inspect command to view low-level information on Docker objects which is helpful to keep your projects organized. LABEL maintainer="Prakhar Srivastav <[email protected]>" The RUN instruction will execute any commands in a new layer on top of the current image and commit the results. The resulting committed image will be used for the next step in the Dockerfile. All instructions are executed in order so you have to be careful to add your run instructions in the exact order they should be run. In this example, we are installing the required system-wide dependencies for Python and node as these are needed to run the food trucks website. # install system-wide deps for python and node
RUN apt-get -yqq update
RUN apt-get -yqq install python3-pip python3-dev curl gnupg
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash
RUN apt-get install -yq nodejs The ADD instruction copies new files, directories, or remote file URLs from the <src> listed on the left and adds them to the filesystem of the image at the <dest> path listed on the right. The destination path is located inside the image that is being built by the Dockerfile. # copy our application code
ADD flask-app /opt/flask-app Open a terminal, execute the command and then inspect the filesystem of your container to find the destination file path. You can even save this image as a reference to use for later if you want. docker-compose up, To save an image from a running container, get the container id by typing . Then, run a command using the container id, and then, a custom image name and version. docker ps docker commit That’s it! You can run the docker images command to confirm your new image has been created. docker commit [container id] [image name]:[image version] The WORKDIR instruction sets the working directory for any RUN, CMD, ENTRYPOINT, COPY, and ADD instructions that follow it in the Dockerfile. In this example, the node package manager commands are run in the working directory that has been defined. WORKDIR /opt/flask-app

# fetch app specific deps
RUN npm install
RUN npm run build
RUN pip3 install -r requirements.txt The EXPOSE instruction informs Docker that the container listens on the specified network ports at runtime. EXPOSE does not make the ports of the container accessible to the host. # expose port
EXPOSE 5000 And finally, we have the CMD instruction. There can only be one CMD instruction in a Dockerfile. If you list more than one CMD, then only the last CMD will take effect. The main purpose of a CMD is to provide defaults for an executing container. In this example, we are running the app script for the website located in the root of the working directory and naming the app python3. # start app
CMD [ "python3", "./app.py" ] That’s it! Stop your running container by executing the command. Go back to the Dockerfile and uncomment everything using the shortcut . Save your work, and execute docker-compose down Ctrl+k+u docker-compose up. Open a browser, and navigate to localhost on port 5000. You should see the Food Trucks website! Previously published here

What Is a Dockerfile? A Quick Overview

A Complete Guide to Laravel Sail

This tutorial is intended to be a quick guide. Create a new Rails application via Docker with the following Command docker run -it ruby:3.0.2 gem install rails bundler \
  && rails new exampleapp -d=postgresql --webpack:react --skip-coffee Once the application is created, go to the application directory. All application files will be found there. cd exampleapp Create a File called Dockerfile with the Following Content // dockerfile

FROM ruby:3.0.2
RUN apt-get update -qq \
&& apt-get install -y curl build-essential libpq-dev \
 nodejs postgresql-client &&\
  curl -sL https://deb.nodesource.com/setup_10.x | bash - && \
  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
  apt-get update && apt-get install -y nodejs yarn
ADD . /app
WORKDIR /app
RUN bundle install
EXPOSE 3000
CMD ["bash"] This file will help Docker Compose build an image with all the needed dependencies installed to handle Rails. It will use Postgresql as a database engine and React bundled with webpack. Create a File Called docker-compose.yml With the Following Content version: '3.8'
services:
  db:
    env_file: .env
    image: postgres
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
    env_file: .env
    environment:
      RAILS_ENV: development
      RAILS_MAX_THREADS: 5
volumes:
  postgres: Create a .env File Add the following environment variables. Pay special attention to the variable names since the image will need them for a proper setup, as well as the DATABASE_URL, which is needed by The query strings need to match with the other variable’s values. In the , the host is , which is the name exposed by Docker Compose. POSTGRES_ pg web. DATABASE_URL db POSTGRES_DB=postgres
POSTGRES_USER=postgres
POSTGRES_PASSWORD=secret
DATABASE_URL=postgres://postgres:secret@db:5432/postgres Edit Database.yml Edit the file and add Here is an example of a valid config file for this tutorial. Keep in mind the way you expose sensitive data and the environments you are building the Docker Compose for. config/database.yml url: <%= ENV.fetch("DATABASE_URL") { '' } %> default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  url: <%= ENV.fetch("DATABASE_URL") { '' } %> # This is the line we added
development:
  <<: *default
  database: exampleapp_development
test:
  <<: *default
  database: exampleapp_test
production:
  <<: *default
  database: exampleapp_production
  username: exampleapp
  password: <%= ENV['EXAMPLEAPP_DATABASE_PASSWORD'] %> Start the App The application is ready. We can start our application now. We are adding the parameter the first time, so that Docker Compose builds the containers first. --build docker-compose up --build Go to Localhost We can now go to in our browser. We should see the “Yay! You’re on Rails!” screen. http://localhost:3000 Now we can run commands (for example, generators and migrations) to evolve our application. We will now create a model with their controller and views, and then run a migration in this example. The model will be , and will have a name (string) and a value (float). Coin docker-compose run web rails g scaffold Coin name:string value:float \
 && rails db:migrate Here is a quick video of all that we have seen until now.

Create a Ruby on Rails (Rails-Postgresql-React) App using Docker Compose

On Linux (Ubuntu 20.04 LTS): Node Download the Node LTS archive file from and extract it (in this example, the archive is extracted in ) https://nodejs.org/ /home/user/Downloads/ Open in the home folder ( ) with a text editor, and append: .bashrc /home/user./bashrc PATH=$PATH:/home/user/Downloads/node-v14.17.0-linux-x64/bin Then, in a terminal: .bashrc

node -v npm -v source # v14.17.0 # 6.14.13 You may also need the development tools to build native addons: sudo apt install gcc g++ make Alternatively, you can install Node from a package. To install the LTS version, go to and https://github.com/nodesource/distributions # You need to install curl it if 's not already installed
sudo apt install curl

# Ubuntu
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs Yarn Install Yarn (from ) https://yarnpkg.com/getting-started/install npm install -g yarn

yarn -v # 1.22.10 Git sudo apt install git VSCode Download the .deb package from . Then, in a terminal, go to the folder, and: https://code.visualstudio.com/ Downloads sudo dpkg -i code_1.57.0-1623259737_amd64.deb code . # test it On Mac Node Download the LTS package from and install it (double click on node-v14.17.1.pkg and follow the steps). https://nodejs.org Then open a terminal, and: node -v

npm -v Yarn Open a terminal, and: npm install -g yarn

yarn -v NOTE: if you get this error: “npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/yarn” run the following commands: sudo chown -R /usr/ /lib/node_modules 
sudo chown -R /usr/ /bin
sudo chown -R /usr/ /share/ $USER local $USER local $USER local Then try to reinstall yarn with the command above. Git First, install Homebrew by following the instructions here: https://brew.sh Then, install Git with: brew install git VSCode Download the package from and install it. https://code.visualstudio.com On Windows Node Download Nodejs LTS from and install the package - don't forget to check "Automatically Install the Necessary Tools" in the installer. https://nodejs.org Then, open a terminlal (Command Prompt) and: node -v

npm -v Yarn npm install -g yarn

yarn -v Git Download the executable from here and run the installer. https://git-scm.com/download/win Then, open a terminal and: C:\Users\user>git --version
git version 2.32.0.windows.1 VSCode Download from and run the installer. VSCode https://code.visualstudio.com/ Then, to test everything, open a Command Prompt and: git https://github.com/alexadam/project-templates.git projects\react-app

yarn init --yes

yarn add react react-dom

yarn add --dev @types/react @types/react-dom ts-loader css-loader html-webpack-plugin node-sass sass-loader style-loader typescript webpack webpack-cli webpack-dev-server code . clone cd # Open VSCode Open package.json and append these lines: , : { : , : , : } "scripts" "clean" "rm -rf dist/*" "build" "webpack" "dev" "webpack serve" Run , open a browser, and go to yarn dev http://localhost:8080/ Previously published at https://alexadam.dev/blog/install-node-yarn-git.html

Quick Guide to Install Node, Yarn, Git and VSCode on Linux, Mac, and Windows

Zeet is sponsoring this blogpost for the next month. I tried it out the other day. It's like serverless but for running entire back ends. You can host and scale apps automagically. Pretty neat. Handling large images has always been a pain in my side since I started writing code. Lately, it has started to have a huge impact on page speed and SEO ranking. If your website has poorly optimized images it won’t score well on . If it doesn’t score well, it won’t be on the first page of Google. That sucks. Google Lighthouse TL;DR I’ve built and open-sourced a snippet of code that automates the process of creating and deploying an image resize function and an S3 bucket with one simple command. Check out . the code here But if you want to follow along and learn how to do it yourself, keep reading. Where do we start? Luckily enough, there is a way to solve the issue of bad image optimization with little to no hassle. Today we’ll build an function to resize images on-the-fly. AWS Lambda The images will be stored in an bucket and, once requested, will be served from it. If you need a resized version, you’ll request the image and supply the height and width. This will trigger a function. It’ll grab the existing image, resize it, return it back to the bucket and then serve it from the bucket. S3 This scenario will only resize an image for a given set of dimensions once. Every subsequent request to the image of that size will be served from the bucket. Pretty cool huh? Here’s a diagram, because who doesn’t love diagrams. Because I already assume you know how to use the and have already been introduced to the basics of , and , I’ll immediately jump into the gist of things. Here’s an overview of what we’ll be doing. Serverless Framework serverless Docker AWS Create the project structure Create a secrets file Write the AWS Lambda function configuration Write AWS Lambda function source code Write S3 Bucket configuration Deploy with DockerTest with Dashbird Note : Please install Docker and Docker Compose before continuing with this tutorial. The funny thing here is that we need to use Docker to deploy this service because of . This image-resize module has binaries that need to be built on the same operating system as it will run on. Because AWS Lambda is running on Amazon Linux, we need to the packages on an Amazon Linux instance before running . Sharp npm install sls deploy With that all out of the way let’s build some stuff. Create the project structure The best way of explaining this complex structure will be with an image. Folders in green and files in blue. Check out the for further insight. repo Create a secrets file We’ll create a secrets.env file in the folder to hold our secrets and inject them into our Docker container once it spins up. secrets SLS_KEY=XXX # replace your IAM User key 
SLS_SECRET=YYY # replace your IAM User secret 
STAGE=dev 
REGION=us-east BUCKET=images.yourdomain.com with with -1 Note : The deploy.sh script will create a secondary secrets.json file only to hold the domain name of our API Gateway endpoint. Write the AWS Lambda function configuration Open up the folder, and start by creating the file. Paste this in. functions package.json { : , : , : , : , : { : , : }
} "name" "image-resize" "version" "1.0.0" "description" "Serverless image resize on-the-fly." "main" "resize.js" "dependencies" "serverless-plugin-tracing" "^2.0.0" "sharp" "^0.18.4" No need to run any install, because we need to run the Docker container first. Note that we’re adding a tracing plugin to enable because it’s awesome. X-Ray Moving on, let’s create the file to configure our function. serverless.yml service: image-resize-on-the-fly-functions

plugins:
  - serverless-plugin-tracing

provider:
  name: aws
  runtime: nodejs8 stage: ${ :STAGE, }
  profile: serverless-admin # or change to tracing: region: ${ :REGION, }
  environment:
    BUCKET: ${ :BUCKET}
    REGION: ${ :REGION}
  iamRoleStatements:
    - Effect: Action:
        - Resource: - Effect: Action:
        - Resource: - Effect: Action:
        - - Resource:
        - functions:
  resize:
    handler: resize.handler
    events:
      - http:
          path: resize
          method: get .10 env 'dev' 'default' true env 'us-east-1' env env "Allow" "s3:ListBucket" "arn:aws:s3:::${env:BUCKET}" "Allow" "s3:PutObject" "arn:aws:s3:::${env:BUCKET}" "Allow" "xray:PutTraceSegments" "xray:PutTelemetryRecords" "*" As you can see we’re grabbing a bunch of values from the and also allowing the function to access the we specified and some X-Ray telemetry. env BUCKET Write AWS Lambda function source code Only the code left now. Here’s what we’ll do. Because images can get quite large and we don’t want to risk loading several megabytes into the lambda function’s memory, I’ll show you how to use to read the image from an S3 stream, pipe it to Sharp, and then write it back to S3, once again, as a stream. Node.js streams Ready? Let’s do it in two steps. First, define the helper functions we need in order to create the streams, then create the handler function itself which our lambda will invoke. stream = ( ) AWS = ( ) S3 = AWS.S3({ : }) sharp = ( ) BUCKET = process.env.BUCKET URL = readStreamFromS3 = { S3.getObject({ Bucket, Key }).createReadStream()
} writeStreamToS3 = { pass = stream.PassThrough() { : pass, : S3.upload({ : pass,
      Bucket, : ,
      Key
    }).promise()
  }
} streamToSharp = { sharp()
    .resize(width, height)
    .toFormat( )
} // resize.js // require modules const require 'stream' const require 'aws-sdk' const new signatureVersion 'v4' const require 'sharp' // create constants const const `http:// .s3-website. .amazonaws.com` ${process.env.BUCKET} ${process.env.REGION} // create the read stream abstraction for downloading data from S3 const ( ) => { Bucket, Key } return // create the write stream abstraction for uploading data to S3 const ( ) => { Bucket, Key } const new return writeStream uploadFinished Body ContentType 'image/png' // sharp resize stream const ( ) => { width, height } return 'png' Here we’re defining constants and the constructor functions for our streams. What’s important to note is that S3 doesn’t have a default method for writing to storage with a stream. So you need to create one. It’s doable with the helper. The abstraction above will write the data with a stream and resolve a promise once it's done. stream.PassThrough() Moving on, let’s check out the handler. Just underneath the code above, paste this in. exports.handler = (event) => { key = event.queryStringParameters.key match = key.match( ) width = (match[ ], ) height = (match[ ], ) originalKey = match[ ] newKey = + width + + height + + originalKey imageLocation = { readStream = readStreamFromS3({ : BUCKET, : originalKey }) resizeStream = streamToSharp({ width, height }) { 
      writeStream, 
      uploadFinished 
    } = writeStreamToS3({ : BUCKET, : newKey }) readStream
      .pipe(resizeStream)
      .pipe(writeStream) uploadedData = uploadFinished .log( , {
      ...uploadedData, : URL, : imageLocation
    }) { : , : { : imageLocation }, : }
  } (err) { .error(err) { : , : err.message
    }
  }
} async const // match a string like: '/1280x720/image.jpg' const /(\d+)x(\d+)\/(.*)/ // get the dimensions of the new image const parseInt 1 10 const parseInt 2 10 const 3 // create the new name of the image, note this has a '/' - S3 will create a directory const '' 'x' '/' const ` / ` ${URL} ${newKey} try // create the read and write streams from and to S3 and the Sharp resize stream const Bucket Key const const Bucket Key // trigger the stream // wait for the stream to finish const await // log data to Dashbird console 'Data: ' BucketEndpoint ImageURL // return a 301 redirect to the newly created resource in S3 return statusCode '301' headers 'location' body '' catch console return statusCode '500' body The query string parameters will look like this . Which means we grab the image dimensions from the parameters by using a regex match. The value is set to the dimensions followed by a and the original name of the image. This will create a new folder named with the image in it. Pretty cool. /1280x720/image.jpg newKey / 1280x720 image.jpg Once we trigger the streams and await the promise to resolve we can log out the data and return a 301 redirect to the location of the image in the bucket. Note that we will enable static website hosting on our bucket in the next paragraph. Write S3 Bucket configuration The bucket configuration will mostly consist of default templates, so if you’re a bit rusty, I’d advise you brush up a bit. But, the gist of it is simple enough to understand. Open up the folder and create a file. CloudFormation bucket serverless.yml service: image-resize-on-the-fly-bucket

custom:
  secrets: ${file(../secrets/secrets.json)} # will be created our deploy.sh script

provider:
  name: aws
  runtime: nodejs8 stage: ${ :STAGE, }
  profile: serverless-admin # or change to region: us-east environment:
    BUCKET: ${ :BUCKET}

resources:
  Resources:
    ImageResizeOnTheFly:
      Type: AWS::S3::Bucket # creating an S3 Bucket
      Properties:
        AccessControl: PublicReadWrite
        BucketName: ${ :BUCKET}
        WebsiteConfiguration: # enabling the website option
          ErrorDocument: error.html
          IndexDocument: index.html
          RoutingRules: # telling it to redirect every error
            - 
              RedirectRule:
                HostName: ${ :custom.secrets.DOMAIN} # API Gateway domain
                HttpRedirectCode: # temporary redirect HTTP code
                Protocol: ReplaceKeyPrefixWith: # route
              RoutingRuleCondition:
                HttpErrorCodeReturnedEquals: KeyPrefixEquals: ImageResizeOnTheFlyPolicy:
      Type: AWS::S3::BucketPolicy # add policy public read access
      Properties: 
        Bucket: 
          Ref: ImageResizeOnTheFly
        PolicyDocument: 
          Statement: 
            - 
              Action: 
                - Effect: Resource:
                Fn::Join: 
                  - - 
                    - - 
                      Ref: ImageResizeOnTheFly
                    - Principal: in .10 env 'dev' 'default' -1 env env static for 404 self "307" "https" "${self:provider.stage}/resize?key=" "404" "" for "s3:*" "Allow" "" "arn:aws:s3:::" "/*" "*" Once we enable the static website hosting option on our bucket, it will behave like any website. This lets us serve images from it and utilize the 404 error redirect rule. If no image is found, the bucket will trigger the 404, which redirects to our lambda function. Then resize the original image to the requested dimensions, and put it back to the bucket at the exact route it was requested from. Just like magic! Deploy with Docker Here comes the fun part! We’ll create a and file to create our Amazon Linux container and load it with values. That's easy. The hard part will be writing the bash script to run all commands and deploy our function and bucket. Dockerfile docker-compose.yml .env Starting with the , here's what you need to add. Dockerfile FROM amazonlinux

# Create deploy directory
WORKDIR /deploy

# Install system dependencies
RUN yum -y install make gcc*
RUN curl --silent --location https: RUN yum -y install nodejs

# Install serverless
RUN npm install -g serverless

# Copy source
COPY . .

# Install app dependencies
RUN cd /deploy/functions && npm i --production && cd /deploy

#  Run deploy script
CMD ./deploy.sh ; sleep m //rpm.nodesource.com/setup_8.x | bash - 5 Because Amazon Linux is rather basic, we need to install both gcc and Node.js at the get-go. Then it’s as simple as any Dockerfile you’ve seen. Install the Serverless Framework globally, copy over the source code, install the npm modules in the directory and run the script. functions deploy.sh The file is literally only used to load the values. docker-compose.yml .env version: services:
  image-resize-on-the-fly:
    build: .
    volumes:
      - ./secrets: secrets
    env_file:
      - ./secrets/secrets.env "3" /deploy/ That’s it. The Docker part is done. Let’s write some bash. Starting out simple, we’ll define the initial variables, configure our serverless installation and deploy our function. # deploy.sh

# variables
stage=${STAGE}
region=${REGION}
bucket=${BUCKET}
secrets= # Configure your Serverless installation to talk to your AWS account
sls config credentials \
  --provider aws \
  --key ${SLS_KEY} \
  --secret ${SLS_SECRET} \
  --profile serverless-admin

# cd into functions dir
cd /deploy/functions

# Deploy '/deploy/secrets/secrets.json' "------------------" ' ...' "------------------" function echo echo Deploying function echo sls deploy Once we have deployed it, we need to grab the domain name of our API Gateway endpoint and put it in a file which will be loaded into our file from the directory. To do this I just did some regex magic. Add this at the bottom of your . secrets.json serverless.yml bucket deploy.sh # find and replace the service endpoint [ -z ${stage+dev} ]; then echo ; echo ; fi

sls info -v | grep ServiceEndpoint > domain.txt
sed -i domain.txt
sed -i domain.txt
domain=$(cat domain.txt)
sed domain.txt > id.txt
id=$(cat id.txt)

echo echo echo echo echo echo rm domain.txt
rm id.txt

echo > $secrets if "Stage is unset." else "Stage is set to '$stage'." 's@ServiceEndpoint:\ https:\/\/@@g' "s@/$stage@@g" "s@.execute-api.$region.amazonaws.com@@g" "------------------" "Domain:" "  $domain" "------------------" "API ID:" "  $id" "{\"DOMAIN\":\"$domain\"}" Now you have a file in the directory. All that's left is to run the bucket deployment. Paste this final snippet at the bottom of the script. secrets.json secrets deploy.sh cd /deploy/bucket

# Deploy bucket config
echo echo sls deploy

echo echo echo echo echo "------------------" 'Deploying bucket...' "------------------" 'Bucket endpoint:' "  http://$bucket.s3-website.$region.amazonaws.com/" "------------------" "Service deployed. Press CTRL+C to exit." There we have it! The coding part is done. Would you believe me we only need to run one command now? Open up a terminal window in the root of your project and run: $ docker-compose up --build Let it do its magic, and you’ll see everything get created automagically! Please note that the terminal will show you the bucket endpoint which you’ll use to access the images. Test with Dashbird The final step is to check if it all works. Let’s upload an image to the bucket, so we have something to resize. Go ahead and find an image you like and want to resize, or just take . this one It’s rather huge and around 6 MB in size. Here’s the command you want to run to upload it. $ aws s3 cp --acl public-read IMAGE s3: //BUCKET So, if your bucket name is and your image name is , then it should look like this if you run the command from the directory where the image is located. images the-earth.jpg $ aws s3 cp --acl public-read the-earth.jpg s3: //images Keep in mind you need to have the installed on your machine, or upload the image through the AWS Console. AWS CLI Now, try out to request the image through the bucket. Type into your browser the S3 bucket URL. http: //BUCKET.s3-website.REGION.amazonaws.com/the-earth.jpg You’ll see the original image appear. But, now add dimensions to the URL. http: //BUCKET.s3-website.REGION.amazonaws.com/400x400/the-earth.jpg This will trigger the resize function and create a 400x400 pixel version of the image. It’ll take a few hundred milliseconds to create and once it’s done, the browser will redirect you to the newly created image. When you try to refresh the URL you’ll see that it’s now fetching the new image, without calling the resize function. Let’s check the logs in and make sure it all works fine under the hood. Dashbird Looks fine, but I did make some beginner mistakes when I first tried setting up the function. One of them was forgetting to require a module before using it. Luckily I immediately got an alert that explained what was wrong. are life-savers. Slack alerts The way I fixed the issue was with the feature. It let me check the invocation logs with a few seconds of latency so I could debug the issue. Pretty cool. live-tailing Wrapping up To conclude this little session, I’d like to point out using serverless as a helper to support your existing infrastructure is incredible. It’s language agnostic and easy to use. showdev use clusters of containers for our core features that interact heavily with our databases while offloading all the rest to lambda functions, queues, streams and other serverless services on AWS. We at Dashbird And, of course, once again, give it a star if you want more people to see it on GitHub. If you follow along with the instructions there, you’ll be able to have this image resize on-the-fly microservice up and running in no time at all. here’s the repo If you want to read some of my previous serverless musings head over to or my profile join my serverless newsletter! I had an absolute blast writing this open-source code snippet. Writing the article wasn’t that bad either! Hope you guys and girls enjoyed reading it as much as I enjoyed writing it. If you liked it, slap that tiny unicorn so more people here on dev.to will see this article. Until next time, be curious and have fun. Originally published at dev.to .

A crash course on Serverless with AWS — Image resize on-the-fly with Lambda and S3

Installing Rails 6 on Ubuntu can be tricky. In 5 easy steps, I’ll show you how to do it. I’m currently a web development student at . As part of the curriculum, we’re expected to solve some Rails exercises from . microverse microverse The Odin Project I wrote this article as a way to help my fellow students. This may also help anybody interested in learning Rails. microverse Currently, The Odin Project of Rails (5.2.3). Installing this older Rails version is easy. But as Rails 6 catches on, the older version is bound to fall out of use. uses an older version It took me quite a while to figure out how to do this on my own. This article is meant to save you a couple of hours. That way you can get to work on the fun stuff sooner! Anyway, here’s how I installed Rails 6: Step 1. Prerequisites I installed Rails 6 on running on , but this HOWTO will probably also work for later Ubuntu and Xubuntu versions. Xubuntu 18.04.4 LTS Virtual Box 6.1.2 You can follow the from The Odin Project to set up your preferred Ubuntu distro. You can also install Ubuntu on a real machine if you prefer. Virtual Machine installation guide Step 2. Install rbenv and Ruby The from The Odin Project currently uses Ruby 2.6.5. For Rails 6 we can install up to Ruby 2.7. , Ruby 2.7 has been known to cause warning messages when used with Rails 6. If you don’t really need the latest Ruby version, you can use instead. This might save you a few warning messages later on as you work with rails. Ruby installation guide However 2.6.3 Open your terminal, and run the following set of commands $ sudo apt-get update $ sudo apt-get install curl git nodejs gcc make libssl-dev libreadline-dev zlib1g-dev libsqlite3-dev g++ libpq-dev $ git https://github.com/rbenv/rbenv.git ~/.rbenv clone $ ‘ PATH=” /.rbenv/bin: ”’ >> ~/.bashrc echo export $HOME $PATH $ ‘ “$(rbenv init -)”’ >> ~/.bashrc echo eval $ exit These will install rbenv and close your terminal window. You will need to open a new terminal window for the PATH changes to take effect. To install Ruby 2.7.0, open a new terminal, and enter these commands: $ mkdir -p “$(rbenv root)”/plugins $ git https://github.com/rbenv/ruby-build.git “$(rbenv root)”/plugins/ruby-build clone $ rbenv install 2.7.0 --verbose $ rbenv global 2.7.0 This is probably the most time-consuming part of the HOWTO, so be patient. Once Ruby is done installing, you’ll be ready for the next step. Step 3. Install Rails This step is pretty straight-forward. Instead of installing the older version of Rails, as detailed , we’ll simply install Rails 6.0.2.2: in The Odin Project Guide $ gem install rails -v 6.0.2.2 Step 4. Required additional components When I first tried to install Rails 6 on my virtual machine, I thought the previous step would be all there was to it. But I was wrong! At this point, if you try to run something like rails new my_first_rails_app you’ll get a series of error messages. To fix this, you’ll have to install these recent versions of the following components: Step 4.a. Nodejs To install the nodejs version required by Ruby 6, run: $ curl -sL https://deb.nodesource.com/setup_12.x |sudo -E bash - $ sudo apt-get install -y nodejs $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - Step 4.b. Bundler and pg Bundler will allow you to load the necessary dependencies from Gemfiles, which are used by Rails apps. Pg is a Ruby gem you’ll need to communicate with PostgreSQL. To install these, do: $ gem install bundler:2.1.4 $ gem install pg Step 4.c. Yarn You will need yarn to be able to run rails server and test your Rails 6 apps. To install the necessary version, run: $ “deb https://dl.yarnpkg.com/debian/ stable main” | sudo tee /etc/apt/sources.list.d/yarn.list echo $ sudo apt update && sudo apt install yarn $ yarn install --check-files Step 5. Test Rails Finally, you’ll want to make sure everything works as intended. To do this, I suggest you clone and run some tests on it. This repository contains we did from The Odin Project at microverse: my Toy App Github repository one of the first Rails exercises $ git https://github.com/voscarmv/toy_app clone $ toy_app cd $ bundle install $ rails db:migrate $ rails server This should serve the Toy App homepage to Play around with it and see how it works. http://localhost:3000/ NOTE: If you run into errors when running bundle install, try running yarn install --check-files again. That will likely fix the problem. If you decided to use Ruby 2.7 You might be getting warning messages when running or any other rails command. I suggest you point to the 6-0-stable branch of the rails 6.0.2.2 gem in your Gemfile. rails c Your Gemfile should look something like this: Conclusion and acknowledgments I hope this HOWTO helped you save some time. If you run into trouble while trying it out, leave a comment or . I’ll do my best to help you out! contact me on Twitter Finally, a special thank you to my coding partner for helping me find most of the commands from Step 4. I wouldn’t have been able to finish this guide so soon without his help! Alexis

Installing Ruby on Rails 6 on Ubuntu 
[A How-To Guide]

I am on Microverse working with a lot of people new to Software Development with Linux (I use this word to refer to and all his derivatives or distros), and in web development we use certain tools and pipelines that are more difficult to set up in Windows. So I found that most of the people new to Linux struggle to set up the tooling and basic commands for the first time. Linux OS This article tries to provide my dev environment as an example (I am not affiliated or related to any site or tool mentioned or linked here). I am using Debian 9, but most of the commands are similar in derivative distros as Ubuntu, Elementary, Mint or LinuxMX, e.g. all the ones that use ` ` or packages ` `.  I'll assume the one reading this article will just copy-paste the commands. apt .deb To me a great develop environment needs: An IDE or good text editor version control system the programming languages for you to develop some useful tools and utilities I will concentrate myself in web development, so I'll go installing the following stack: text editor, along some extensions for  web development vscode: version control standar, and some functions, aliases and tricks git: git JavaScript runtime nodejs: for web developers (screenshots, GIMP, VLC, Slack, teamViewer and dev fonts) some useful tools If you found some commands to be outdated or wrong for you, please comment the command that worked for you, along with your specs. I must note this is my actual machine, kernel and specs: Prerequisites Please be sure you have access running sudo sudo whoami Must return , if not visit this . From now on, when you type you must enter your password on the terminal. root link sudo Check if  system is updated: sudo apt update
sudo apt upgrade -y When you are ready, install these packages for develop in Linux: sudo apt install make curl build-essential openssl libssl-dev unzip A nice editor: Visual Studio Code The easiest way to install it is using the precompiled package from Microsoft (press the button that says ). You'll get in your folder (or the place the browser put the file) a package. But double click it won't do any help, you must install it using your terminal. Go ahead and open a terminal, then type (don't forget to changes the "x" in the command to the numbers in your file) : here .deb Debian, Ubuntu ~/Download .deb sudo apt install ./code_x.xx.x-xx_amd64.deb Also you can use tab for auto completion, learn . will auto magically set up everything and when all is finished you can open from your terminal (typing ), menu or launcher. here apt vcsode code Extensions for VSCode VSCode have a lot of extension on their , but filtering only web development extensions we found a great selection. The following are my favorites: Marketplace Auto Complete Tag Bracket Pair Colorizer 2 Color Manager Path Autocomplete Prettier <Your choices here> How to install them? One way is searching those on the marketplace and copy the command for install, for example: Then inside of VSCode press or in the menu go to then and you'll get: Ctl+P View Command Pallete Paste and and the extension would be installed. More info . Enter here A standard version control system: git Luckily for us, git is super easy to install: sudo apt install git
git --version You must be greeted with your git's version. But we have to make an extra setup: identify yourself. For this you need to create an account. Provide your name and email address, Git embeds this information into each commit we do, like this: git config --global user.name git config --global user.email "Your Name" "your.name@domain.com" Remember to put your name (or nickname) and your email. Now you should have Git installed and ready to use on your system. functions, aliases and tricks git As git is so important in modern development, its great to know that we have several utilities and helper for manage git. And most of them are available for Debian. One way is to use ` ` terminal commands, like ` `. Talking about  config you can use ` `to get info about certain repository, like the GitHub/GitLab repository or the branches you had worked on. git git config git config -l As you can notice on the last screenshot I use some aliases or helper functions. In the aliases dept I like to use short versions of normal commands. For example instead of ` i can use only ` ` or even ` `, is up to you. You can find a good guide about what aliases are people recommending and how to set up. git checkout` git check git ch here Did you commited something that was not supposed to commit (like secret keys!) or messed up working code? I found helping where you found a comprehensive guide for fixing bad commits/push/merges. this guide Do you want to learn the gory details? is your friend! This free official book Developing for JavaScript: install NodeJS I found difficult to install in Windows in comparison to install it on Linux, and this was one of the main reason I fully embraced Ubuntu and later Debian as my main OS. If you want to program for the web you will need sooner or later. node NodeJS To install the current LTS version (other versions ) you must use your terminal: here curl -sL https: sudo apt install -y nodejs //deb.nodesource.com/setup_12.x | sudo bash - From here you can use all the packages and helpers from node and npm. Here is for getting started. a quick guide Now you can use VSCode for making scripts and code to run over NodeJS, save it in a repository using Git and share it to the world. Go out there and find ! some great resources to learn Some useful tools for web developers in Debian : all Debian variants have support for using Print key, but if you want something more let me recommend you . Screenshots OBS For manipulate (raster) images you have The GIMP, but if you prefer something easy but powerful try . Pinta If you want to be in touch with your team you can install or , but of them using your terminal. Slack Teamviewer I recommend for your terminal or VSCode, another good choice is . Jetbrains Mono Fira Code Do you have more useful tools for web developers on Debian? Any comment or suggestion? Feel free to comment and share! Lets use Debian at full capacity!

Setting up a Web Develop Environment in Debian

Congratulations to all who made it this far in the program. ALCwithGoogle We were recently assigned tasks in each track. I am in the cloud track and I would be taking you through my workflow for the task assigned to the Cloud Track deploying a react application to Google Kubernetes Engine(GKE). So I used a Google VM instance as my development environment, that way we all have the same experience. First Step would be to create a VM for our development environment login to your Google Cloud Console, I used a QwikLab environment for this one. . you have 2 Hours to complete everything on this environment. https://googlepluralsight.qwiklabs.com/focuses/23638 VM Specifications are: name -> development-env type -> n1-standard OS -> Ubuntu 16:04 allow http traffic Next Open on the VM instance so we can preview the application while in development environment. To achieve this we need to create a with a , then edit the VM instance to have this network tag. port 3000 firewall rule network tag development-env name -> allow-traffic-port-3000 specified-target-tags -> nodejs-dev Source IP Ranges  -> 0.0.0.0/0 tcp port 3000 Use the Images below to configure the Firewall rule After this Edit the Virtual Machine to include the network tag nodejs-dev now we would be able to view whatever is running on port 3000 of the virtual machine from the public IP. next we SSH into the VM. Use the Open in browser window option on Google Console. From the SSH terminal, we will then Install and on our development environment. NodeJs Docker run the following commands to install NodeJs sudo apt-get update
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs
sudo apt-get install npm run the following commands to install Docker curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add –
sudo add-apt-repository sudo apt-get update
sudo apt-get install -y docker-ce "deb [arch=amd64] https://download.docker.com/linux/ubuntu stable" $(lsb_release -cs) After installing docker, I created a folder that will hold all our application code, you can choose to do this wherever run the following commands to create the directory /opt
sudo mkdir dev dev
sudo chown -R [your-username] . cd cd we then need to install ReactJs and its dependencies, an Easy way to install React and its dependencies for Node is using the create-react-app command. but first we need this command available in out nodejs environment run the following command to install create-react-app sudo npm install -g create-react-app next we use create-react-app to create a react application create-react-app -andela-challenge test This will create a new folder called , this folder contains our react application, next we go into the directory and run the react application. test-andela-challenge -andela-challenge
npm start cd test your terminal prompt should look like this when the application is running you can now view the application from the public IP address of our development environment on port 3000, http://[public-ip]:3000 Optional If you want to make changes to the application, you can. use to stop the application from the terminal. go into the src directory and edit and files. from within you use to save and to exit. Ctrl + C App.js App.css nano Ctrl + O Ctrl + X src
nano App.js // nano App.css cd Now we need to Containerize the Application (put the application in a container). We will build the docker container to host the application and serve it via nginx web-server. First we build the React Application npm run build Next we create a Dockerfile touch Dockerfile Next we edit the Dockerfile and add the following content FROM nginx:alpine
COPY /build /usr/share/nginx/html
EXPOSE 80
CMD [ , , ] "nginx" "-g" "daemon off;" The content of the file, means we are building from an existing image " " Docker will pull this image from the Container Registry. it will then copy the content of the " " directory to the folder on our container, then expose port 80, and start the nginx service nginx:alpine build html Now we have defined our container as a Dockerfile. we can now build the container image and supply a name for it. I used " " as the name for my image. test-andela-challenge-docker sudo docker build . -t -andela-challenge-docker test we have successfully built the container image, you can view the images in your environment with the following command. sudo docker images Now our container image is built. we will to upload it to a container registry in so we can create applications from it. we will be uploading it to the Google Container Registry. to do this we would need the following: google cloud SDK google account username and password gcp project-id gcp region First we install Google Cloud SDK on our development environment | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add –
sudo apt-get update && sudo apt-get install google-cloud-sdk echo "deb [signed-by=/usr/share/keyrings/cloud.google.gpg] http://packages.cloud.google.com/apt cloud-sdk main" you may or may not need to run these commands ~
sudo chown -R [username] .config cd Now we will connect the Google Cloud SDK to our google cloud account. There are two options: using a service account using the root google account details we will be using the root google account details. run the following command gcloud init you will need to supply some options, (login with google account) just follow the prompts. like image below after you supply the verification code, you will be authenticated to your google cloud account. follow the prompts and specify your project ID and google cloud region. I have been using eu-west-1b. Next we use gcloud to configure docker gcloud auth configure-docker now we tag the application using the google cloud format sudo docker tag [image-name] [gcloud-host]/[project-id]/[image-tag:version] this is what my own command looks like: sudo docker tag -andela-challenge-docker eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1 test now we will push the image to Google Container Registry, which will make it available in my Google Cloud Console sudo docker push eu.gcr.io/qwiklabs-gcp-00-ee40f571c6fa/react-docker:v1 the container image will now be available in "Container Registry" on your Google Cloud Console. Hang on, we're almost there. All that's left is to create a Kubernetes cluster and run this Container Image as a pod in that cluster. the following this we would do from the Google Cloud Console. Create a Kubernetes Cluster, from the Kubernetes Engine tab. My cluster has 2 nodes, It would also work with just 1 node, we are not expecting a lot of traffic. the more nodes, the more the compute charges to your account. once the Cluster is done creating, we can add a workload to run on the cluster, which would be our container image. click the workload option on the sidebar and add a workload. Choose existing container image and select our image from the container registry, also use an existing cluster and select the cluster we have just created. Once we have created the deployment, we then need to expose the application to the outside world. remember our application runs from port 80 inside the container because we are serving it with nginx. we akso want to expose it to the default https port 80 to the outside world, so we would map port 80 from the outside would to port 80 inside the container. now we have exposed our application on port 80, we can reach the application through the IP attached to the external Endpoint. *insert sigh of relief*.

Deploy React Application to Kubernetes Cluster on Google Cloud Platform

In this guide, we will install on Linux machine and on Windows machine. Hyperledger Fabric v1.4 When I started learning Hyperledger Fabric, installing it is really a pain in a neck and it turned miserable as I was using Windows. The purpose of this article to put all the instructions at one place to set up the Hyperledger Fabric network irrespective of the fact if you’re using Windows or Linux. My apologies for macOS readers, instructions for macOS is not included as I don’t have one. Contents: Prerequisites Linux Installation Windows Installation Prerequisites cURL — latest version Docker — version 17.06.2-ce or greater Docker Compose — version 1.14.0 or greater Golang — version 1.11.x Nodejs — version 8.x (other versions are not in support yet) NPM — version 5.x Python 2.7 These prerequisites’ versions are according to the fabric v1.4 . documentation Linux Installation Linux installation is pretty straight forward compared to windows. Few commands and Fabric is ready. I have provisioned a Linux 16.04 VM from AWS for this article. All the instructions will run in the terminal. I haven’t found any system requirement information in Hyperledger documentation. Please comment if you have a reference for the system requirement. Step 1: Create a new sudo user It is recommended that Hyperledger Fabric shouldn’t be installed as a root user. Open the terminal. Add the new user “fabric” sudo adduser fabric Add the user “fabric” to the Sudo groups sudo usermod -aG sudo newuser Login to “fabric” user su fabric Test the sudo access sudo ls If you get any error then the user is not added to the sudo group. Follow this for more information. link Step 2: cURL Check if your Linux has curl install or not. curl --version If not follow the below instructions to install: sudo apt-get update
sudo apt-get install curl
curl --version Step 3: Docker and Docker Compose Install the latest version of Docker from the official Docker repository. curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - Add the Docker repository to APT sources sudo add-apt-repository “deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable” Update the package database sudo apt-get update Install Docker sudo apt-get install -y docker-ce To use docker commands it requires root privileges. Instead of using sudo for all the docker commands, add the user to docker group sudo usermod -aG docker fabric Logout using exit command and log in again. Check the groups' user is part of, using id -nG command. Output
fabric sudo docker Test the Installation Check the docker and docker-compose version docker --version
docker-compose --version Pull the from Docker Hub and run a container: hello-world image docker run hello-world docker hello world If you get this message then your is successfully installed. For more information, please follow this . link Step 3: Golang Install the golang package curl -O https://storage.googleapis.com/golang/go1.11.linux-amd64.tar.gz Extract the package tar xvf go1.11.linux-amd64.tar.gz Check the go version go version Set the GOPATH export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin For more installation information follow this and for GOPATH follow this . link link Step 4: Nodejs and npm Download the installation script using curl curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh Run the script under sudo sudo bash nodesource_setup.sh Install the nodejs sudo apt-get install nodejs With nodejs, npm also get installed. Check their version node -v
Output
v8.16.0

npm -v
v6.4.1 Step 5: Python 2.7 By default ubuntu 16.04 comes with Python 3.5.1 installed as python3 binary. To install python 2.7 sudo apt-get install python Check the python version: python --version
Python 2.7.12 All the prerequisites are installed. Now, let's install the Hyperledger Fabric v1.4. Step 6: Install Samples, Binaries and Docker Images Determine the directory where you want to download the fabric samples. Open the directory in terminal and run the below command. curl -sSL http://bit.ly/2ysbOFE | bash -s It will download the latest production release. If you want a specific release for ex. v1.4.1, follow the below command. curl -sSL http://bit.ly/2ysbOFE | bash -s -- <fabric_version> <fabric-ca_version> <thirdparty_version>

curl -sSL http://bit.ly/2ysbOFE | bash -s -- 1.4.1 1.4.1 0.4.15 It’ll take some time, once it is finished you can see a new directory “fabric-samples”. come with sample examples to start with Hyperledger Fabric. There are many good examples to play within the fabric samples. “fabric-samples” fabric-samples Step 7: Test the fabric network As we have successfully completed the setting up the Fabric environment, let’s test it. To test it we’ll use sample in the fabric-samples. first-network Open the and go to . fabric-samples first-network cd fabric-samples/first-network first-network To test it, run the byfn.sh . It is a test script, it first setup the network with 2 organizations org1 and org2 with 2 peers each and an orderer . ./byfn.sh up first-network start On successful execution, you’ll see the below message. first-network end If you reach till this point it means you have successfully setup the fabric network. Now, we have completed the testing of clean the network. first-network, ./byfn down Congratulations, we have completed the Hyperledger Fabric installation in Linux machine. <a href="https://medium.com/media/844c93b0773672b9b56411a8792a9e96/href">https://medium.com/media/844c93b0773672b9b56411a8792a9e96/href</a> Windows Installation For Windows installation, you should be prepared for some obstacles as installation on windows is not easy peasy. Let's begin the windows installation. I am using Windows 10 Pro for the Fabric v1.4 installation. Step 1: cURL Please check if cURL is already installed in your PC. curl --help If you don’t get any error it means cURL is installed in your PC and you can go to the next step. For others please follow the below steps. To install cURL, download the package according to your Windows 32/64 bit from this . Extract the package and run the curl.exe present in the bin folder. link Add the curl in the environment variable. Open the cmd and check the curl --help . If you don’t get any error it means you curl is installed successfully. Follow this for troubleshooting. link Step 2: Docker and Docker Compose Before installing the docker, check if virtualization is Enabled in your PC or not. To check it, openTask Manager >> Performance Tab >> CPU virtualization From the BIOS settings, virtualization can be turned to Enabled. Instructions to enter BIOS settings vary from pc manufacturer to manufacturer. Please check this for the instructions. link Once the virtualization is Enabled we can move to download the docker. Please be sure which Windows you’re using before installing Docker. There are 2 versions of Docker for Windows. Docker Toolbox — Windows 8, Windows 10 Home Docker Desktop — Windows 10 Pro, Enterprise — 64 bit You first need to have an account in DockerHub to download the docker desktop. Please signup if you don’t have one. Download the docker from this . link Note: While installing keep the settings default don’t change anything. Test the Installation Open the cmd window Run docker --version and docker-compose --version docker --version
Docker version 18.09.2, build 6247962 docker-compose --version
docker-compose version 1.23.2, build 1110ad01 Pull the from Docker Hub and run a container: hello-world image docker run hello-world docker hello-world If you get this message then the Docker installed successfully in your machine. For more information on Docker check . the official documentation Step 3: Golang Download the Golang package from the . official site Once it is installed open the command prompt and run go version

Output
go version go1.11.5 windows/amd64 Step 4: Nodejs and npm Download the node v8.x from this and install it. link Check if it is installed correctly. node -v
v8.16.0

npm -v 
6.4.1 Step 5: Python 2.7 Download the python 2.7 from . its official site While installing add python to the system Path variable. This allows you to type ‘python’ into a command prompt without needing the full path. Change Add python.exe to Path to Will be installed on the local hard drive python-path Check the python installed correctly or not. python --version
Python 2.7.16 The Hyperledger Fabric prerequisites are installed. Now, it is time to install the extra windows dependencies. Windows Extras Step 6: Install windows-build-tools and grpc Install the windows-build-tools globally using npm . Open the command prompt and run the below command. npm install --global windows-build-tools It will take some time around 15 minutes or more. Once it will complete you will get the below message. windows-build-tools Once this is done, you should also install the NPM GRPC module with the following command: npm install --global grpc Step 7: Install git to run the bash commands To run the bash commands we have to install git . Git is a set of command line utility programs that are designed to execute on a Unix style command-line environment. — atlassian Git Bash is an application for Microsoft Windows environments which provides an emulation layer for a Git command line experience. — atlassian Download the git from this . link Hang on, for a while we are done with prerequisites and now we are on the final step to install the Hyperledger Fabric. Step 8: Install Samples, Binaries and Docker Images Go to the directory where you want to download the fabric samples. Once you’re in the directory open git bash . Right-click and select Git Bash Here . git bash Run the below command to install Samples, Binaries and Docker Images curl -sSL http://bit.ly/2ysbOFE | bash -s It will download the latest production release. If you want a specific release for ex. v1.4.1, follow the below command. curl -sSL http://bit.ly/2ysbOFE | bash -s -- <fabric_version> <fabric-ca_version> <thirdparty_version>

curl -sSL http://bit.ly/2ysbOFE | bash -s -- 1.4.1 1.4.1 0.4.15 It’ll take some time, once it is finished you can see a new directory “fabric-samples”. fabric-samples “fabric-samples” come with sample examples to start with Hyperledger Fabric. There are many good examples to play within the fabric samples. Step 7: Test the fabric network As we have successfully completed the setting up the Fabric environment, it’s time to test it. We are going to use the sample from the fabric-samples. first-network Open the and go to . fabric-samples first-network cd fabric-samples/first-network first-network To test it, run the byfn.sh . It is a test script, it first setup the network with 2 organizations org1 and org2 with 2 peers each and an orderer . ./byfn.sh up first-network start On successful execution, you’ll see the below message. first-network end If you reach till this point it means you have successfully setup the fabric network. Now, we have completed the testing of clean the network. first-network, ./byfn down Here, we have completed the Hyperledger Fabric installation in the Windows machine. Yes, we successfully installed the Fabric on Windows. <a href="https://medium.com/media/14d60a171c26635e4665be2df6bf91b3/href">https://medium.com/media/14d60a171c26635e4665be2df6bf91b3/href</a> Hope, you like the article and save you some time.

Hyperledger Fabric Installation Guide!

I’ve been using docker for playing around with my dinky website, but the DockerFile/image has always been a bit brute forcey. It’s time to explore a somewhat more effective DockerFile! Docker Overview Docker is a method of building applications/infrastructure/code within a container; a container being a self contained piece of software with all dependencies needed to run an application. Though not directly related to a , they do have some overlap in some of the problems they try to solve. When utilizing either docker or a build server, your build process and its dependencies need to be codified… in code. The idea is that you’re writing “docker code” in order to describe the steps to build and deploy your app. This is very similar to using a build server in that you can be sure that any developer or server will be able to build or run your application code, without the hassle of installing all of your applications dependencies, as those dependencies are referenced within the docker “code” itself. (Note, you still need to have docker installed, and there are likely a few other caveats, especially when it comes to injecting variables into your docker containers.) build server Current Image The current image I’m using is quite small (code length wise), and due to that fact builds take longer than they should. This is due simply to the fact there are no real “checkpoints” in my build process. I’ll try to explain more about that while walking through my base image: dnc2.1.401-v1-base FROM microsoft/dotnet:2.1.401-sdk-stretchWORKDIR /app # Perform updates, install gnupg and sudoRUN apt-get update \&& apt-get -y upgrade \&& apt-get -y dist-upgrade \&& apt-get install -y gnupg \&& apt-get install -y sudo dnc2.1.401-v1-node FROM kritner/builddotnetcore:dnc2.1.401-v1-baseWORKDIR /app # Install nodeRUN curl -sL deb.nodesource.com/setup_10.x | sudo -E bash - \&& apt-get install -y nodejs KritnerWebsite.DockerFile FROM kritner/builddotnetcore:dnc2.1.401-v1-nodeWORKDIR /app # Copy everything to prep for buildCOPY . ./ WORKDIR /app/src/KritnerWebsite.Web # Publish codeRUN dotnet publish -c Release -o outCMD dotnet out/KritnerWebsite.Web.dll Issues with Current Image Not really using “multi stage builds” (multiple “from” statements). I’m using a few different images, but it’s all being rolled up into the final image. This means I’m running a final image with a whole lot more “stuff” than what should be needed. Due to the way I’m building my final based off of my other images, it’s not very flexible when it comes to upgrading which sdk I’m using. I currently need to update , rebuild , then rebuild my actual website image. KritnerWebsite.Dockerfile dnc2.1.401-v1-base dnc2.1.401-v1-node Though related to the previous two points, I thought it deserved its own: I’m currently installing a LOT on top of the dnc image — things like sudo, node, performing OS level updates. Working with “separate” images for building dotnet core code, and running dotnet core, would help avoid some of this. Refactoring my DockerFile A Better Image Template (Thanks GaProgMan) has worked a bit with docker, and had a few tips for me with a multi-step build process he gave me a few months ago for reference (yes, I’m just getting to this now): GaProgMan ## Assuming we are building for 2.1.300## Change this value to match the version of the SDK## found in the global.jsonFROM microsoft/dotnet:2.1.300-sdk-alpine AS build ## Set the default build configuration to be Development## Override this by adding a --build-arg switch to the call## to docker build. i.e:##   docker build . --file UI.dockerfile --tag projname-ui --build-arg target_configuration=Release## Will build this project in Release rather than DevelopmentARG target_configuration=Development WORKDIR /build # Copy all the sln and csproj files, then run a restore. The .NET Core SDK# doesn't need access to the source files (other than these) in order to# restore packages.# By doing this first, docker can cache the result of the restore. This is# great for build times, because restore actions can take a long time. COPY ./src/proj.name/proj.name.csproj proj.name.csproj # Do the above for all of your csprojs RUN dotnet restore # This copy relies on the .dockerignore file listing bin and obj directories.# If these aren't listed, then the generated project.assets.json files will# be overwritten in this copy action - this will lead to us needing to run# another restore.# This, and all other copy commands, will follow any guidance supplied in# our .dockerignore file. This file ensures that we only copy files from given# directories or of given file types - it is similar in structure and usage to the# .gitignore fileCOPY ./src/proj.name .COPY ./global.json ./global.jsonRUN dotnet build --configuration ${target_configuration}  --no-restore # FROM build AS publishRUN dotnet publish --configuration ${target_configuration} --output "../dist" --no-restore --no-build # Install all of the npm packages as a cache-able layer. Similar to when we did# a dotnet restore, it will be skipped if npm packages never change.# The install step is performed in the internal-npm-image container, the steps# from which are run just-in-time in our down stream container (i.e this one) WORKDIR /build FROM internal-npm-image as webpack COPY --from=build ./build/ClientApp ./ClientApp/COPY --from=build ./build/webpack-config ./webpack-config/COPY --from=build ./build/tsconfig.json ./build/tsconfig.aot.json ./build/package.json ./build/webpack.config.js ./ RUN npm run webpack-production FROM microsoft/dotnet:2.1.0-aspnetcore-runtime-alpine as App ## Set the default runtime environment to be development.## This can be overridden by providing a value via the --build-arg switch.## For example:##   docker build . --file UI.dockerfile --tag projname-ui --build-arg target_configuration=Release --build-arg target_env=Staging## Will build as release, but with the Staging environmentARG target_env=Development## We have to "recreate" it here, because an ARG only exists within the## context of a base image.## So the version of target_env at the top of this dockerfile only exists## within the "build" image and this one (which exists only wihtin the## "App" image), is completely different to the earlier one. WORKDIR /App COPY --from=build ./dist ./COPY --from=webpack ./tmp/wwwroot/ ./wwwroot/ ENV ASPNETCORE_URLS ENV ASPNETCORE_ENVIRONMENT="${target_env}"EXPOSE 5001 http://+:5001 ENTRYPOINT ["dotnet", "projname-ui.dll"] Adapting the template to my build I don’t want to copy *exactly* off of GaProgMan’s sample, luckily he commented it very well, so I’d know what’s happening. The most important thing I’m shooting for is creating more layers. These layers are important for ensuring more things will be cached; so not rebuilt (necessarily) with every build of the DockerFile. First things first — I know I can cut down on my image size by utilizing two separate base images throughout the docker file: SDK — for building Runtime — for running Previously, I was using only the SDK, which blows up my final image size by quite a bit — my images’ current size is 2.23 GB as per (yeesh!). docker images So for the two images — sdk and runtime: FROM microsoft/dotnet:2.2-aspnetcore-runtime AS baseRUN apt-get update \&& apt-get -y upgrade \&& apt-get -y dist-upgrade \&& apt-get install -y gnupg \&& apt-get install -y sudo \&& curl -sL deb.nodesource.com/setup_10.x | sudo -E bash - \&& apt-get install -y nodejs FROM microsoft/dotnet:2.2-sdk AS buildRUN apt-get update \&& apt-get -y upgrade \&& apt-get -y dist-upgrade \&& apt-get install -y gnupg \&& apt-get install -y sudo \&& curl -sL deb.nodesource.com/setup_10.x | sudo -E bash - \&& apt-get install -y nodejs In the above we’re running a few commands on the base images for the purpose of installing nodejs — which we’ll need both for building and running the angular app; at least I’m pretty sure it’s needed for both right? WORKDIR /src COPY ["./src/KritnerWebsite.Web/KritnerWebsite.Web.csproj", "src/KritnerWebsite.Web/KritnerWebsite.Web.csproj"] RUN dotnet restore "src/KritnerWebsite.Web/KritnerWebsite.Web.csproj" Next, we’ll do the dotnet restore on the single copied project file — the reasoning behind this was pretty well explained in the above example, but I didn’t really realize it worked this way until seeing it in GaProMan’s comments. Basically, this restored “layer” can be cached, and never “rebuilt” unless something in the dependencies changes, saving on time when rebuilding our docker image! COPY ["./src/KritnerWebsite.Web/ClientApp/package.json", "src/KritnerWebsite.Web/ClientApp/package.json"] RUN cd src/KritnerWebsite.Web/ClientApp \&& npm install Same idea in the above, but for npm packages instead of .net dependencies. COPY ["src/KritnerWebsite.Web/", "src/KritnerWebsite.Web"] WORKDIR /src/src/KritnerWebsite.Web RUN dotnet build -c Release -o /app --no-restore In the above, I’m copying the entirety of the buildable source directory, and performing a build with the .net CLI. Special note that the option is being used as a restore operation was performed previously. --no-restore FROM build AS publish RUN dotnet publish -c Release -o /app --no-restore --no-build Here, in a similar idea to the build layer, we’re performing a publish; making sure not to restore or build as both have already been completed. Finally: FROM base AS finalWORKDIR /appCOPY --from=publish /app .ENTRYPOINT ["dotnet", "KritnerWebsite.Web.dll"] In the above we’re copying our built application from the publish image, into a new “final” image that was based off of “base” (the run time). The new DockerFile The new DockerFile looks like this in its entirety: # docker build -t kritner/kritnerwebsite .# docker run -d -p 5000:5000 kritner/kritnerwebsite# docker push kritner/kritnerwebsite # Runner image - Runtime + node for ng serveFROM microsoft/dotnet:2.2-aspnetcore-runtime AS baseRUN apt-get update \&& apt-get -y upgrade \&& apt-get -y dist-upgrade \&& apt-get install -y gnupg \&& apt-get install -y sudo \&& curl -sL deb.nodesource.com/setup_10.x | sudo -E bash - \&& apt-get install -y nodejs # Builder image - SDK + node for angular buildingFROM microsoft/dotnet:2.2-sdk AS buildRUN apt-get update \&& apt-get -y upgrade \&& apt-get -y dist-upgrade \&& apt-get install -y gnupg \&& apt-get install -y sudo \&& curl -sL deb.nodesource.com/setup_10.x | sudo -E bash - \&& apt-get install -y nodejs WORKDIR /src # Copy only the csproj file(s), as the restore operation can be cached,# only "doing the restore again" if dependencies change.COPY ["./src/KritnerWebsite.Web/KritnerWebsite.Web.csproj", "src/KritnerWebsite.Web/KritnerWebsite.Web.csproj"] # Run the restore on the main csproj fileRUN dotnet restore "src/KritnerWebsite.Web/KritnerWebsite.Web.csproj" # Contains the angular related dependencies, similar to csproj above result is cachable.COPY ["./src/KritnerWebsite.Web/ClientApp/package.json", "src/KritnerWebsite.Web/ClientApp/package.json"] # Install the NPM packagesRUN cd src/KritnerWebsite.Web/ClientApp \&& npm install # Copy the actual files that will need buildingCOPY ["src/KritnerWebsite.Web/", "src/KritnerWebsite.Web"] WORKDIR /src/src/KritnerWebsite.Web # Build the .net source, don't restore (as that is its own cachable layer)RUN dotnet build -c Release -o /app --no-restore FROM build AS publish # Perform a publish on the build code without rebuilding/restoring. Put it in /appRUN dotnet publish -c Release -o /app --no-restore --no-build # The runnable image/codeFROM base AS finalWORKDIR /appCOPY --from=publish /app .ENTRYPOINT ["dotnet", "KritnerWebsite.Web.dll"] Now that the image is built, I can run it like normal to test it out: docker run -d -p 5000:5000 kritner/kritnerwebsite Huh, it actually seems to have worked! :D Now I can push the image up to dockerhub, and pull it down on my server. docker push kritner/kritnerwebsite Now, to see the difference in size between the previous image and the current, I run and am presented with: docker images So we went from a chonky 2.23GB to a cool 417MB, nice! Wrap Up Thanks to GaProgMan for pointing me in the right direction for making my docker image more useful. Code for this post can be found: _Drops final image size from 2.23GB to 417MB :O Closes #9_github.com Reworks `DockerFile` for better multi stage support by Kritner · Pull Request #27 ·… Related: _I’ve used letsencrypt in the past for free certs. I have not successfully utilized it since moving over to…_medium.freecodecamp.org How to setup your website for that sweet, sweet HTTPS with Docker, Nginx, and letsencrypt _The simplest way I can think of to explain a build server is to imagine hiring a brand new developer for each code…_medium.com And it’s like… what’s the deal with build servers? _Drops final image size from 2.23GB to 417MB :O Closes #9_github.com Reworks `DockerFile` for better multi stage support by Kritner · Pull Request #27 ·… _Learn more about the only enterprise-ready container platform that enables IT leaders to cost-effectively build and…_www.docker.com Docker _Read writing about Docker in Hacker Noon. how hackers start their afternoons._hackernoon.com Docker - Hacker Noon

Docker — writing a smaller image with multi stage builds for. NET core.

Hasura and React If you are reading this then it means that you’re probably on your way to know about Hasura and . Well if that’s the case then you just landed at the perfect location. You might be having all sorts of questions like, “What’s ?”, “What’s Hasura?” or more importantly, “Why are we using it?”. Well, fear not everything will be cleared by the time you complete reading this blog. So let’s get started! React graphql This tutorial assumes that you have basic knowledge of React framework. If you are total new to React, I would suggest going through the first before continuing further.The code samples given in as you follow are for main relevant part only, if you intend to copy the code then make sure to import relevant libraries and components also and export the Component created. Otherwise you can take a look at the for this blog. hello world app of React code repository What is Hasura? is a with BaaS components. stands for platform as a service. It allows developers, IT professionals, and business leaders to develop, test, and deploy the next generation of applications in the cloud in a secure, cost-effective manner that speeds time to market and increases competitive advantage. Hasura PaaS PaaS BaaS stands for Backend as a service. It is a model for providing web app and mobile app developers with a way to link their applications to backend cloud storage and APIs exposed by back end applications while also providing features such as user management, push notifications, and integration with social networking services. GraphQL, what is all the fuss about it? GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Hasura’s GraphQL Engine The Hasura GraphQL Engine is an extremely lightweight, high performance product that gives you instant realtime GraphQL APIs on a Postgres database. This can be used to quickly build new applications on Postgres or fast-track the move to GraphQL for existing applications on Postgres.It comes with a UI that lets you create and view tables on your database and make GraphQL queries using the embedded GraphiQL interface. What we will be building We will be creating a simple todo app which lets a user sign up or login and then manage todos by creating them, marking them as complete or deleting them if neccessary. User will also be able to see his all todos. Visit to see a demo of what we will be building. https://reacthasuratodo.herokuapp.com/ Setting up developer environment Hasura GraphQL server node npm or yarn create-react-app Deploy your Hasura GraphQL engine to a server which will be used as an endpoint to make queries. Setting up a Hasura GraphQL takes atmost 1 minute. It can be easily deployed to Heroku via its one click deploy to heroku method. . Give your heroku app a name and click on deploy app.Your Hasura GraphQL UI will be live at appname.herokuapp.com Click here to deploy your Hasura GraphQL Engine to a heroku server Hasura One Click Deploy to Heroku To secure your Hasura graphql server, add an environment variable on Heroku and keep its value to something you can remember. This access key will be asked whenever you try to login on the Hasura Graphql server. HASURA_GRAPHQL_ACCESS_KEY 2. Install node and npm in your system. On a ubuntu based OS: curl-sL | sudo bash -sudo apt install nodejs https://deb.nodesource.com/setup_8.x The above command installs both node and npm in your system. On Windows:Download the relevant package from and install it. here 3. Installing create-react-app (I’ll be using yarn instead of npm) create-react-app is a script developed by Facebook to setup a react app with all the neccessary directory structure and node_modules. Install create-react-app using the following command. yarn global add create-react-app This installs create-react-app globally on your system. Creating a react app Create a new react app using On successful completion of the command, you will see a similar output as in the image. Now open your code editor in the react app directory just created. create-react-app reacthasuratodo Setting up a React app Change your terminal present working directory to react app directory and run . Server will start and you should be able to see a welcome to react screen on . This means your react app is running fine. yarn start http://localhost:3000 Live React app I’ll be using package for the styling so install the package using . Make sure to add the stylesheet in . Complete documentation for react-bootstrap package can be found . react-bootstrap yarn add react-bootstrap /public/index.html here Using auth0 as authentication for the todo app. auth0 is a universal authentication & authorization platform. Including auth0 in your react app includes the following steps:1. Sign up on and create a new application.2. Adding a callback url in auth0 console.3. Creating an Auth class.4. Creating history.js5. Creating a Callback component6. Creating routes7. Changing App.js to include auth urls8. Rendering routes instead of App js. https://auth0.com Sign up on and create a new application for your react app. Provide a relevant name to your auth0 application and headover to settings tab to configure it with your react app.In settings tab under add as it will be the callback url on dev environment after authentication completes. https://auth0.com Allowed Callback Urls http://localhost:3000/callback Now install auth0 in your react app by executing .auth0 has a great written on their website to include auth0 in your react app. yarn add auth0-js react quick start documentation Create a new file in as . We’ll be creating an class which will handle the authentication. src/Auth/ Auth.js Auth Copy your auth0 from your auth0 application and paste it in . If you are following from auth0 docs then make sure to add in function and in function. This will store the user id in local storage. clientID Auth.js localStorage.setItem('sub', authResult.idTokenPayload.sub) setSession() localStorage.removeItem('sub', authResult.idTokenPayload.sub) logout() history.js Create a file and make its content as in image. Also change to include login, logout and home buttons. history.js App.js Auth.js and App.js Create a component which will be shown to user when authorisation is completed.Create a to include different routes on which different components will be shown and a route on which authorisation will take place.The content for all the files can be found on callback.js routes.js auth0 react quick start documentation. Writing queries in GraphQL There are 3 different types of queries in graphql, query, mutation and subscription. GET queries are completed by query while insert, delete and update queries are completed by mutation. Subscription listens to any change in event happening, for instance if a new entry is added to table then through subscription it can be notified. This prevents using a GET query all over again. Create a new table on Hasura API Explorer named . It will have the following fields:1. todo_id: Integer (auto increment)2. todo_text: Text3. todo_mark: Boolean4. todo_user: Text todos todo_id will be the todo number which will automatically increment on every new creation. todo_text will store the text of todo. todo_mark is a field which will be true if the todo has been completed and false in case it hasn’t been completed. todo_user will store the user id of the user logged in. Creating a table on Hasura Add table permissions so that every user can access only its data. Create a new user. role For chose Select as the field, make it to insert with custom checks todo_user _eq X-HASURA-USER-ID For chose and select all columns for access. select with same checks as ---- For chose and give access only to column. update with same checks as ---- todo_mark For chose . delete with same checks as ---- Writing a GET query Writing queries in graphql is easy, specify the table name then the fields you want to be in the response. If you want to do selective search then where and order_by can be provided after the table name specification. A sample query to get all the values in todos table is as follow: query {todos{todo_idtodo_texttodo_marktodo_user}} general format for a query is: query query_name {table_name (where, orderby or pagination expression)]{table fields in response}} Writing a mutation Mutation consists of Insert, Update and Deletions.General format for writing a mutation query is mutation mutation-name {mutation-type_table-name (expressions to identify row and changing data)affected_rows} A simple insert query for todos table will look like this: mutation {insert_todos(objects: [{todo_text: "Complete react app",todo_user: "auth0|20390123821398"}]){affected_rows}} A simple update query for todos table will look like this: mutation {update_todos(where: {todo_id: {_eq: 1}}_set: {todo_mark: true}){affected_rows}} A simple delete query for todos table will look like this: mutation {delete_todos(where: {todo_id: {_eq:1}}){affected_rows}} Now we are ready to create the frontend using react and query the db to create and utilise todos. Coding the frontend using React We’ll be using React Apollo Client to make interact with graphql server and make queries in React. Install apollo client using or . npm install apollo-boost react-apollo graphql --save yarn add apollo-boost react-apollo graphql There will be the following main components:1. One parent component wrapping all the components in apollo provider component.2. GetTodos component to display all the pending todos to the user.3. AddTodos component to add a todo.4. MarkTodo component to mark a todo as completed.5. DeleteTodo component to delete a todo.6. GetAllTodos component to fetch all the todos created till now for a user. The parent component.This component will act as a parent component for all other components, we’ll wrap the child component in an which will enable us to use apollo client to make graphql queries in the complete app. ApolloProvider requires a prop with a object. This allows us to make authorised requests. Import ApolloClient from apollo-boost and ApolloProvider from react-apollo. Create a ApolloClient object as followsTo use user authentication, pass the user access token in the headers as Authorization. This will let the Hasura know which user is sending a request to the graphql server. A separate authentication webhook needs to be deployed to allow token authentication. Deploy the webhook to heroku or any other service. It’s easy to deploy using heroku one click deploy. After that configure the environment variable in your Hasura Server to your deployed webhook url. Use for auth0 authentication. Home.js ApolloProvider client ApolloClient HASURA_GRAPHQL_AUTH_HOOK /auth0/webhook Home.js 2. will fetch all the incomplete todos from the database and display them to the user. This component requires the use of React Apollo’s Query component. We first need to write a graphql query to fetch all the incomplete todos from todos table. The method to write a query remains the same as explained above. In react, you need to enclose that query in . gql is imported from graphql-tag which let the apollo client know that the text enclosed within this text is a graphql query. To keep the code clean, we’ll create a and write all the graphql queries in it. GetTodos gql`` queries.js get incomplete todos query We’ll use this query to fetch all the incomplete todos. In GetTodos component, we’ll be using Apollo’s Query Tag. Create a Apollo Query and pass the graphql query in it as a prop. A function inside the Query component will check for the query’s current state (loading), error if present and the data on completion. The data will have all the todos in it, we’ll just iterate over the data and display the relevant content to the user. There should be an option to mark the todo as completed or delete the todo, so we’ll create those components and render along side the data recevied. Finally after all the todos are rendered we’ll give the user an option to add a new todo, we’ll create an AddTodo component for the same and render it next to the Todos shown to the user. query GetTodos component 3. AddTodo component will be used to send an insert request to the hasura graphql server to add a new todo entry in the database. This component will require the use of graphql’s mutation request and Apollo’s Mutation Component. Query to insert a new todo Here we will be using variables in the mutation query which will be received from Apollo’s Mutation component. This component will consist of a form which will take the todo_text input from the user and send that to the mutation query as a variable. Create a Mutation component and pass the name of graphql query in mutation prop. Inside a mutation is a function with 2 arguments, first one being the type of mutation and second being an optional data. Insert type of mutation requires todo_text and todo_user as a variable. Any extra data to be sent along the query is included in a dictionary. All the variables are included in a dictionary with variable name as key and its value as dictionary. This variable dictionary is assigned to a variables key in the extra data dictionary. Mutation changes the state of the database, this means if we add a new todo to the database then it should be shown to the user in the list of incomplete todos. This is achieved by refetchQueries. refetchQueries is a list of dictionaries with each dictionary containing the name of query to execute on mutation completion. We’ll refetch all the todos whenever a new todo is added to the database. AddTodos Component 4. MarkTodo component will be used to send an update request to the database for a particular todo to change its todo_mark value from to . false true Mutation Query for marking a todo as completed In the MarkTodo component, Create a Mutation component and pass the name of graphql query in mutation prop. MarkTodo component is similar to AddTodos except that AddTodo inserts a new entry while MarkTodo updates an exisiting entry in the database. Pass the id of todo as a variable to update mutation so that the todo_mark value can be changed in the database. Refetch all the todos on mutation completion. MarkTodo Component 5. In the same way as MarkTodo, we’ll create a DeleteTodo component. This will allow a user to delete the todo completely from the database. Everything will be same as in MarkTodo except that we’ll use delete_todos as type of mutation. Query to delete a todo DeleteTodo Component 6. Finally we’ll create a GetAllTodos component to show users all the todos he has created till now. It will consist of both completed and non completed todos. This component will use a GET query on the todos table and we’ll order the todos by most recently created non completed todos first. Using conditional rendering in react we can style the incomplete todos and completed todos differently. GetAllTodos Component and Query Run the server using . Head over to to test your app. yarn start http://localhost:3000 And that’s it, it’s that easy to create a React Todo App with Hasura Graphql Engine. You can extend it to include more features and a better look and feel. Deploy your react app to Heroku or any other hosting service so that everyone over the internet can use it. You can find the source code for this blog here. _A react todo app using Hasura Graphql engine. Contribute to Anupam-dagar/react-Hasura-todo development by creating an…_github.com Anupam-dagar/react-Hasura-todo Keep Coding!!! Useful Resources used while creating the todo app:1. 2. 3. 4. Hasura GraphQL Engine Documentation React Apollo GraphQL Documentation Auth0 React Quickstart Official GraphQL Documentation About Me My name is . I am an undergraduate student at the Indian (A Centre of Excellence in Information Technology established by Ministry of HRD, Govt. of India), pursuing my B.Tech degree in Information Technology. Anupam Dagar Institute of Information Technology, Allahabad I love creating and learning new things when I don’t have an overhead of college assignments. I love to code in and . I am an and currently a in . Python JavaScript opensource contributor GitHub Campus Expert India You can follow me on , and . LinkedIn Twitter GitHub

Building a React Todo App with Hasura GraphQL Engine

How I built a Smart Home Automation System with Angular and Node.js on a Raspberry Pi without relying on any external cloud services in just one week Intro In the last days I spent some nights designing and developing a home automation system based exclusively on JavaScript with the use of Angular and Node.js. And like with any other project — the planning involved some deep research on the internet and it turned out that there are many fishes in the sea —plenty of solutions on how to implement a home automation system, some offer paid services in “the cloud” and others explain how to build your own using a technology called MQTT.None of the solutions made any sense to me — all options were either expensive or some have inconvenient implementations or even security flaws. But before we go any further let’s explain what MQTT is:MQTT stands for MQ Telemetry Transport. It is a publish/subscribe, extremely simple and lightweight messaging protocol, designed for constrained devices and low-bandwidth, high-latency or unreliable networks. The design principles are to minimise network bandwidth and device resource requirements whilst also attempting to ensure reliability and some degree of assurance of delivery. These principles also turn out to make the protocol ideal of the emerging “machine-to-machine” (M2M) or “Internet of Things” world of connected devices, and for mobile applications where bandwidth and battery power are at a premium. —MQTT.org MQTT Publish/Subscribe Architecture Why wasn’t I convinced for using MQTT or by any of the solutions I found on the internet? Two reasons: While the MQTT technology seems very convenient for IoT devices, I still thought it was unnecessary — simply because the system which I will be showing in the following tutorial operates in the same medium where the IoT devices live. Which means that all benefits that MQTT has for being “fast”, “low-bandwidth” become irrelevant — plus all the hassle that is involved in its implementation and all the extra over-head with the additional npm packages that are required for it to work in JavaScript environment. Instead, I will be using generic JavaScript and Node.js libraries only , nothing more! What about the security part? Well I’m not a big fan of “ the cloud” or cloud computing in general, in some cases it can be very beneficial but in most cases it’s just unnecessary. Think about it: why would you have a service that is required for controlling your home appliances to be hosted somewhere else in “the cloud” and not in your own network?! Comic by Geek and Poke One might think that “the cloud” provides the ability to access your home appliances from anywhere in the world via the internet. But think about this: When your home network doesn’t have internet connection “the cloud” becomes redundant, but more importantly: You can still make your home automation system accessible from the internet using using port-forwarding even if it’s hosted on your local network. This is when it “clicked” for me and thought about hosting the whole system on a Raspberry Pi and keeping it in my local network. A Raspberry Pi Model 3 The Technology The reason why I chose Angular and Node.js is because it’s based on JavaScript and I’m already familiar with it. After all, I wanted to design and develop a progressive web app that communicates with my IoT devices via HTTP — and JavaScript offered all the functionality that I needed. Software: While the system works with microcontrollers like the Arduino Uno/Mega/Du/MKR1000, Adafruit HUZZAH CC3000 or any other microcontroller with WiFi connection. I am using the as a base component for my home automation system. It’s a low-cost WiFi microchip with microcontroller capability. It has everything I need and for a cheap price! Lastly, we need to host the system somewhere on our local network — so what’s better than the Raspberry Pi? Hardware: ESP8266 This won’t be a coding tutorial where I dive deep into coding since this project is open-source and I will be publishing everything on GitHub. I will only demonstrate how to implement your own home automation system and will be going through each step. If you’re a developer please the repository and get involved in improving it. fork The Setup I estimate that it will take about 40 minutes to finish this whole setup plus minus any time spent online searching for solutions for installation errors. **What is needed?**For this to work a Raspberry Pi si required. In my example I’m using a Raspberry Pi 3, but it should work with most versions. Raspberry Pi board MicroSD card (A class 10 with 16 GB or higher is recommended) A USB MicroSD card reader or SD card adapter HDMI monitor and a USB keyboard (only required temporarily for the first boot of the Raspberry Pi) Ethernet cable (Not needed for Raspberry Pi 3 as it has built in WiFi) Installing Raspbian OS on the Raspberry Pi Raspbian is a free operating system based on Debian Linux, and it is optimized for Raspberry Pi. I recommend the headless “LITE” version. It has no desktop environment or any graphical user interface and it’s remotely accessible from a computer or device on the same network via SSH. Keeping things simple since this is the only way we are going to access the Raspberry Pi and the LITE version has all the functionality we’re looking for. Download Raspbian image from the official Raspberry Pi website. the latest Flash the Raspbian OS image to the SD card with or any other OS image burning software of your choice. Etcher Setting up The Raspberry Pi To get the Raspberry Pi ready to boot we need to: Insert the MicroSD card into the Raspberry Pi Connect the USB keyboard and the HDMI cable Connect the Ethernet cable or if you have a Raspberry Pi 3 and want to use WiFi you should set up the network in the next section When the Raspberry Pi has finished booting up, log in using username: pi and password: raspberry Enabling WiFi and Connecting to the Network Skip this step if you chose to connect with an Ethernet cable. Open the configuration file wpa-supplicant $ sudo nano /etc/wpa_supplicant/wpa_supplicant.conf add the following at the bottom of the file while adding your wifi name and password: 2. network={

   ssid="your_networks_name"
   psk="your_networks_password"

} Press Ctrl+X to save the code. Confirm with Ythen Enter 3. Reboot the Raspberry Pi with the following command: 4. $ sudo reboot Enabling SSH and Changing the Username and Password Now that the Raspberry Pi is connected to the internet, it’s recommended to change the default password. Open the Raspberry Pi configuration tool and click the second option “Change User Password” and follow the instructions $ sudo raspi-config Select option 5 “Interfacing Options” then activate SSH 2. Reboot the Raspberry Pi. When it’s up, you have SSH enabled and it’s ready to be accessed remotely from your desktop computer 3. $ sudo reboot Configuring remote access to the Raspberry Pi Now finally the part when we install the required software on the Raspberry Pi. This part can be executed directly on the Pi through the terminal using a HDMI monitor and a USB keyboard, but for convenience — and since we enable remote SSH connection, we’re going to connect from another desktop environment. This is the best and easiest way to remotely access and control the Pi whenever changes and configurations are needed. So basically this is how you can access the command line interface of a Raspberry Pi remotely from another computer or any device on the same network using SSH. This can be done in two ways: Using the Command Prompt or PowerShell (I’m using Windows on a Desktop computer) replace with your username and IP address $ ssh username@ipaddress If you do not know the IP address, type “hostname -I" in the Raspberry Pi command line. The second method by using a client program like or any functioning client SSH software. Here’s a on how to do it 2. PuTTY other guide Installing the required Software on the Raspberry Pi Before installing anything, it’s recommended to update the Raspberry Pi’s operating system and packages. Doing this regularly will keep it up to date. Update the system packages list using the following command $ sudo apt-get update Upgrade all your installed packages to their latest version 2. $ sudo apt-get dist-upgrade Download and install the latest version of Node.js 3. // To download
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

// To install
$ sudo apt-get install -y nodejs

// Check if the installation was successful:
$ node -v Install the Git version-control system 4. $ sudo apt-get install git Check the current work directory using this command 5. $ pwd

/* It will probably print "/home/pi"
   "pi" is the user directory     */ It’s recommended to clone the project’s repository under the user directory but you can navigate somewhere else if you’re sure. Clone the repository from 6. $ git clone https://github.com/ameer157/smarthaus.git Make sure to navigate inside the directory using $ cd smarthaus Now before installing any npm packages using “npm install” please visit the following and change npm’s default directory. This is very important since it will prevent any npm permission errors and allows you to install packages globally without using sudo. Using sudo with npm is not recommended and . link should be avoided Install all the required packages for the project 7. $ npm install It’s recommended to install the Angular CLI globally using: $ npm install -g @angular/cli Starting the Node.js Server Before starting the server we need to build the project using the Angular CLI tool. And lastly, we configure the Raspberry Pi so that it runs the server whenever it boots up. Build the project using $ ng build --prod Edit the rc.local file using nano 2. $ sudo nano /etc/rc.local Add the following on the line before “exit o” then exit and save the file 3. $ su pi -c 'node /home/pi/smarthaus/server.js < /dev/null &' The Node.js server is now ready. It will run on every system boot up. Let’s run it now and see if it works using this command: $ sudo node server The system in now accessible from any device on your network via the Raspberry Pi’s IP address. You can make it accessible from the internet using port forwarding, but it’s not recommended to implement this feature now since the system is still in development and doesn’t have a user login system. Please go ahead and this project and get involved in developing the missing parts 👍 fork The End We got ourselves a working home automation system running safely on a Raspberry Pi in our local network without the use of “the cloud” or somebody else’s’ server. Real-time device status synchronization Adding a new device synchronising data on-demand Fun Facts My Raspberry Pi sitting next to my and router in the living room 😍 Fingbox Rick and Morty providing tech support 🛸👽 I hope you enjoyed reading,Please and for more tech stuff 🤖💖 follow share

The Most Robust and Secure Home Automation System

…because who wouldn’t want a Serverless GraphQL server, right !? If you have mucked around with , Serverless and love — you’ve come to the right place. What’s better than mixing a few of the most exciting technologies in recent times, not much, eh. GraphQL JavaScript Continuing in our journey, and further building on a previous post, where we’ve explored let’s now turn our focus towards GraphQL and marry it with Serverless. And, in doing so, eliminate the need to have a continuously running GraphQL instance, an ops dream. Serverless Rendering and serving a Create-React-App from an Express server running within a Lambda function — We will be using functions along with the for our server. Our Lambdas will run the Node.JS 8.1 runtime. We will also make use of for all it’s bundling goodness and to transpile our pile. AWS Lambda Serverless Framework Webpack Babel In order to get our Serverless GraphQL server up and running we will need to: Setup a Serverless Create and Express App Pull in and configure Apollo Server Right, let’s get started! Serverless + Webpack First thing’s first, install the Serverless framework and all the necessary dependencies it’ll need: $ npm i -S serverless serverless-webpack serverless-http serverless-offline We will also need to install Webpack, node-externals packages, and babel-loader. Next create a config file for Webpack: $ npm i -D webpack webpack-node-externals babel-loader$ touch webpack.config.js and place the following, basic config in it: // webpack.config.js const path = require("path");const slsw = require("serverless-webpack");const nodeExternals = require("webpack-node-externals"); module.exports = {entry: slsw.lib.entries,target: "node",mode: slsw.lib.webpack.isLocal ? "development" : "production",optimization: {minimize: false},performance: {hints: false},devtool: "nosources-source-map",externals: [nodeExternals()],module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [{loader: "babel-loader"}]}]},output: {libraryTarget: "commonjs2",path: path.join(__dirname, ".webpack"),filename: "[name].js",sourceMapFilename: "[file].map"}}; You can find more information about the serverless-webpack plugin . here Next we’re going to need to create and configure our file: serverless.yml $ touch serverless.yml Place the following YML in it: // serverless.yml service: serverless-graphql plugins: serverless-webpack serverless-offline custom:webpack:webpackConfig: ./webpack.config.jsincludeModules: true provider:name: awsruntime: nodejs8.10stage: devregion: eu-west-1 We will add and configure our functions next. Express + Apollo Server Right, let’s move on to our server. We will need to install Express, Apollo Server and a few other dependencies: $ npm i -S express apollo-server-express graphql We’re also going to use the to test our fancy server. Let’s install the necessary packages: Prisma GraphQL playground $ npm i -D graphql-playground-middleware-express Create an file which will contain our server code as well as be our entry point: index.js $ touch index.js Place the following code in it: // index.js import express from "express";import serverless from "serverless-http";import graphiql from "graphql-playground-middleware-express";import { ApolloServer, gql } from "apollo-server-express"; const typeDefs = gql`type Query {hello: String}`; const resolvers = {Query: {hello: () => "world"}}; const app = express(); const server = new ApolloServer({typeDefs,resolvers,path: "/graphql"}); server.applyMiddleware({ app }); app.get("/playground", graphiql({ endpoint: "/graphql" })); const handler = serverless(app); export { handler }; Right, our has been setup to accommodate two lambda functions, one for the GraphQL Apollo Server and the other for the Playground. Update the file and add the two functions we need: index.js serverless.yml // serverless.yml functions:graphql:handler: index.handlerevents:- http:path: graphqlmethod: postcors: trueplayground:handler: index.handlerevents:- http:path: playgroundmethod: get …and with that, we’ve pretty much concluded the setup. Let’s give our GraphQL Apollo Server a test! Recall, earlier, we added as a dependency, let’s go ahead and startup our server offline: serverless-offline $ npx sls offline start This will start a local instance of our server. You should see the following output: Running our GraphQL server for the first time! You’ll notice that our two endpoints will be created, being our GraphQL server endpoint and our playground at .To test our server, let’s navigate to our playground, /graphql /playground http://localhost:3000/playground Execute a simple query, and behold the magic of a Serverless GraphQL server…😎 Our Serverless GraphQL server in all it’s glory 😎 — Finally In a few simple steps, we’ve created a simple Express and GraphQL server on AWS Lambda. To deploy our server, all we need to do now, is run: $ npx sls deploy -v Hook up your server to your too and you’ve got yourself quite a flexible Serverless solution. This concludes our little attempt at marrying Serverless and GraphQL — two of the hottest technologies in the scene right now. React frontend, server-side rendered from a Lambda You can find the code for this post at: https://github.com/FBI23/serverless-express-graphql

Create a Serverless GraphQL server using Express, Apollo Server and AWS Lambda

In the last few weeks, we’ve taken a good look at GHC. by looking at the steps we would need to prepare our local machine for GHC development. This was an especially difficult process on Windows, so we focused there. After that, we looked at the basic way of for ourselves. We validated that by changing an error message and seeing how it appeared in the compiler. , we made some more complicated changes. This week, we’re going to wrap this series up by looking at some basic ways of making contributions. We started creating a development cycle Last week Documentation Documentation is a tricky thing on any software project. At any given moment, most of the effort is going into making sure the program works as it ought to. When you understand the code already, you don’t need to look at the documentation. So the temptation is to not change any of the comments. This means documentation is always likely to fall out of date. Haskell, if anything, is more prone to this kind of lapse. We look for issues by making changes, compiling, and seeing what breaks. And documentation never breaks! Experienced developers will remember to change documentation more. Still though, it’s inevitable that something will slip through the cracks. But there’s good news for us as newcomers to the GHC code base! We’re in the best position to find holes in the documentation, since we’re the ones who need to read it most! This is how I found the first contribution I could make. While exploring the lexing types, I found a comment that didn’t quite make sense. At the top of , it states: compiler/basicTypes/BasicTypes.hs -- There is considerable overlap between the logic here and the logic-- in Lexer.x, but sadly there seems to be way to merge them. That doesn’t quite read right. From the context, it seems pretty clear that the author intended to write “there seems to be way to merge them”. Great, so let’s submit a pull request for this! We’ll fork the repository and open a pull request. So we’ll create , clone the repo, open a new branch, and open a pull request against master. no our fork Now there’s a somewhat annoying issue with the fact that the CI builds don’t actually seem to be passing right now. But hopefully will get merged in at some point. this PR Issue Tracking with Trac Of course, there are also much more complicated issues at stake with GHC. There’s the real features we want to add to the codebase, and the bugs we want to fix! To take a look at what’s going on there, you’ll need to look at the . GHC uses Trac for this, and you can observe all the issues on that list. They have labels based on what release they’re for, and how important they are. issue tracker It can be quite an overwhelming list. I scrolled through many different tickets and wasn’t sure what I could actually help with. So how can you find something to start out with? First, you can subscribe to the GHC devs mailing list. Conversations there will help you find what people are working on. Second, you can log onto and get onto the channel. You can ask anyone what’s going on and where you might help. Luckily, there is also a tag for “newcomers” on the list of issues. These are issues that the GHC devs have highlighted should be easy for people new to the codebase. Let’s take a look at one of these issues. Freenode #ghc Looking at a Real Issue: Infix Patterns From this hunt, I found , related to the infix value of . The ticket claims that the stated infix level of 0 for the arrow operator is actually incorrect. Let’s take a look at what they mean. this ticket (->) As a reminder, the infix level states an operator’s priority when determining order of operations. For instance, the multiplication operator has a higher infix level than the addition operator . We can confirm this information with a quick ghci session by using the command on each of these. (*) (+) :info >> :i (+)…infixl 6 +>> :i (*)…infixl 7 *>> 5 + 2 * 311 -- Would be 21 if addition were higher precedence Now, when two operators have the same infix level, then we refer to the direction of the infix level. As an example, we can compare subtraction to addition. We’ll find it’s also . Since it’s (as opposed to ), we give the left side operation priority. Here’s an example. infixl 6 infixl infixr >> :i (-)…infixl 6 ->> 5 - 2 + 1821 -- Not (-15) So let’s look at our arrow operator, which we use when defining our type signatures: >> :i (->)data (->) (a :: TYPE q) (b :: TYPE r) -- Defined . `GHC.Prim`infixr 0 `(->)`... This suggests an infix level of 0 for this operator, and that we should prioritize things on the right. However, the person filing the bug suggests the following code: {-# LANGUAGE TypeOperators #-}

module Bug where

import Data.Type.Equality

type (~>) = (->)infixr 0 ~>

f :: (a ~> b -> c) :~: (a ~> (b -> c))f = Refl There’s a lot going on here with some higher level concepts, so let’s break it all down. First, is a type operator, meaning that it itself is actually a type. Thus we can create a type synonym for it called . Then we can assign this new operator to have whatever infix level we like. In this case, we’ll choose the same stated infix level as we have for the original operator, . (->) (~>) infixr 0 The next part creates an expression . Its type signature uses the operator for relational equality between types. This type has the constructor. The only thing you need to understand is that each of our arrow patterns ( and ) is a type. And this code should if those types are the same. f (:~:) Refl (a ~> b -> c) (a ~> (b -> c)) only compile And on the face of it, these types be the same. After all, both operators purport to be , meaning the way we parenthesize it on the right side of should match how it is naturally ordered. But the code should infixr 0 (:~:) does not compile! >> ghci>> :l Bug.hsBug.hs:11:5: error:    * Couldn’t match type `a` with `a ~> b`      `a` is a rigid type variable bound by        f :: forall a b c. ((a ~> b) -> c) :~: (a ~> ( b -> c))        At Bug.hs:10:1-38      Expected type: ((a ~> b) -> c) :~: (a ~> (b -> c))        Actual type: ((a ~> b) -> c) :~: ((a ~> b) -> c)    * In the expression: Refl      In an equation for `f’: f = Refl    * Relevant bindings include      f :: ((a ~> b) -> c) :~: (a ~> (b -> c))        (bound at Bug.hs:11:1)   |11 | f = Refl   | We can see on the “Actual type” line how the compiler interprets . It gives priority to the left, not the right. Indeed, if we change the type signature to reflect priority given to , our code will compile: (a ~> b -> c) (~>) f :: (a ~> b -> c) :~: ((a ~> b) -> c)f = Refl…>> ghci>> :l Bug.hsOk, one module loaded. The Fix The fix, luckily for us, has already is already proposed in the ticket. The compiler represents the infix level of our operators using the type. We can see a particular location where we’ve defined the level for some of our built-in operators: Fixity negateFixity, funTyFixity :: FixitynegateFixity = Fixity NoSourceText 6 InfixL -- Fixity of unary negatefunTyFixity = Fixity NoSourceText 0 InfixR -- Fixity of `->` We want to change the fixity of the function type operator. Instead of it appearing to be 0, we should make it appear to be , showing the lower precedence of this operator. Note this code refers to our we report it. The actual reasons why it ends up having lower priority are more complicated. But let’s make that change: -1 funTyFixity = Fixity NoSourceText (-1) InfixR Testing Our Change This seems like it should be a simple change to test. First, we’ll our code again. Then we’ll boot up GHCI and ask for info on . But this doesn’t appear to work when we try it! make (->) > make> ghci...>> :i (->)data (->) (a :: TYPE q) (b :: TYPE r) -- Defined . `GHC.Prim`infixr 0 `(->)`... The issue here is that re-making does not cause GHCI to use our new locally built version of GHC. Even when using from within the directory, it still doesn’t account for this change. The way around this is that instead of using , we can pass the flag to a normal call to . So we’ll want something like this: ghci.exe ghc/inplace/bin ghci --interactive ghc ~/ghc/inplace/bin/ghc-stage2.exe -o prog --interactive Main.hs This will bring up a GHCI prompt that loads our main module. And now when we go ahead and get info, we’ll see that it works! > ~/ghc/inplace/bin/ghc-stage2.exe -o prog --interactive Main.hs...>> :i (->)data (->) (a :: TYPE q) (b :: TYPE r) -- Defined . `GHC.Prim`infixr -1 `(->)`... So I’ll now make a simple pull request addressing this bug. You can follow the progress . I’ll update this post as it moves further along in the process. here Conclusion This wraps up our series on contributing to GHC! There are a lot of bugs out there, so don’t be afraid to take a look at anything labeled as . Just make sure to take a look at the discussion that’s occurred already on the ticket! newcomer To learn more about Haskell, you can read our (for beginners) or our if you’re already familiar with the language. You can also download our to get started! Or you can look at our if you want some ideas for more advanced projects. Liftoff Series Haskell Web Series Haskell Beginners Checklist Production Checklist

Contributing to GHC 4: Real Issues

, a hosting provider beloved by developers, provides a highly intuitive interface for deploying and managing application infrastructure. In this tutorial I’m going to show you how to install and deploy a app on Digital Ocean. In just a few commands, and a few minutes, you’ll be up and running with a Cosmic-powered app on a scalable Digital Ocean Droplet, ready for team collaboration. Digital Ocean Cosmic-powered Nuxt.js Getting Started To get started, let’s go over what we will be installing on our Digital Ocean Droplet. We will be installing: 1. 2. 3. 4. Node.js The Cosmic CLI Nuxt.js Website Boilerplate Nginx Creating the Droplet Go to to login / signup. After logging in, create a new droplet. I recommend the Ubuntu with 2GB Memory. Then click “Create”. https://www.digitalocean.com Set up your Droplet After creating your Droplet, you should have received an email with your SSH login and password instructions. Login to your server using your command line tool of choice with the information that was sent to you. SSH into your Droplet ssh root@your-droplet-ipEnter your password: the-password-they-emailed-to-you Now that you’re logged in to your Droplet, start by installing with the following commands: Install Node.js Node.js version 10 curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -sudo apt-get install -y nodejs Check that Node.js is installed: nodejs -v # this should output v10.x.x **Install the Cosmic CLI**If you haven’t already, . create your free Cosmic JS account Now you can install the , which is a powerful tool to help you scaffold new projects and execute actions in your Cosmic JS account. Cosmic CLI npm i -g cosmic-cli Next, we’ll need to login to Cosmic JS via the CLI. Enter your email and password after logging in with the following command: Login and install the App cosmic login If you go to the , you’ll notice there is a single command to install this application. Run this command: Nuxt.js Website Boilerplate App page cosmic install-app nuxtjs-website-boilerplate You will then be prompted to create a new Bucket or select an existing Bucket. Select “Create New Bucket” and add a Title for your Bucket. At this point, a couple things will happen: Example content will be imported to your newly created Bucket and the Nuxt.js app code will be downloaded to your Digital Ocean Droplet. Then you’ll see the status of the install: Success!App code located at /root/nuxtjs-website-boilerplate Run this command to start the app: cosmic start-app Once you see the status “OPEN ", your app is built and you can go to your Droplet IP on port 3000 to view your app. (See screenshot below to find your Droplet IP address). http://localhost:3000 So looking at the above screenshot, I’ll go to and I’ll see the app: http://167.99.234.7:3000 Now that we have our app installed, let’s install . Nginx will make it possible to run our app on port 80 (which is the port assigned to websites running on a domain on http). This will allow us to view the app on just the IP address (no port) and point a domain to the IP. Install Nginx Nginx Stop your running app (Control+C) and run the following command to install Nginx: sudo apt-get install -y nginx Next, let’s configure Nginx to run a proxy from port 80 to port 3000: sudo rm /etc/nginx/sites-enabled/defaultsudo vim /etc/nginx/sites-available/ cosmicjs And edit this file to look like this: exactly server {    listen 80;    server_name example.com;    location / {        proxy_set_header   X-Forwarded-For $remote_addr;        proxy_set_header   Host $http_host;        proxy_pass         "http://127.0.0.1:3000";    }} Notice we set the proxy_pass to port 3000, this allows Nginx to act as a reverse proxy by forwarding all incoming requests on port 80 to your Node.js app on port 3000. Next, we need to symlink our configuration to for it to be used by Nginx, since it's currently in : sites-enabled sites-available sudo ln -s /etc/nginx/sites-available/cosmicjs /etc/nginx/sites-enabled/cosmicjs Restart Nginx Now we need to restart Nginx to apply the changes: sudo service nginx restart Now run the start command again: cosmic start-app Once the app starts, go to your IP address (without the port number) and you should see your application running cleanly without the port number in the URL. At this point, you may want to run this process in the background. For this, is a great solution. PM2 When you’re ready to add a domain to your website, you’ll need to do two things: Add your Domain 1. Go to your Domain Registrar and add the IP address to your A Name Records.2. Add your domain to your Nginx config from above (server_name), then restart Nginx, and your website is LIVE! To invite team members to help manage content, login to Cosmic JS and go to Your Bucket > Users. OR run the following command to invite team members via the Cosmic CLI! Invite Team Members cosmic add-user --email someone@myteam.com --role editor Conclusion Digital Ocean is an intuitive application hosting service provider that makes spinning up servers fast and easy. With the tools that come with Cosmic JS, you can have a website connected to a CMS, launched on Digital Ocean, ready to share with your team members in a matter of minutes. If you have any questions about , join the conversation and reach out to us on . Looking forward to seeing what you build! Cosmic-powered apps on Slack Twitter This article originally appears on . the Cosmic JS website

Install a Cosmic-powered Nuxt.js App on Digital Ocean in 5 minutes

While deploying an app recently, I experienced many frustrations with the various nuances that accompany deployment, most of which were made even more difficult by the lack of centralized information about it online. Of course, this is a result of the many ways that deployment can be done (meaning that this guide is only one way to do things). This guide is designed to be a start to finish guide for someone creating a single page application using , with every important detail. We’ll serve it with as a reverse proxy (and explain you want to do this), as a process manager, and to actually handle the serving of the app. Most of the concepts here with regards to setting up your server are transferrable to the platform once you have shell access to your server. The concepts here can also be utilized for other SPAs, an Express.js based server, etc. React DigitalOcean NGINX why PM2 Serve DigitalOcean AWS EC2 This guide will assume you already have a DigitalOcean account and have pointed your domain name registrar’s name servers to DigitalOcean. For info on changing your name servers, check out this article from DigitalOcean: How to Point to DigitalOcean Nameservers From Common Domain Registrars If you don’t already have an account, here’s a mutually beneficial referral link to get you started with a $10 credit (enough for about 2 months of server time for their cheapest server) . Step 1: Create a Droplet Droplets are DigitalOcean’s cleverly named servers. We’re going to create one. Click the big green create button at the top of the screen. Distributions DigitalOcean is known for having ‘One-click apps’ that come shipped with everything you need, but for the sake of explicitly adding what we need, we’ll start with an empty distribution. There are multiple options as far as distributions. Ubuntu is pretty common, and I like it, so we’ll go with that! Currently, there is a new LTS version on the horizon — 17.10 — but we’re going to stick with 16.04 since that’s what I’m used to working with. Size, Location, Options You don’t need much power for a simple React app that’s meant to serve as a portfolio or starting point for your deployment endeavors. For our purposes, I’ll select the $5 1GB / 1 vCPU / 25GB SSD / 1TB transfer option. For location, pick whatever is closest to you or wherever you expect your users to be. There are some really awesome options you have available, such as private networking (e.g. a server that can only communicate with your other DO servers) and weekly backups, but we don’t need that for now. SSH Keys This one is really important! SSH (or Secure SHell) is essential for direct networking with your server in a safe way. Other articles cover this, but there’s room for confusion that we should avoid. First, check if you have existing SSH keys. If you are a programmer, you’ve probably encountered this or at the very least already have one. To do this, open up Command Prompt / Terminal and enter . This command is listing everything in the directory within your home directory (which you may not see, since it’s hidden by default), with the flag showing all files (meaning, the hidden ones with your normal not-hidden ones) and displaying more information about each subdirectory within it. If you have a pair of keys already, they’ll likely be called and . If so, you can skip down a paragraph. ls -al ~/.ssh .ssh -a -l id_rsa id_rsa.pub You’ll get some fancy art when you make your key. If you don’t have an SSH key, we’ll need to create a new one. Create it using the command . Follow the prompts — you’ll need to specify the file (leave it as the default option by leaving your response blank) and a passphrase (leave it blank again if you’d like). For more details on this process, . ssh-keygen -t rsa id_rsa check out this other handy DigitalOcean article Now that you have your SSH key, and open up . This is your public key, meaning the key that services can use to verify you are you when connecting. is a PRIVATE key — don’t pass this one out. Copy the contents of the entire file, go back to your DigitalOcean ‘Create Droplet’ tab in your browser, click ‘New SSH Key’ under ‘Add Your SSH Keys’, and paste it in there. Name the key something related to your computer, so you can identify where the key is held if needed. cd ~/.ssh id_rsa.pub id_rsa id_rsa.pub You can now name your droplet! It’s probably best to name them after what you plan on calling the website, since if you deploy more it could start to get confusing. Hit the big green ‘CREATE’ button again! Step 2: Setting up the Droplet After a minute from hitting ‘CREATE’, your droplet should be ready. Head over to the droplets section of DigitalOcean, where you’ll find a list of your droplets. Copy the IP address next to your droplet’s name on the list. Since you included an SSH key, we won’t need a password from your email or anything to login! Connecting Via SSH Back to your command prompt / terminal. To connect to the server over SSH, we’ll use the ssh command (duh!), and specify the user on the account at IP address provided. Since we’re starting out as , the command will look like this: . There will likely be a security prompt to ensure you want to continue (yes, you do), and a password if you specified one when creating the SSH key, but that’s it. And like that, you’re in! You’ll know it when your prompt changes to reflect the user and server that you’re on, e.g. . root ssh root@[YOUR IP HERE] root@[SERVER NAME] Changing the Default User A major point of security when setting up a server is to change the user with which you’re connecting. In the same way that one should be explicit in their code to minimize erratic outcomes, one should be explicit in user privileges granted. The account you’re logged in as will be the account that your applications use, meaning if anything were compromised, your entire system would be in jeopardy as a result. It doesn’t take much more than a `rm -rf` with too large of a scope to destroy your server. In our SSH connection to our server, lets create a new user now: . You’ll be prompted for a password and some other information that isn’t really necessary. We also want to make sure this user has access to the group — meaning the powers of — when necessary. To do this, we’ll do the following: . adduser [USERNAME] (do this) sudo root usermod -aG sudo [USERNAME] here is the command used to modify user accounts and privileges usermod The flag means append / add, meaning. This can only be used with , which… -a -G enables you to select which group you’re adding the user to. -G is the group AND level of privileges! (Fun fact — comes from ‘super user do’) sudo sudo If you did it correctly, you should be able to prepend to any command to run it with root privileges! Let’s test it quickly. Switch over to your new user using and try . You don’t need root powers to do this, but it’ll prompt you for your password, which is an indication that you did it correctly. If you’re not able to access it, try this process again. sudo su [USERNAME] sudo echo ‘Hello!' Setting Up SSH For the New User We also want to be able to SSH into this user, instead of having to go through . Let’s set this user up for that. Logged in as the new user, enter the following commands: root — to get back to your home directory. cd ~ — Making the directory for SSH, hidden as a result of the `.` prefix mkdir .ssh — Creating the file with which your public key will be stored, so the user can recognize you. touch .ssh/authorized_keys — Changing permissions of the directory; it’s hidden from others, but you still have access. chmod 700 .ssh — Changing permissions of the file; it can be read by all, but only changed by the current user. chmod 644 .ssh/authorized_keys That was a lot! But we still have the most important step left: adding your public SSH key. Hopefully you still have your `id_rsa.pub` file’s contents still copied into your clipboard, but if not, go back to your computer and copy it. Now, we’ll edit the file the file with VIM! VIM is intimidating to me as a relatively new programmer, but once you know a few of the basic commands, it’s actually quite convenient. Let’s use the following command to edit your authorized keys from your home directory on your server: . vim .ssh/authorized_keys WARNING: I’m no VIM expert, so I’m probably using it inefficiently. Don’t hate me! It works. Currently, we are just viewing the file. To edit it, we’ll press . Now, paste in your key. Next, we can use to exit insert mode. Next, enter to write (save) your file and quit it (on their own, handles the writing and handles the quitting). SSH is all set! This user will recognize you when you use your private key to SSH into it. .ssh/authorized_keys i [CTRL]+ [ :wq :w :q Now that we have our new user setup, there’s no reason for us to be working with ! Enter into your terminal to exit the SSH prompt. , let’s log in with your new username to your server via SSH! It’s similar to before, but instead of , we’ll use your new username: . root exit Now root ssh [USERNAME]@[IP ADDRESS] Installing Environment Dependencies We’ll need to install node to get working with our React app. The following will do the job to get the latest version of Node at the time of writing, 9.10, running. This is the latest version, not the LTS release, so make sure this is OK for you before proceeding. This article goes more in depth about install options via package managers and other versions. curl -sL [https://deb.nodesource.com/setup_9.x](https://deb.nodesource.com/setup_9.x) | sudo -E bash - sudo apt-get install -y nodejs sudo apt-get install -y build-essential This installs Node, npm, and the build tools that come in handy for npm. Now would be a good time to install any other dependencies you may need for your app, but for a vanilla React app, you’re probably fine with this. Once Node & npm are installed, we’re going to need to install two tools: — installs PM2, aka Process Manager. If the name didn’t tip you off, it’s going to help us handle running our app in the background of your server. npm i -g pm2 — installs Serve, a very handy app that serves up a single page on a server. Since single page apps are only on one page and modify that page, this works for React. npm i -g serve Step 3: Setting Up Your React App On Your Server From here on, it should be smooth sailing since the rest is stuff you’ve probably already encountered in your day to day! You’re going to need to clone your React app to the server from Github. If you used to bootstrap this project, you can run to package your assets into a minified version that will be more efficient for production. This will create a folder in the root directory of your project. create-react-app npm run build build Now, for the main event! Run . Here, PM2 will use Serve to display your webpage. I believe the default port that Serve uses is 5000, so you should be able to see your project running at . If it’s not working, check — it will let you know what the status of all of your processes are, how many restarts each process has had, etc. While you’re at it, get familiar with the PM2 command line arguments — it’ll come in handy when it comes to managing your app. pm2 serve build [YOUR PUBLIC IP ADDRESS]:5000 pm2 list If it is working, great! We have just a little more work to do. Step 4: Setting Up A Reverse Proxy with NGINX Before we get started with the how, here’s the why: A reverse proxy is a buffer between your server and the rest of the internet, your standard firewall. Think of it like this — instead of talking to various resources around your server, there is an intermediary that checks every request, gets the information requested from the server, and sends it back out. In our case, we have PM2/Serve putting up your webpage on port 5000 (or whatever it is on your computer). Instead of exposing that port, your app stays guarded and unexposed behind this buffer. in addition to The use of PM2 to serve the site isn’t explicitly necessary. Another option would be to use NGINX to serve the static files. But I wanted to do this 😁. Let’s make sure you have NGINX installed: . sudo apt-get install nginx NGINX is a service that works in tandem with the default Ubuntu firewall, which can be accessed with . It should show up if you type . There should be 3 options: ufw ufw app list — Enables both ports 22 and 88 for HTTP and HTTPS access, respectively. Nginx-Full — Enables port 22 for HTTP only. Nginx-HTTP — Enables port 80 & HTTPS only. Nginx-HTTPS Installing an SSL certificate and setting up HTTPS is out of the scope of this post, Anyway, enable whichever one is appropriate for you. We’ll assume you just want to get going, so use to allow as few ports as necessary. but feel free to check out this solid DigitalOcean post on it. sudo ufw allow 'Nginx HTTP’ Next, we need to setup the configuration of your NGINX service. Using should get you to a directory with a file in it. to open this file in VIM. Don’t forget: to insert, to get out of insert mode, to write/save your file, and to exit. cd /etc/nginx/sites-enabled default vim default i [CTRL] + [ :w :x You’re going to want to copy and paste everything I’ve listed in the block below to your file, but there’s a couple of things we need to personalize. ALMOST default — Call it whatever you want to refer to your whole server as. server_name — This can be named whatever as well, but it’s probably best to name it after the app you’re pointing it to. Make sure that the port address is correct — you want to point to your local port that your app is running on. The upstream itself is exactly as it sounds — one of your apps that live ‘upstream’ from your proxy, and is guarded as a result. upstream — You’re going to pass in the name of your upstream here, since it’s essentially forwarding all requests here at the moment. proxy_pass upstream { server ; keepalive 64;} my_nodejs_upstream 127.0.0.1:5000 server { listen 80; server_name ; root project_root;  location / { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection “upgrade”; proxy_max_temp_file_size 0; proxy_pass ; proxy_redirect off; proxy_read_timeout 240s; }} my_nodejs_server http:// / my_nodejs_upstream Once you’ve updated this file to look like this, you’re at the finish line! Now cross it. /etc/nginx/sites-enabled/default Enter to make sure the default firewall is enabled. Then, to get NGINX running. Once more, your app should be accessible from your IP address, except you won’t need to specify a port. Specifying a port shouldn’t get you anything. sudo ufw enable sudo service nginx start Congratulations, and thanks for sticking through this tutorial! Your app is now fully functional once more. It should be accessible via the IP address, as well as through your domain name if you setup your name servers correctly! If you see any errors or typos, or just generally want to get into contact, hit me up!

Start to Finish: Deploying a React App on DigitalOcean

Sections: Intro / requirements Packet forwarding setup Building and c-lightning bitcoin-cli Installing Lightning Charge Installing for a point-of-sale solution nanopos The Inverse Path USB Armory is a unique device among the now-popularized SoC-powered category of hardware, which includes the Raspberry Pi and the Rock64. Like the other systems, it is relatively underpowered in terms of computing ability. However, its uniqueness comes from its compact form factor and its components. The Armory requires no power adapter or wall socket; it only needs a USB port to plug into to function. The Armory powers itself via USB and also communicates to its host device in the same manner — via an emulated Ethernet connection. The Armory utilizes the NXP i.MX53 ARM® Cortex™-A8 processor running at 800 Mhz. It also includes 512 MB of DDR3 RAM and a microSD card slot for storage. The USB armory board has been created by Inverse Path to support the development of a variety of security applications. The capability of emulating arbitrary USB devices in combination with the i.MX53 SoC speed, the security features and the flexible and fully customizable operating environment, makes the USB armory the ideal platform for all kinds of personal security applications. The transparency of the open and minimal design for the USB armory hardware facilitates auditability and greatly limits the potentiality and scope of supply chain attacks. From: https://inversepath.com/usbarmory A good use case that takes advantage of the form factor, the power-over-USB, and the emulated Ethernet-over-USB is a portable Bitcoin Lightning wallet. With this configuration, users can setup a device that runs and stores their private keys on a portable platform that is easily plugged into existing hardware such as Raspberry Pis that run . Also, another scenario is if a user has a laptop they run a full node on. The Armory can simply be plugged in and the user can then transact over the Lightning Network and run Lightning-powered applications (LApps). c-lightning bitcoind Another use case for this setup is for adding processing power to an underpowered device such an older laptop or Raspberry Pi. This way, the Armory acts as a sort of co-processor for Lightning! An Armory connected to a Rock64 Requirements: An Inverse Path USB Armory microSD card of 4GB or greater capacity with the installed official Debian base image A USB host device (laptop, workstation, or RPi-like) running on your LAN, or elsewhere with access credentials for RPC bitcoind aring the Armory for installation: Prep All that is needed for to communicate with a remote is , which drastically reduces the time needed to build on the Armory. Cross-compiliation is possible, but that is out of the scope of this guide. In order to build only , the Bitcoin code needs to be pulled from its Github repository. But, before that can be done, packet forwarding must be enabled on the host device (the device the Armory is plugged into). lightningd bitcoind bitcoin-cli bitcoin-cli Networking: The Armory (if using the official Debian base image), when plugged in and booted, creates a virtual interface that . Once configured, the Armory and its USB host can communicate with each other as if they were on the same LAN (since they technically are). It is up to the USB host to allow the Armory’s packets to be forwarded or not, which if allowed enables the Armory to open Lightning Network channels with other nodes outside of the local network. Packet forwarding is also required to install build tools and dependencies. emulates an Ethernet connection Windows: Instructions for enabling packet forwarding (also known as Connection Sharing) for Windows 7, 8, and 10 can be found . here MacOS: MacOS instructions can be found . here Linux: Note: On Ubuntu 16.04, the Network Manager did not interfere. Other distributions’ configurations might, however. From the Linux instructions: Enable masquerading for outgoing connections:

# iptables -t nat -A POSTROUTING -s 10.0.0.2/32 -o wlan0 -j MASQUERADEenable IP forwarding:

# echo 1 > /proc/sys/net/ipv4/ip_forward Plug in the Armory, and notice the blinking white LED. This means the Armory is running. The “heartbeat” LED blinks more quickly as the Armory is being utilized. Now, into your Armory with the Debian base image’s default credentials (user and password are both ) ssh usbarmory $ ssh usbarmory@10.0.0.1 Ping a public address to see if your Armory is routed correctly: $ ping 8.8.8.8 If successful, you will receive replies: PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.64 bytes from 8.8.8.8: icmp_seq=1 ttl=60 time=46.3 ms64 bytes from 8.8.8.8: icmp_seq=2 ttl=60 time=48.0 ms64 bytes from 8.8.8.8: icmp_seq=3 ttl=60 time=48.1 ms64 bytes from 8.8.8.8: icmp_seq=4 ttl=60 time=71.5 ms Great! Building c-lightning: $ sudo apt update && sudo apt -y upgrade Once that is finished, reboot the Armory for good measure in case there is a kernel update: $ sudo reboot Now, begin installing the build tools and dependencies needed to compile and : bitcoin-cli c-lightning $ sudo apt-get install -y \  autoconf automake build-essential git libtool libgmp-dev \  libsqlite3-dev python python3 net-tools libsodium-dev \  pkg-config libssl-dev libevent-dev \  libboost-system-dev libboost-filesystem-dev \  libboost-chrono-dev libboost-program-options-dev \  libboost-test-dev libboost-thread-dev tmux curl Clone the repository: c-lightning $ git clone https://github.com/ElementsProject/lightning.git Navigate to the local repository: $ cd lightning Then start the build: $ make Once that is finished, navigate to the user’s home directory: usbarmory $ cd ~/ Download the Bitcoin Core 0.16.0 source code archive, SHA256SUMS.asc, and import the Core maintainer’s gpg key to verify the hashes. Finally, decompress the archive: $ wget https://bitcoincore.org/bin/bitcoin-core-0.16.0/bitcoin-0.16.0.tar.gz $ wget https://bitcoincore.org/bin/bitcoin-core-0.16.0/SHA256SUMS.asc $ gpg --recv-key 90C8019E36C2E964 $ gpg --verify SHA256SUMS.asc $ sha256sum -c --ignore-missing SHA256SUMS.asc# should output an "OK" $ tar zxvf bitcoin-0.16.0.tar.gz Excellent! Now, on to building . bitcoin-cli Building bitcoin-cli: Navigate to the Bitcoin source code directory and start the build process: $ cd bitcoin-0.16.0/ $ ./autogen.sh While running , a flood of warning messages about locales may occur. This can be remedied by setting a locale: autogen.sh $ sudo dpkg-reconfigure locales # Select something like en_US.UTF-8 and hit Ok Continuing the build process: $ CFLAGS="-march=native" ./configure --disable-wallet tells our compiler, , to auto-detect the Armory’s processor and enable optimizations specific to that processor. It helps squeeze out any increases in performance the ARM processor has, which is important because this processor is relatively slow. -march=native gcc is not being built, so is not needed. Pass to build without wallet support ( will be the wallet in this configuration). bitcoind libdb --disable-wallet c-lightning Now, build : bitcoin-cli $ make src/bitcoin-cli Finally, copy the freshly built binary to : bitcoin-cli /usr/local/bin $ sudo cp src/bitcoin-cli /usr/local/bin $ whereis bitcoin-cli # Should return "/usr/local/bin/bitcoin-cli" Connecting the Armory to via RPC: bitcoind uses to send raw transactions to for various reasons such as opening, force-closing, or mutually-closing channels. Since is running on the Armory, it requires as well. However, needs to be able to communicate to , so create and add appropriate items to the Armory’s, and the USB host’s, : c-lightning bitcoin-cli bitcoind c-lightning bitcoin-cli bitcoin-cli bitcoind bitcoin.conf On the USB host, or the device elsewhere that has running, specify the following items in : bitcoind bitcoin.conf rpcuser= <username>rpcpassword= <yourpasswordnotthisone>rpcallowip= <the Armory's IP address> Save those changes, then create the Armory’s , and add the following items: bitcoin.conf $ nano ~/.bitcoin/bitcoin.conf In : bitcoin.conf rpcuser= <username from before>rpcpassword= <password from before>rpcconnect= <USB hosts's IP (10.0.0.2)> Substitute for the IP address may be listening on (eg. ) 10.0.0.2 bitcoind 192.168.0.254 Attempt to query from the Armory: bitcoind $ bitcoin-cli -getinfo If successful, a response will be returned with the relevant information (block height, difficulty, etc.) Awesome! Running c-lightning: Now that everything is built, configured, and networked correctly, can be run. c-lightning Start a session and then start : tmux lightningd $ tmux$ ./lightning/lightningd/lightningd --network testnet --log-level debug$ ./lightning/cli/lightning-cli getinfo Note: pass _--network bitcoin_ instead, if you’re #reckless. If starts outputting , and returns the current block height (among other information), the Armory is successfully setup! lightningd Adding block <block number> lightning-cli may now be used to generate new addresses for depositing/withdrawing bitcoin, and to open/close Lightning Network channels! lightning-cli Lightning Charge: LApps are Lightning-powered applications that utilize the instant payments that the Lightning Network provides. Recently released LApps include those listed here on Blockstream’s blog: https://blockstream.com/2018/03/29/blockstreams-week-of-lapps-ends.html To run these LApps, Lightning Charge needs to be installed on the Armory. Lightning Charge is a micropayment processing system written in node.js. It exposes the functionality of c-lightning through its REST API, which can be accessed through and libraries. From: JavaScript PHP https://blockstream.com/2018/01/16/lightning-charge.html Lightning Charge requires and . Install them now: c-lightning nodejs $ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - $ sudo apt-get install -y nodejs Permissions errors might occur due to the nodesource.com-provided package. To work around this, do the following: nodejs $ mkdir ~/.npm-global$ npm config set prefix '~/.npm-global' Add the following to : ~/.profile $ export PATH=~/.npm-global/bin:$PATH Finally: $ source ~/.profile Then simply use to install Lightning Charge, and run : npm charged $ npm install -g lightning-charge $ charged --api-token <a secret token> will then be running on the default port of 9112! charged Installing the nanopos LApp to turn your Lightning module into a micro point-of-sale solution: is easily installed with : nanopos npm $ npm install -g nanopos Edit an file with the products for sale, specify a currency with , and then run : items.yaml --currency nanopos $ nanopos -t <charge API token> --items-path items.yaml --currency USD The title of the rendered page can be changed with , and there are an assortment of themes available at bootswatch.com that can be chosen with . --title -m Now , , and the LApp are all running on the portable Armory! c-lightning charged nanopos Once done transacting, simply shutdown the Armory and unplug it in order to store it for transporting. When ready to transact again, plug it back in, in, and fire up again. This can be configured to use a running on a VPS or similar public-facing hosting service to further increase portability (only the Armory is needed versus an accompanying workstation/laptop/host with ). ssh c-lightning bitcoind bitcoind The Armory can also run in “standalone mode”, which requires no USB host for connectivity or power (it is still powered via USB, however). This enables other cool use cases like a much more portable battery-powered and WiFi-enabled configuration! Thanks for reading! -grubles

Stories, News & Mentions about NOVOSOURCE

Novosource’s Stories on HackerNoon

Novosource's News & Mentions