Part 3: Forms + a bit of random stuff
Recap of Last Time
- We built a Node.js app utilising the built-in http.createServer
- Starts an HTTP server and serves static files out of the ./public directory
- We implemented dynamic routing with a handy easy to define syntax
- Our routes use Handlebars template files to display content that's not static
Wawaweewaa we covered a lot last time! This time, we'll go a bit slower.
Comment from last stream:
Let's talk about the debugger
This code works great in-browser! Breakpoints are amazeballs!
BUT, getting them to work in Node.js requires one more step:
Breakpoints to the rescue!
Not a lot of visibility into nested objects!
And now, on to forms...
HTML forms are simple:
And modern frontend frameworks are essentially this:
Let's parse it!
Form data can be complicated to deal with...
- Content types
- Multipart data
- File uploads
an ultra-naive form body parser
NOTE: You probably don't want to use something like this live! It assumes the content is text, that it's not multipart and that the format is a "querystring":
But let's add a route into our app!
Let's create a new route:
And a template:
Time to create a "hook"
A request to your server has a lifecycle! So let's add a step:
Finally, let's add a form to test!
Form data is hard. We may have built a really simple parser but it works and all we need at the moment!
Well done, you made it! 👏👏👏
See you next time where we look at Hooking up a database to save some of that beautiful data.
Please don't hesitate to contact me or leave feedback on the course:
See today's code: https://github.com/frameworkless-js/remind.ist/tree/stage/3
See today's lesson running live: https://part3.remind.ist
frameworkless.js -> Part 3
By Mike Timofiiv