Skip to content

Latest commit

 

History

History
182 lines (109 loc) · 5.61 KB

README.md

File metadata and controls

182 lines (109 loc) · 5.61 KB
Raw

A Tutorial: Building A Portfolio Site, using Node.js and Express, JSON data, and PUG templates

Slowly turning this into a tutorial project

Out of this project, I will create several other projects.

the actual repo for my live portfolio site is now private, for obvious reasons =)

this tutorial does not go into how to setup hosting nor how to launch the app online

TODO: Create a Bootstrap version of this project

TODO: Create a React version of this project

A Portfolio Site for your of Web Apps

  • built as part of Full Stack Java Script, Team TreeHouse Tech Degree, Unit 7

New Features Wish List

  • implement back-end and UI for adding more featured projects and project data

Prep and Build Steps:

Step 1: Featuring Your Web App, Web Server or Projects

  • Verify that all projects to be featured pass a quality check and are all shined up for display

  • ideally have finished projects, that are ready to go live

    • ideally Github public repo or some other public place for visitors to see your code
    • a live internet link to the demo of or to show the app or service running

Step 2: Images and Screenshots of Projects

  • Profile pic of yourself or logo, avatar that will be displayed with your portfolio

  • best to take widescreen screen shots of you app or service

    • full imgs to show each site's various pages

Step 3: create json data for projects and profile

  • imported using app.locals

  • hint: rename the sample data.json and profile.json to data.bak.json and profile.bak.json

    • when ready, just create your own data/profile.json files using the same json syntax

  • if keeping data in a different folder and/or using different names

    • place path to and name of your json data files in respective places in importData.js

  • the importData.js will automatically import your json data for use in the app

    • for now...
      • dont change portfolio.projects and portfolio.profile
        • these object references are used through-out the code
    • once more familiar with the code...
      • then change the object names and every references to them

todo: include some sample explanation or demo code here

Step 4: set up routes and rendering for valid paths

  • If you did step 3: correctly, you wont need to doing anything here.

    • In a real world app, a developer and dev-ops will need to know these routes inside and out.
    • You will need know how the routes are setup, how these work, and what happens the routes don't work.

  • The static routes are loaded by...

    • routes/index.js
    • routes/about.js

  • The dynamic routes for each featured project are loaded by...

    • routes/projects.js
      • this uses the object imported from importData.js to create any routes needed

  • Console logging is built-in

    • so the web server will log what it is doing
      • routes/message.js is an easy way to set up console messaging
        • imported by app.js
        • used by static routes (index.js) and dynamic routes (projects.js)
        • in a real world production web server, this will most likely be handled by the hosting platform
          • I use Heroku, but there are many others; like Joyent for example.

  • todo: add code to enable when in development mode, but disabled in production mode

  • todo: add code to write console logging to log file in development mode

STEP 5: rendering for static, index and about,

  • project and profile data passed to pug files via res.local

    • todo: include some sample explanation or demo code here

  • project and profile data properties added to all pug files

    • todo: include some sample explanation or demo code here

STEP 6: error handling

  • uses custom error module: routes/message.js

    • console logging of errors
    • different err logged and data properties and profile data passed to error.pug
      • when called from /projects/:id
      • or for invalid paths

  • todo: include some sample explanation or demo code here

Step 7: include use of node.js path module

  • todo: include some explanation or demo code here that shows why 'PATHS' is needed

STEP 8: This is private, unpublished, NPM package

  • launches express app in development environment

    • npm start

  • todo: include NPM how-to and sample explanation or demo code here

  • todo: include use of Firefox and/or Chrome Dev Tools how-to here

COMPONENTS by file:

Javascript

./app.js :

  • main express app

./routes/index.js and projects.js :

  • routes for /, /about and /projects

./routes/message.js :

  • modified from Express Basics version
    • added custom msg key/values
    • and added a logErrors function
    • for console and error logging

./importData.js :

  • to import project, profile json data

JSON Data

./profile.json :

  • personal and contact info data used in
    • layout.pug, about.pug and sidebar in layout.pug

./data.json :

  • project data used in part through-out all pug files
    • and in project.pug and projects.pug

CSS Styling

./public/css/styles.css :

  • placed my custom styles at end of styles.css

PUG templates

./views/layout.pug :

  • sets up the basic layout of all the pages in the site

./views/project and projects.pug :

  • for rendering project views, your profile page, and project data properties as needed

./views/index.pug and about.pug :

  • add profile and project data properties as needed

./views/error.pug :

  • for rendering custom status 404 pages
  • using error.status, error.message and error.stack properties

./img/profilePic :

  • add my own profile img and favicon img

./img/project :

  • screen-shots of tech-degree projects 1 thru 5