DEV Community: Usama Subhani

Deploy React Apps on Surge using GitHub Actions (Free)

Usama Subhani — Tue, 23 Jun 2020 11:03:35 +0000

GitHub Actions is a tool by GitHub to automate building, testing and deployment of code.

Surge is a simple tool for publishing static websites for free, by only running a single command.

In this post, I have written the steps you can follow to deploy a react app to surge.sh using GitHub actions.

What we need:

A React application. create
A GitHub repository. create
A Surge deploy token.

Get surge deploy token

npm install surge
surge

Enter username/email and password to login.
Then run surge token to generate token.
Copy this token and add it as a secret in the GitHub repository.

Setup GitHub Actions

GitHub actions are triggered by yaml files in .github/workflows/ directory. Create a yaml file in this directory and add these lines.

name: Deploy

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Setup Node
      uses: actions/setup-node@v2-beta
      with:
          node-version: 12

    - name: Build React App
      run: |
        npm install # Install Dependencies
        CI=false npm run build # CI=false to ignore warnings

    - name: Install Surge
      run: npm install -g surge

    - name: Deploy to Surge
      run:  surge ./build https://someawsomeurl.surge.sh/ --token ${{secrets.TOKEN}}

What this does is on every push to master branch, these steps are performed by GitHub actions.

Setup Node
Install all dependecies.
Build the app.
Install surge.
Run surge to deploy on given url.

Deploy

Commit and push your changes to the GitHub repository. You can now see the progress in the Actions tab on GitHub.
After all steps are completed, you React app will be available on the URL used in the deploy.yaml file.

Conclusion

You can use this process to deploy Vue and Angular app too. GitHub actions is a great tool that can be used to automate your workflow.

Checkout this React project in which I used the above steps for deployment:

usamasubhani / another-covid-tracker

Covid-19 Tracker project for Panacloud Bootcamp 2020

Feel free to share what automation tools are you using and what tasks are you planning to automate.

Digit Recognizer: A Computer Vision Project From Training to Deployment.

Usama Subhani — Fri, 29 May 2020 16:31:52 +0000

As recommended by most people, I decided to get my hands dirty in the field of computer vision by playing with the famous MNIST data-set to create a digit recognizer.

Link to app: https://usamasubhani.tech/projects/digit-recognizer
Source code: https://github.com/usamasubhani/digit-recognizer

Note: This is the first iteration of my first computer vision project. I will be improving this project (and this post) as I learn more.

Data-set
Training and Testing
- Training
- Testing
Web app + Deployment
- Deployment on Heroku

Data-set

Considered the "hello world" data-set of computer vision, the MNIST Data-set contains labeled gray-scale images of handwritten digits (0-9). Each image has 28x28 pixels. and the pixel values are between 0 and 255.

This data-set is very popular, so it is already available in Tensorflow

Load and Normalize the Data:

import tensorflow as tf
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.mnist.load_data()
# Normailize
x_train = tf.keras.utils.normalize(X_train, axis=1)
x_test = tf.keras.utils.normalize(X_test, axis=1)

Training and testing

Training

Keras is a library for implementing neural networks and can work as a high level API for TensorFlow. For this project, I used the Sequential model.

According to the Keras documentation, A Sequential model is appropriate for a plain stack of layers where each layer has exactly one input tensor and one output tensor.

Creating a neural network:

from keras.models import Sequential
from keras.layers import Dense, Conv2D, Dropout, Flatten, MaxPool2D

input_shape = (28, 28, 1)

model = Sequential()
model.add( Conv2D(28, kernel_size=(3,3), input_shape=input_shape) )
model.add( MaxPool2D( pool_size=(2,2) ) )
model.add( Flatten() )
model.add( Dense(128, activation='relu') )
model.add( Dropout(0.2) )
model.add( Dense(10, activation='softmax') )

Compiling and Fitting:

# Set optimizer and loss function
model.compile( 
    optimizer = 'adam',
    loss = 'sparse_categorical_crossentropy',
    metrics = ['accuracy']
)
# Fit the model using training data
model.fit(
    x = x_train,
    y = y_train,
    epochs=10
)

I will add explanation of the above code once I will learn more about neural networks.

Testing

Test the accuracy of trained model by running:

model.evaluate(x_test, y_test)

Save the model by running:

model_json = model.to_json()
with open("model.json", "w") as jsonFile:
    jsonFile.write(model_json)

model.save_weights("Model_mnist.h5")

The trained model is now saved and can be deployed.

Deployment

