Head over to https://github.com/HackYourFutureBelgium/diy-wiki
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.
- 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
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
npm run start(starts a server on port 4600)npm run demo(starts a demo on port 5000)
Running the API
npm run dev- Open Postman
- Explore
localhost:xxxx!
Closing the Server
When you’re done developing or studying you will want to close the server. If you don’t close the server will get an error the next time you try to start it, the drive will still be in use.
- go to the terminal window where you are running the server
- type
ctr-c
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
npm installoryarn install
Building the Frontend
cd clientnpm run buildoryarn build
Deployment on Heroku
-
To use npm to install your application's dependencies please delete
the yarn.lock file.
git rm yarn.lock -
To use yarn to install your application's dependences please delete
the package-lock.json file.
git rm package-lock.json
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 running in a separate tab 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)
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.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent