In this lab you are going to take your fizzBuzz website live on the internet. After you get a working version online, you will continue to add a styling and a responsive layout such that the site renders well on phones, tablets, and desktops.
Fork this repo to your own account and clone it to your desktop
Go ahead and run the populateDB.py script in your repository to populate your database. Then run webapp.py to see that it is properly functioning. You should see that we have a working app but with minimal design
The Heroku cloud application looks for a file called Procfile (there no extention on this file so do not add anything like .txt or .html to the end of it) In Sublime create a file called Procfile that contains the following configuration information:
web: gunicorn -w 4 -b 0.0.0.0:$PORT -k gevent webapp:app
Save and close this file
Heroku will create a python environment that matches the one on your development machine. In order to know all of the necessary libraries to install, you will need to export a list of all of the software needed for deployment. Create a file called requirements.txt and paste in the following information:
Flask==0.11.1
passlib==1.7.0
SQLAlchemy==1.1.5
Werkzeug==0.11.15
gunicorn==19.0.0
gevent==1.2.1
I'm assuming you already know how to do this but the code is provided below to refresh your memory:
git add .
git commit -m "Added Configurations for Heroku Deployment"
git push
Enter your username and password and then check GitHub to see that the changes were saved on your account.
Go to Heroku.com and follow the directions to set up a new account using your meet email address or your personal email. Create a new python web application. You can either choose a domain name or let Heroku choose one for you. Connect Heroku to your GitHub account and point to the Y2YL201617Week12 repository. At the bottom of the page select the manual deploy and see that your website goes live after a few minutes. If you have any trouble with this step, please find an instructor.
Your web applicaiton is now up and running. Try using your phone or a tablet to see if you can log in and navigate around the website. Each time you push a change to your GitHub account, Heroku will refresh your website. If you have finished this all before the break, complete the challenges below:
SQLlite is the database file we have been using so far. It's not actually a real database however but lets us use all of the sql and sqlalchemy commands as if we were using an actual database. Real databases typically run on their own and are designed with special hardware and software to make searching and storing data super fast and reliable. Heroku allows you to make a free Postgres database that you can use in your web application. Once you get the server configured, you just need to change the create_engine line of code in your model.py to point to the url for this database instead of the SQLite file you were previously using. Check out this tutorial for more details.
Heroku allows you to increase the number of instances that run your web application. When you start getting hundreds, thousands, or even millions of users on your website, being able to scale is crucial in order to keep your application fast and reliable for users. Explore the Heroku dashboard to see how you can scale your app. But don't do it since isn't free.
Explore some of the other tools develpers can use with Heroku. From activity logging, to backups Heroku has hundreds of add-ons you can use to enhance your website.
Now that you have a web app up and running, let's try and make it a little more aesthetically pleasing. In the second portion of this lab, you will be adding a responsive web layout to your site using the tools discussed in lecture and any of the resources provided below:
W3Schools.com has one of thethe biggest and most extensive set of web design tutorials on the web. Refer to it for any additions you want to add to your site.
Starting with the smallest screen, design a layout for the webapp for phones. Make sure the font size looks good on your mobile device and the buttons can be used without having to pinch and zoom.
Use either a bootstrap, W3.CSS, or your own breakpoints to design for the smallest screens.
I like this tutorial on setting breakpoints in your CSS code.
Once you have a mobile phone design, create a design for tablet and desktop. Test all of these designs on your phone, tablets, and desktops.
Select a color scheme and font family for your website. Use the W3Schools tutorials as your guiding light.
Style your flash alerts, forms, buttons, favicons, and other small details of your webapp to give it a more profession look and feel.
Explore some of the other How-To's and tutorials on the W3Schools website and see if you can implement them in your own web application.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent