This project is a port of the glitch.com example Node.js app. It includes a Node.js server script written in RacketScript, a web page that connects to it, and a Makefile to build and deploy in one command.
The front-end page presents a form the visitor can use to submit a color name, sending the submitted value to the back-end API running on the server. The server returns info to the page that allows it to update the display with the chosen color. 🎨
Node.js is a popular runtime that lets you run server-side JavaScript. This project uses the Fastify framework and explores basic templating with Handlebars.
RacketScript is an experimental transpiler from Racket to JavaScript that supports both server and client side JS.
You'll get best use out of this project if you're familiar with basic JavaScript. If you've written JavaScript for client-side web pages this is a little different because it uses server-side JS, but the syntax is the same!
← README.md: That’s this file, where you can tell people what your cool website does and how you built it.
← public/style.css: The styling rules for the pages in your site.
← server.js: The original Node.js server script for your new site, supplied by Glitch. The JavaScript defines the endpoints in the site back-end, one to return the homepage and one to update with the submitted color. Each one sends data to a Handlebars template which builds these parameter values into the web page the visitor sees.
← server.rkt: The original Node.js server script, ported to RacketScript for your new site.
← package.json: The NPM packages for your project's dependencies.
← src/: This folder holds the site template along with some basic data files.
← src/pages/index.hbs: This is the main page template for your site. The template receives parameters from the server script, which it includes in the page HTML. The page sends the user submitted color value in the body of a request, or as a query parameter to choose a random color.
← src/colors.json: A collection of CSS color names. We use this in the server script to pick a random color, and to match searches against color names.
← src/seo.json: When you're ready to share your new site or add a custom domain, change SEO/meta settings in here.
The original app files were taken from the glitch.com example node.js app.
Take a look in TODO.md for next steps you can try out in your new site!