The plan was to create a web application that allows user to draw a digit using a mouse.
I decided to use Flask, which is a minimalist web framework for python and is perfect for small to medium scale projects.

Directory structure for the Flask app:

Digit-recognizer
|
└─api
| └─templates
| | └─index.html
| └─static
| | └─sketchpad.js
| └─__init__.py
|
└─model
  └─model.json
  └─modl_mnist.h5

Complete source code can be seen at the Github repository. Pasting all the code here will be unnecessary.

Deployment on Heroku

To deploy a Flask app on heroku, we need 3 files.

Procfile

web: gunicorn wsgi:app

wsgi.py

from api import app

requirements.txt

Run these:

pip install pipreqs
pipreqs

Create a project on Heroku and connect it to your Github repo.
Push the application code to the repo. The app is now deployed on Heroku.

Conclusion

There is a lot to improve. I am listing some to-dos here, feel free to contribute the project or give feedback.

Improve the model
(Done)Enable drawing on touch devices.

How to Keep Home Directory Clean?

Usama Subhani — Fri, 15 May 2020 09:50:16 +0000

I hate it when every program stores it's config and cache files in the home directory.

Have you ever felt that?

How do you deal with it?

# Run this in your home directory to count the number of files.
ls -la | wc -l

Setup a Blog With Hugo and GitHub Pages

Usama Subhani — Fri, 01 May 2020 18:55:41 +0000

If you want to share your thoughts with the world, starting an online blog is a good idea. You can use a static site generator and a free static hosting service to host your blog for free.

Note: My experience with SSGs is not very good, I am looking for something better than Hugo for blogging.

In this post, I will show you how I setup my blog using Hugo and GitHub pages.

Workflow

Write posts in markdown.
Convert to a static website using hugo.
Commit and push to GitHub to deploy.

Install Hugo

To build the site, hugo must be installed on your system.

Use your package manager to install Hugo.

On macOS use Homebrew

brew install hugo

On Arch linux

pacman -S hugo

For other distros and Windows, this

To check if hugo is installed, run

hugo version

Create and Configure Site

Create a new site named 'blog'

hugo new site blog

Hugo will generate files required for a site in a new folder called blog.

Initialize an empty Git repository.

git init

A theme is required for a hugo site. Visit https://themes.gohugo.io/ and select a theme. For this tutorial, I am using notepadium. To use a theme, it should be in themes directory of hugo site. It is recommended to add theme as a Git Submodule because it makes easier to update themes.

git submodule add https://GitHub.com/cntrump/hugo-notepadium.git themes/hugo-notepadium

To use installed theme, add these lines to config.toml

theme = "hugo-notepadium"

Write Some Content

To write a post, you can manually create a markdown file in content folder or use the Hugo cli.

hugo new posts/first-post.md

The above command will create a new file in content/posts/ directory called first-post.md.

Open this file in your text editor of choice and write your first post.

Preview your site before deploying by running

hugo server

Your website will be available at http://localhost:1313/.

Build and Deploy on GitHub Pages

Types of GitHub Pages:

User Pages: [username].GitHub.io
Project Pages: [username].GitHub.io/[project]

I recommend using Project Pages for blog.

In config.toml, add

publishDir = "docs"

This will output generated static files to docs folder. GitHub pages will deploy from this folder.

Also set baseURL and title.

Create a new repository in your GitHub account and copy its URL.

In your hugo site directory, run

git remote add origin <URL-of-new-Repo>

Build your site by running

hugo

Then run following to deploy

git add .
git commit -m "First Post"
git push origin master

Go to GitHub repository Settings > GitHub pages. Select /docs in Source.

Navigate to your site at [username].GitHub.io/blog

Profit.

To-Do

[ ] Automate build and deploy.

This is my first post on dev.to and I need your feedback, Thanks

DEV Community: Usama Subhani

Deploy React Apps on Surge using GitHub Actions (Free)

What we need:

Get surge deploy token

Setup GitHub Actions

Deploy

Conclusion

usamasubhani / another-covid-tracker

Covid-19 Tracker project for Panacloud Bootcamp 2020

Digit Recognizer: A Computer Vision Project From Training to Deployment.

Table of Contents

Data-set

Load and Normalize the Data:

Training and testing

Training

Testing

Deployment

Deployment on Heroku

Conclusion

How to Keep Home Directory Clean?

Setup a Blog With Hugo and GitHub Pages

Workflow

Install Hugo

Create and Configure Site

Write Some Content

Build and Deploy on GitHub Pages

To-Do