Now that bash is on Windows, I wanted to try and make all the other guides I’d writen for Python on Windows irrelevant.
So here’s how to setup an effective environment for Python on Ubuntu on Windows.
1. Install Bash on Windows
2. Check for updates
3. Check out the REPL
4. Install Pip
5. Install VirtualEnv
6. Install VirtualEnvWrapper
7. Create your first virtualenv
8. Configure bashrc to keep it working
9. Install some packages
10. Test Flask
Now we’ll install Pip: sudo apt-get install python-pip
If you have permission issues try starting an elevated prompt: $ sudo -i $ apt-get install python-pip $ exit
Use exit to return to the regular prompt.
Should look like this:
Yay we’ve got pip!
Try pip list to see what comes standard.
5. Install VirtualEnv
Now we’re basically following along with the guide presented at hitchhikersguidetopython.com
Again, you might need to start an elevated prompt to install virtualenv.
$ sudo -i
$ pip install virtualenv
$ exit
$ cd my_project_folder
$ virtualenv venv
Then to use the VirtualEnvironment
$ source venv/bin/activate
You should now see a little (venv) before your prompt.
Like this:
Now you’ve created a virtualenv inside of your my_project_folder directory. Which is cool, but can be confusing with git, sharing code, and testing package versions.
So we use VirtualEnvWrapper to keep our virtualenvs in the same place.
Before we move on make sure you deactivate your env deactivate
Here’s an example of what it looks like to remove our venv directory and instead use venvv which will be stored in the directory underlined in red.
8. Configure bashrc to keep it working
This might not happen to you, but when I opened a new bash terminal I had to re-source my virtualenvwrapper.sh and WORKON_HOME.
So instead I added those lines to my bashrc script.
$ sudo nano ~/.bashrc
-- type in password --
This is what it looks like in nano for me.
Ctrl+X to exit and y-enter to save.
Then either:
Source ~/.bashrc
Or start a new command prompt->bash and try “workon” or “lsvirtualenv”
See the next image for a simple workflow.
9. Install some packages
Now lets install ‘requests’ into our newly created virtualenv:
Isn’t that nice!
10. Test Flask
Finally we’re going to test this with flask.
First we install the required files using pip into our activated ‘venv’
Then runserver -> navigate to the designated address -> and see our site.
Here’s what it looks like:
Have fun building with Python, on Ubuntu, on Windows!
This week I’ve been making progress on the Huggable Cloud Pillow website.
In the process I’ve learned about some sweet stuff you can do with Javascript, Python, and Flask-SocketIO.
The first thing to take note of is Flask.
Flask is the tiny server that allows us to host websites using Python to deliver content to the client. While on the server side you can manage complicated back ends or other processes using Python in conjunction with Flask.
This type of development is nice, because you can start seeing results right away but can take on big projects easily.
It might not be the most robust Framework, but its great for small projects…
If you want to get into Flask Web Development checkout this extensive MVA.
Small and simple, Flask is static on its own. This allows us to present static content, like templates and images easily and deals with input from the user using RESTful calls to receive input. This is great for static things with lots of user actions, but if we want something a bit more dynamic we’re going to need another tool.
In this case I’ve found Flask-SocketIO, similar to Flask-Sockets but with a few key differences highlighted by the creator (Miguel Grinberg) here.
Sockets are great for is providing live information with low latency. Basically, you can get info on the webpage without reloading or waiting for long-polling.
There are lots of ways you can extend this functionality to sharing rooms and providing communication with users and all sorts of fun stuff that is highlighted on GitHub with a great chunk of sample code. The following demo is based off of these samples.
For my project, I need the webpage to regularly check for differences in the state of the cloud and present them to the client, while also changing the image the user sees.
At first I tried to implement it using sockets passing information back and forth, but that wasn’t very stable.
The solution I’ve found, uses a background thread that is constantly running while the Flask-SocketIO Application is running, it provides a loop that I use to constantly check state of our queue.
Let’s break it down…
a. I need my website to display the current state of the cloud.
b. The Flask application can get the state by query our azure queue.
c. Once we determine a change of state we can display that information to the webpage.
d. To display the new state to the webpage we need to use a socket.
e. And pass the msg to be displayed.
This demo intends to break down problem a, c, d, and e.
I’ve created this little guide to help another developer get going quickly, with a nice piece of code available on GitHub.
The five steps to this little demo project are as follows:
1. Install Flask-SocketIO into our Virtual Environment
2. Create our background thread
3. Have it emit the current state to our client
4. Call the background thread when our page render_template’s
5. Have the Javascript Catch the emit and format our HTML.
Celebrate! Its Friday!
1.
Flask-SocketIO is a python package that is available for download using
*Edit Here’s the top part of the “main.py” for reference:
#main.py
from gevent import monkey
monkey.patch_all()
import time
from threading import Thread
from flask import Flask, render_template, session, request
from flask.ext.socketio import SocketIO, emit, join_room, disconnect
app = Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
thread = None
2.
Create our background thread.
You’ll see in the sample code from Flask-SocketIO’s github a simple way to send data to the client regardless of their requests.
For this example we’ll be changing the current time every second and display that to our client.
Background Thread:
def background_stuff():
""" python code in main.py """
print 'In background_stuff'
while True:
time.sleep(1)
t = str(time.clock())
socketio.emit('message', {'data': 'This is data', 'time': t}, namespace='/test')
3
This is the emit statement from above, but is the meat of our interface with SocketIO. Notice how it breaks down…
This emit will be sending to the client (Javascript) a message called ‘message’.
When the Javascript catches this message it will be able to pull from the python dicionary msg.data and msg.time to get the result of this package.
4
So how do we call background_stuff?
We can call it wherever we want, but for this simple example we’ll put it right in our ‘/’ base route. So when we navigate to 127.0.0.1:5000 (Local Host) we’ll see the result of our background thread call.
Here’s our route:
@app.route('/')
def index():
global thread
if thread is None:
thread = Thread(target=background_stuff)
thread.start()
return render_template('index.html')
Pretty simple… Notice global thread and target=background_stuff
Creating different background threads is a good way to iterate through your changes.
Let’s say you’re at your first hackathon. You have an idea you want to develop quickly and manage and deploy remotely so you’re ready to scale, or aggregate data cross platform. Buzzwords.
I’ve seen it many times in my last 3 months of attending hackathons.
Students want to get started quickly without wasting time worrying about deployment and compatibility across devices this setup will also prepare them to work in a team because it’ll allow deployment from Git. And these principles carry down into innovation initiatives happening at companies around the world one solution is MEAN.
Let’s say you’re new to web development and you’re learning node but don’t want to gunk up you machine with installations and moving files around before you have a grasp of what really matters.
That’s where MEAN in the Cloud comes in.
So what we’re going to do is install the MEAN stack on a cloud server so we can mess with code, learn, restart, and more without worrying about ruining our machine.
1. Login to Azure (Create an account if you don’t have one already)
Using azure isn’t required any cloud hosting that provides and Ubuntu distro should work.
2. In the bottom left click “New”
3. Next to Compute Virtual Machine
4. Select Quick Create
5. Give it a name (eg. meanincloud)
6. In IMAGE dropdown select ‘Ubuntu 14.04 LTS’
7. Leave the size at the default – you can always scale later.
8. Provide a password and confirm it
9. Select the region nearest to you.
10. Hold tight, the cloud is provisioning resources and configuring your machine.
11. After status reads running double click on ‘meanincloud’
12. Then select ‘DASHBOARD’
13. Scroll down until you see SSH details on the left.
14. take note of those values it should be something like: ‘youservername.cloudapp.net: 22″
This is your server host name and the SSH port we’ll be using this in the next section to access your remote machine
We now have a Linux VM with the Ubuntu distribution. This is our base on which we’ll build the MEAN stack. Second: Get into Server
For this part we’ll need an SSH client. Putty is what I’ve always used and works well for this instance. Download page
1. in the box labeled Host Name (or IP address) paste ‘yourservername.cloudapp.net’ and leave the port at 22.
2. You’ll likely receive a PuTTY security alert. That’s cool for now, select Yes.
3. If you’re using azure you’re login will be ‘azureuser’
4. And you’re password will be that same that you provided at ‘7.’ in the previous section.
5. You’re now at the Ubuntu terminal (Like cmd). You’ll start at home, but you can get to root by entering: ‘cd /’ and back to home with ‘cd ~’
The Mongo installation instructions can be found here if you’re curious. But we’ll run through that here.
Note: All lines in bold will be run in the terminal. Copy and right click to paste into your putty shell. Then press enter to run the command.
1. Import the public key used by the package management system: ~$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
2. Create a list file for MongoDB ~$ echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
No result will display.
3. Reload local package database. ~$ sudo apt-get update
You’ll get about 15 seconds of output.
4. Install the MongoDB packages – This will download the latest stable version, but you can be specific if you liked an older version. Read more into it here. ~$ sudo apt-get install -y mongodb-org
You’ll get about 30 seconds of output.
5. Reload local package database ~$ sudo apt-get update
Alright! Mongo is installed, here’s a great tutorial if you want to get a better understanding of how Mongo works. Fourth: Install Node
Node is the web app framework that you’ll be building you application with. Although its not spelled MNEA or NMEA, this more accurately represents the priority of these tools.
1. Install Node: ~$ sudo apt-get install nodejs
2. Confirm install with ‘Y’
About 20 seconds of output.
3. Node is now installed you run node by entering nodejs this will take you to the Node REPL.
4. Try it out ~$ nodejs
5. In the REPL you can run javascript > console.log('hello world');
6. ctrl+c twice will exit the repl. Fifth: Create your first Node app
We now have everything we technically need to start development with Node, the first thing we’ll do is create a hello world app to begin putting the pieces together.
1. First install emacs24 an inline text editor for linux that will allow us to make changes to code inside our terminal. sudo apt-get install emacs24
a ‘Y’ will be required to finish
And we’ll get about a minute of output.
Now we can edit code right here! No need to worry about messing up your own file system.
2. Make sure we’re updated. ~$ sudo apt-get update
3. make a directory to hold our demo ~$ mkdir mean-practice
4. ‘ls’ will show us our newly created directory
5. Change into that directory ~$ cd mean-practice
6. now we’ll create our first file inside of that directory. /mean-practice$ emacs package.json
This will open a new emacs view that will allow us to make changes, save ctrl+x+s and close ctrl+x+c.
7. This is our basic manifest file. type this into it.
{
"name" : "mean-practice",
"version": "0.0.1"
}
This is the minimum. As you learn more about node you’ll see what else will go in there.
ctrl+x+s to save and ctrl+x+c to exit.
8. Let’s create our main file, basically our entry point for the application, and where the server will begin operating. /mean-practice$ emacs server.js
9. put this into that file: console.log("Hello World with NODE!");
Though possibly over-zealous this is our first node app!
ctrl+x+s to save and ctrl+x+c to close.
10. Type ‘ls’ to see what’s in our mean-practice directory.
Not a ton, but everything we need to start our application.
11. Let’s run our application: /mean-practice$ nodejs server
Sweet! All we’ll get as output is “Hello World with NODE!” but that’s better than a kick to the face.
12. To stop the server press ctrl+c Sixth: Install secret N, NPM
Node strengths and rapid growth are due in large par to the awesome npm. A package manager which will allow you to import a whole host of clever tools, apps, widgets, and formatting helpers to make your node development as easy as possible. So let’s install that now.
1. First install NPM. /mean-practice$ sudo apt-get install npm
You’ll need another ‘Y’
and expect about 45 seconds of output.
2. Update again /mean-practice$ sudo apt-get update
another 20 seconds of output Seventh: Now we’ll install Express and Angular using NPM.
Now that NPM is installed we can add our final packages!
1. Install express /mean-practice$ sudo npm install express --save
express is in the npm system and –save will edit our package.json file to include the express module. Click this link to find out more about express.
Expect about 15 seconds of output.
2. Enter ls to see our new directory ‘node_modules’ where our node modules are being stored.
3. Open package.json to see the changes in our manifest. /mean-practice$ emacs package.json
You’ll now see under dependencies “express”
Yay! Now express is installed.
ctrl+x+s to save and ctrl+x+c to exit.
4. Now lets install angular. /mean-practice$ sudo npm install angular
Now the angular module is part of our application! Click on the link above to learn more about Angular.
That’s it! Now you have a MEAN stack ready for development!
Let’s quickly build a simple server, configure an endpoint in azure and become a client with our browser. Eigth: Get a tiny server running
1. Open our server.js /mean-practice$ emacs server.js
2. Replace our hello world statement with:
var express = require('express');
var app = express();
var port = 3000;
app.get('/', function(req, res) {
res.send('hello from afar');
});
app.listen(port, function(){
console.log("Listening at port: " + port);
})
4. Now our server.js is actually a server but our virtual machine doesn’t know that. Go back to your azure portal.
5. Select Endpoints at the top between monitor and configure.
6. At the bottom select ‘ADD’
7. Select ‘ADD A STAND-ALONE ENDPOINT’
8. Press the arrow
9. Under the NAME dropdown select HTTP
10. Leave protocol at TCP
11. Leave public port at 80
12. Change the private port to ‘3000’
We’re mapping our endpoints improperly for this demo to keep things simple. As you learn more about web development you’ll want to change your endpoints to accurately reflect what’s happening in your server.
13. Hit the checkmark.
14. Back in your putty shell run the server! /mean-practice$ nodejs server.js
15. Open a new tab in your browser and navigate to: ‘yourservername.cloudapp.net’
16. CHECK IT OUT! You’ve got a website running node on a virtual machine! Throw your hands in the air! You’re ready to hack and learn.
