thewheeldogg.com

Deploying wordpress site on AWS Lightsail


| |

Lightsail

lightsail list

Lightsail provides developers compute, storage, and networking capacity and capabilities to deploy and manage websites and web applications in the cloud. Lightsail includes everything you need to launch your project quickly — a virtual machine, SSD-based storage, data transfer, DNS management, and a static IP — for a low, predictable monthly price.

Excellent 8 minute video that details how to setup lightsail and wordpress on AWS.

setting up lightsail and wordpress

Namecheap

This is a great service for setting up a domain name.

namecheap

The original video from lightsail will detail how to setup the domain name with

Other resources

Article below accomplishes something similar using lightsai and namecheap and is more detailed. It’s nice because it gives more detail to follow setting up DNS and linking with namecheap.com

amazon-lightsail-

Ending statement.

Feel free to drop a comment if you liked this article and if you found it in anyway useful. I hope the resources linked will help you also setting up a wordpress site that you can login to the backend Admin and customize and post on the site from there. It’s a nice feeling to have your own blog or site and wordpress is amazing for how you can custimzise things with the many themes available. I would really recommend the Astra theme.

JupyterHub Deployment with Docker


| |

Check out the fork of the repository discussed @ wheeldogg/jupyterhub-deploy-docker

Jupyterhub introduction

Foo

What are notebooks ?

In the context of jupyterhub when we refer to notebooks we are referring to documents that showcase particular analysis and outputs including visualizations and outputs from data science workflows. It is also an envionment (i.e. Julia, Python or R (Jupyter) that can be run and shared. They are also essentially web applications available via browser.

What is a notebook server ?

Notebooks servers are designed to be used by a single user primarily.

Jupyterhub

Having a notebooks that you can login there are two main options from Jupyterhub. Jupyter notebook itself as a single notebook and also Jupyterlab that allows you to to organize all the different notebooks.

Nonetheless, they are designed to be used primarily from your local machine. You can export the notebook as html (or the notebook itself as a .pynb file can be shared providing you have the environement shared also).

The next evolution of jupyternotebooks is JupyterHub.

Introducing Jupyterhub

Jupyterhub is a service to allow many users run thre own personal jupyter lab server and organize many notebooks and environments simultaneously on a single (or shared servers which is not covered in this post but see jzero-to-jupyterhub.

Jupyterhub

Jupyterhub configuration

jupyterhub-pydata-2016​

How jupyterhub manages the user workflow.

  • Initial request is handled by Hub
  • User authenticates with login form
  • Spawner starts single user server
  • Hub notifies Proxy
  • Redirects user to /user/[name]
  • Single user server verifies auth with hub

Jupyterhub-deploy-docker

In the reference deployment Github auth is used.

jupyterhub/jupyterhub-deploy-docker

Adaptation/Fork of Jupyterhub-deploy-docker.

I’ve created a fork of the original repository and setup with docker and nativeauthenticator. For a small data science team this works really well.

Further resources

jupyterhub/jupyterhub-deploy-docker

native-authenticator

nativeauthenticator

jupyterhub-docker

Setup AWS EC2 and domain name.


| |

ec2

Overview:

Amazon EC2 (Elastic compute cloud) is an excellent infrastructure as a service tool, offering users the ability to rent virtual computers on which to run your application or website.

I find it an excellent and intuitive service to allow you to get started on sharing your application to the world.

The objective of this post is to get you and your domain up and running on an EC2 instance.

  • Look at how to setup a EC2 instance on amazon web services (AWS)
  • Register a domain on namecheap.com
  • Link your domain to your EC2 instance

EC2 setup and creating running instance

Create account on Amazon and access the EC2 dashboard.

Hosted

Next spin up an instance.

It’s worthwhile selecting the free tier, you can always scale this machine later if you need to.

Hosted

When launching an instance, you may have to choose and existing key pair to connect securely or you will need to create one.

Note: you will need to select a key pair at this point or create a new one to be asociated with the EC2 instance for connection via ssh.

Successfully running instance

Now you will have a sucessfully running instance

Hosted

Authentication

When you download the YOUR_AWS_USERNAME.pem from setting up your EC2 instance, you should add this to the folder ~/.ssh on your machine.

This means you can login using the .pem file when needed to setup your public key propertly. generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

i.e. to setup public key properly, ssh-keygen and copy the id_rsa.pub to your new server instance.

If you have any issues SSH to the server, please check below security groups on your instance.

Hosted

You will need to add this ti ~/.ssh folder on your laptop.

Create elastic IP address to associate with your EC2 instance.

Go to the elastic IPs section on EC2.

Hosted

You are essentially creating a static IP address that you will always be able to find your EC2 instance

If you setup the authentication properly, you should be able to ssh directly to this elastic IP address.

ssh YOUR_ELASTIC_IP

Obtain a domain name on Namecheap.com

Simply look for a domain name that is not in use on namecheap.com and is a reflection of what you will be buiding on your EC2 instance.

You can buy a domain name for a year for as little as 8 euros and namecheap offers a great dashboard to manage your domain names.

Setup hosted zone on AWS

Find route 53 in the services on AWS.

Hosted

Create a new hosted zone on there.

Hosted

You need to set it up like above by creating records and adding the elastic IP address.

The purpose of the hosted zone is that you now access on www.YOURHOSTNAME.com and YOURHOSTNAME.com

Setup custom DNS on namecheap.com

Login to namecheap.com

Click on dashboad and then click on Domain.

Click manage on your new domain name.

Select the custom DNS option and copy over the options from your AWS hosted zone for the same domain name as per below.

Hosted

SSH directly to your hostname.

To allow to ssh directly using the hostname, and no longer the IP address or EC2 public DBS.

Add your hostname to the /etc/hosts file on your EC2 instance.

ssh YOUR_HOSTNAME

Run example Metabase image

First install docker on your EC2 instance. running-docker-on-aws-ec2

A nice example webserver to run is Metabase. docker-metabase-example

docker run -d -p 80:3000 --name metabase metabase/metabase

observe the metabase server running on YOURDOMAINNAME.com and www.YOURDOMAINNAME.com

Hosted

Success and conclusion.

It’s a nice feeling to have your domain name running with actualy webserver in this case a metabase docker container.

Now when you access your domain name you are connecting directly to the EC2 instance and you can work on building your application.

Getting started with React


| |

In this post I’m going to be outlining the steps I’ve taken to learn React.js.

React is a javascript library mostly that enables the front end developer to manipulate in real time the virtual DOM..

Most of the resources below are free, however the udemy ones look good also

### Resources

React hands on The react handbook React crash course youtube thereactcourse

Udemy Modern React with Redux JavaScript: Understanding the Weird Parts Advanced Javascript

Django and react as front end Django and react Django and react video tutorial

Books

Learning React from Alex Banks and Eve Porcello

Getting Setup for react. Installing npm/npx

For setup you will need node and npm installed locall.

To setup react it is worth reading this. react-setup-on-local-computer

Below I am following the React course from flaviocopes.

Introduction to create-react-app

However, you can use create-react-app below which will take care of this work (i.e. babel etc.) more info on below available npm-vs-npx-whats-the-difference/

  • create react app. npx create-react-app my-app cd my-app npm start

react_image_running

More information on create-react-app https://flaviocopes.com/react-create-react-app/

Introduction to React components

Everything in react is a component. React.createElement

These two lines are the same. ‘’’ ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))

