Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Full Stack Foundations Track Final Project Help (PROJECT COMPLETED)

Update: I've completed the project.

I'm currently working on the Full Stack Foundation Track's final project: https://teamtreehouse.com/library/full-stack-foundations-final-project

I believe I've completed the first two steps, but I'm not sure how to do the last two. https://github.com/josephyhu/Full-Stack-Foundations-Blog

First, I don't know how to get the '/' route to redirect to index.html. I've currently set it to redirect to api/v1/posts since redirecting it to index.html didn't work.

from flask import Flask
from flask_cors import CORS

import models
from resources.posts import posts_api

import config

app = Flask(__name__)
app.register_blueprint(posts_api)

CORS(app, resources={r'/*': {'origins': '*'}})


@app.route('/')
def hello_world():
    return 'Hello world'


if __name__ == '__main__':
    models.initialize()
    app.run(debug=config.DEBUG, host=config.HOST, port=config.PORT)

Updated the code since the redirect is no longer needed.

Chris Freeman
Chris Freeman
Treehouse Moderator 68,441 Points

Do you need to use the blueprint? How about:

app = Flask(__name__,
            template_folder="templates")

@app.route("/")
def index():
    """Serve homepage template."""
    return render_template("index.html")

Post back if you need more help. Good luck!!!

2 Answers

Thanks for the reply!

The project page says to use Vue.js for the frontend. And I think I figured out why it wasn't working. I wasn't supposed to go to localhost:8000; I was supposed to click the index.html file from my project folder.

Now I have a problem with fetching the json data. The status is 200, but when I console log the response, I don't see any of the data. Here's my app.js file.

new Vue({
  el: '#app',
  data: {
    title: 'Full Stack Foundations Blog'
  }
});

fetch('http://localhost:8000/api/v1/posts')
  .then(res => {
    res.json()
    console.log(res)
  })

And, I don't know if I have to use Blueprint. I just used it because it was used in the flask rest api course from Treehouse that I took before doing this project.

Chris Freeman
Chris Freeman
Treehouse Moderator 68,441 Points

Sorry, not up on Vue usage. Might be best to repost this question as a new post with a JavaScript tag

I got my home page working! Now I have to figure out how to get individual posts working... Here's my main.js file:

new Vue({
  el: '#app',
  data: {
    title: 'Full Stack Foundations Blog'
  }
});

new Vue({
  el: '#posts',
  data: {
    posts: ''
  },
  mounted() {
    fetch('http://localhost:8000/api/v1/posts')
      .then(response => response.json())
      .then(data => this.posts = data.posts)
  }
});

I was able to redirect the user to a specific post page when the user clicks the post's title. However I'm having trouble fetching the post itself.

Edit: I got the individual posts working. Now I have to figure out how to add/edit/delete posts.