A nifty little site that allows you to create, read, and update pages in a markdown wiki. We've provided most of the code for you. All you need to do is write the code that sits between the server and your file system, reading, writing and updating files saved on your computer.

You coaches will share a link to a live, working version of this wiki so you can know how yours should work when it's finished.

• Learning Objectives
• Getting Started
  • Running the API
  • Running the Frontend
• Your Task
  • get an existing page
  • post a new page
  • get all page names
  • get all tags
  • get page names by tag
• Helpful Links
• Contributors

• Debugging Node apps in VSC
• Using npm: installing dependencies, running scripts
• Understanding what "fullstack" means
• Using branches
• Running the Frontend & Backend separately

• Reading and writing from the File System
• Correctly using Sync & Async file system manipulations
• Writing Express routes with different verbs and URL parameters
• Using Async/Await to write more readable code

• Navigating larger directory structures
• Understanding code you didn't write
• Setting up and running other people's projects
• Contributing to existing code bases

• Explaining why you can't run an API with the browser
• Running API's with Node.js & VSC
• Testing API's with Postman
• Understanding the need for CORS
• URL Request Parameters
• Sending values in the Request Body

• Know that it exists
• Be able to install dependencies
• Be able to run the frontend with npm run start

TOP

Before you can get started writing your routes you'll want to make sure all dependencies are installed, and to make sure the frontend and backends are operational.

Step 0 is to fork and clone this repo, this repo is the starter code. Then you can move on to ...

Installing Dependencies

1. npm install

Running the API

1. npm run dev
2. Open Postman
3. Explore localhost:xxxx!

The frontend works, you don't need to change any code there. All you need to do is run it! (and study the code a bit if you're feeling ambitious :)

Installing Dependencies

1. npm install or yarn install

Building the Frontend

1. npm run build or yarn build

TOP

What you need to do to complete this assignment is write the 5 routes described in the `./wiki-server/server.js' file. You'll know your work is finished when you can use every button, link, and page in your frontend!

We recommend always keeping the live demo open as you develop to be sure you keep the final product in mind. You can find the link in a pinned message on your class' Slack channel.

Calling this route should return a response with a property called body containing the text stored inside the file with the name :slug

• method: GET
• path: "/api/page/:slug"
• success response: {status: 'ok', body: '<file contents>'}
• failure response: {status: 'error', message: 'Page does not exist.'}

Calling this route with a body property in the body of your HTTP Request, and a file name in the :slug URL parameter will add a new markdown file to the ./wiki-server/data directory

• method: POST
• path: "/api/page/:slug"
• body: {body: '<file content>'}
• success response: {status: 'ok'}
• failure response: {status: 'error', message: 'Could not write page.'}

Calling this route will return a response with a property called pages which is an array containing all of the file names in ./wiki-server/data.

• method: GET
• path: "/api/page/all"
• success response: {status:'ok', pages: ['fileName', 'otherFileName']}
• failure response: (none)

Calling this route will return a response with a property called tags which is an array containing all of the tagged words in all of the files of ./wiki-server/data. Tagged words are any word in a file with a # in front of it, like so #tree. Or #table,

• method: GET
• path: "/api/tags/all"
• success response: {status:'ok', tags: ['tagName', 'otherTagName']}
• failure response: (none)

Calling this route will return a response with a property called tag which indicates which tag was used to search, and a property called pages which is an array of all the file names containing that tag

• method: GET
• path: "/api/tags/:tag"
• success response: {status:'ok', tag: 'tagName', pages: ['tagName', 'otherTagName']}
• failure response: (none)

TOP

Debugging JS Servers In VSC

• VSC Debugger (from the docs)
• Debugging Node apps (from the docs)
• Express in VSC (video)
• Express in VSC (another video)

Node.js Tutorials

These tutorials will introduce you to a bunch of new features in Node that you haven't seen in the Browser. While you're following these tutorials, it's important to remember that at it's core Node.js is still JavaScript. Everything you've learned so far (except for the DOM & fetch :) is still true! The Event Loop, Classes, Closure, Arrays, Objects, Variables, this., it's all still the same.

The tutorials below will introduce to what's new and what's special about Node. But don't forget to take some time and solve a few of the JavaScript Exercises above to get used to working with plain, vanilla JS in the terminal.

• Traversy: Node for Absolute Beginners
• Traversy: Node.js Crash Course
• Mosh: Node.js in 1 Hour

fs: Synchronous & Async

• promises: FunFunFunction
• async/await: FunFunFunction
• fs: TechSith video
• fs: Net Ninja video
• fs, async vs. sync: Eduonix
• fs, async vs. sync: Kharbanda

API's and Express

Node.js is a JavaScript runtime environment capable of writing Web Servers and API's all by itself. But it's a bit annoying. Express is a great and easy to use framework to help you write API's and Web Servers by handling all of the boring stuff for you so you can focus on what your app does.

Postman - an app for testing your API's without using a browser.

JSON Server - An NPM module that starts a RESTful API without you having to write a single line of code. This can be helpful practice for getting the hang of API's and Postman without getting tripped up by bugs and errors in code you write.

• FCC: Node.js & Express

TOP

TOP