ReactDOM.render( React.createElement(‘h1’, null, ‘Hello World!’), document.getElementById(‘app’) ) ‘’’

Introduction to JSX

JSX compiles into react components.

Introduction to Props

Properties exist of the class in react classes. So they can be accessed as variables such as state outside of the class

Introduction to React Events

These are for instance interactions form the user such as button clicks. Full list

1. Run example app online for Django + React

The example below involes using Django, DRF and React. build-a-to-do-application-using-django-and-react

Wohoo, succes for this app! react_image_running

1. Creating the first app.

Following crash course video below firstly !! https://www.youtube.com/watch?v=Ke90Tje7VS0&t=413s

2. Read te React handbook

3. The React course

  • 3.1 counter-app.

nice button counter !

react hooks

You can add as many useState() calls you want, to create as many state variables as you want. Just make sure you call it in the top level of a component (not in an if or in any other block).

Using the useState() API, we have a way of accessing variables, that can be changed.

const [count, setCount] = useState(0)

challenges https://github.com/wheeldogg/react_counter

  • Add a “reset” button to restore the count to zero [DONE]
  • Add a set of buttons to decrement the count [DONE]
  • Add another button that saves the result of the count to a list of results. This way the page can serve as a sort of calculator that memorizes the previous calculations. [MMMMM]

React functions component

  • 3.2 Github users app.

Dash in python for creating easy and flexible dashboards


| |

Dash

First thing is to create an environment for expermenting with Dash. conda activate django_dash

Part 1: Dash tutorials and resources

great tutorial for getting started with dash and python.

Dash tutorial by Semdex. https://pythonprogramming.net/data-visualization-application-dash-python-tutorial-introduction/

  • I’ve created a folder /projects/web-development/dash/semdex_tutorial
  • environment is django_dash

```source activate django_dash

```

video 1.

to be finished off later :)


Reactive dash, update one thing everything else updates.

This would be pretty crucial for having data.tables and graphs that can be updated side by side, typically how filters affect graphs in Tableau. Good page for example applications for Dash. https://github.com/amyoshino/Dash_Tutorial_Series check out the videos here. https://www.youtube.com/watch?v=lu0PtsMor4E

More on plotly. http://nbviewer.jupyter.org/github/plotly/python-user-guide/blob/master/Index.ipynb


Part 2: Getting Dash apps to work within django.

I found this useful thread that discussess this challenge in good detail. https://community.plot.ly/t/django-and-dash-eads-method/7717/23

Option 1. Wiring Flask apps through Django.

Example to get dash running Cool example of dash app. Simple django site with embedded app. https://bitbucket.org/m_c_/sample-dash

edd-oj

However, doesn’t look an ideal solution right now as we want to keep the authentication the same in Django

Option 2. eddy-oj / Dash_within_Django_app

https://github.com/eddy-oj/Dash_within_Django_app

  1. Example working ? edd-oj

  2. Does it work in Django 1 also ? I feel it should only to change the URLS part.

  3. Is the Dash app fully functioning (ie. updates automatically and changes things) ? Yes. Example working with Callbacks now.

  4. Can we add more than one Dash app into the page ? Example of two layouts on one page, one updates the other.

  5. Are the two Dash apps talking to each other ? Yes, as above.

Example here could be the reactive tables stuff from part 1.

Option2. GibbsConsulting / django-plotly-dash

repo :https://github.com/GibbsConsulting/django-plotly-dash docs : https://django-plotly-dash.readthedocs.io/en/latest/

  1. Example working ? gibbs

  2. Will it work in django 1 also Nope, :( Reason is you would have to start refactoring the package itself and easier to upgrade to django 2 before than.

However, using GibbsConsulting looks like the best solution in the end when django is upgraded