/BaseWebApp

Primary LanguageEJS

Base Web App

Check it out at: https://pacific-bastion-31399.herokuapp.com/

Phase 1: Base Web App

Mission- Get up and running with the Base Web App. Should be able to run locally and be deployed on Heroku.

0. Before you get started:
1. Make a copy of my existing project on github by forking the project at https://github.com/zsobin/BaseWebApp.git

github

2. Find and open your terminal

screen shot 2017-04-21 at 11 43 48 am

Note: on Windows, it might be called Git Shell or Git BASH.

3. Use the command line to navigate to your desktop:
  • ls lists all files in a directory. If you're on a PC, the command is dir instead.
	cd ~/Desktop 
	ls

you should see all the items on your desktop displayed in text in the terminal like so:

oct-12-2016 21-51-18

4. Clone the Repository

When you create (or in this case, fork) a repository on GitHub, it exists as a remote repository. You can clone your repository to create a local copy on your computer and sync between the two locations. Use the command line to

  • (1) clone your project from Github onto your own computer, then
  • (2) navigate into the project and then
  • (3) list all the files in the project:
	git clone https://github.com/YourUserName/BaseWebApp.git 
	cd BaseWebApp
	ls
5. Initialize app for Heroku

Use the command line to create an app on Heroku, which prepares Heroku to receive your source code (and initializes a url for you)

	heroku login
	heroku create

Note: On Windows, the first command might 'hang' for quite some time (even up to 10-15 minutes) - do not cancel and restart it, usually after this first 'long' run, it works without issues later on.

If you experience any issues with Heroku CLI, please refer to https://devcenter.heroku.com/articles/heroku-cli#troubleshooting and your error log file.

6. Install dependencies

Install the project’s dependencies using npm, a tool used to install any other projects your project needs in order to run locally. View the dependencies your app needs here.

	npm install
7. Run the project on your machine (your local server)
	heroku local web
8. View the project running locally

Open a browser and navigate to localhost:5000

9. Make a change in the code and refresh the page running at localhost:5000

Open the project with Sublime text or whichever text editor you installed. Make a change to your code (ex. In index.ejs change the header text) and refresh your web browser- you should see the change!

Ejs is a templating language that stands for embedded javascript. It's like HTML but with some special sauce mixed in so that you can add in a little javascript that gets compiled to HTML before it's send to the browser. We won't really be using it for anything other than HTML today though.

Few editors that you might find helpful:

In fact, any text editor will work - if you have favourite one, please use it!

10. Link github repo to heroku

This is kind of a weird step but it's worth it- What this does is essentially connects your heroku app to a Github Repository. It monitors the repository and whenever it sees you push a change, it automatically re-deploys your application so that your changes are incorporated in your live site.

  • Go to https://dashboard.heroku.com/apps
  • Select your app
  • Click the tab ‘Deploy’
  • In Deployment Method, select ‘Connect to Github’
  • Search for your Repo- "BaseWebApp"
  • Click 'connect' and then 'Enable Automatic Deploys'

*We use automatic deploys at HubSpot - but ours go to a 'QA' or 'staging' site. Can you think of why we might do that? Ask a hubspotter near you what they think!

11. Push that change to github (which automatically deploys on Heroku)

*If your server is still running from before (it probably is), you can press control + c to halt it

	git add .
	git commit -m “made my first change” 
	git push origin master
12. View your app live! (it might take a few seconds to finish deploying)
	heroku open

Phase 2 - Continue to work off of ‘Hello World’

A few tips before you begin:

  • Test often- when you make a change, make sure it works. You don't want to add a bunch of stuff and spend tons of time tracking a little thing down.
  • Google everything! - Google is a developers best friend. I'm not joking. No one actually just knows this stuff... you just get really good at knowing what to google and reading/incorporating the answers you find.
  • Ask for help - Everyone around you is dying to help you out! Don't be afraid to ask, no matter how silly you think your question is (because trust me, it's not).

Option 1 - Personal website: This is the easier option, using only HTML and CSS.

Option 2 - Incorporate a database: this is more challenging, and only recommended for attendees who are familiar with HTML, CSS and a little bit of javascript.

Step-by-step instructions for these can be found in the repo READMEs.

Other resources

Here are some external resources we've gathered to help you with further development.

Git and GitHub tutorials Version control is an important tool for every developer, and git is the most popular one. Learn more useful git commands, discover the branching and then check how to use GitHub for your own project.

Web App tutorials (HTML, CSS, JavaScript) There are plenty of different and more comprehensive tutorials and online resources to learn HTML, CSS and JavaScript.

More Web App tutorials (FE frameworks) Once you have comfortability with JS, CSS and HTML, try out a frontend framework to take your skills to the next level.

Inspiration and problem solving To practice your problem solving skills and find some inspiration, please check the following pages:

  • StackOverflow is a great place to ask any question (or search for it first, because it’s very likely that someone has already asked the same question and got an answer :))
  • Code Pen is a great source of inspiration with a lot of projects based on HTML, CSS and JavaScript
  • Dev.to is a blog platform where you can find plenty of useful posts from other developers.