This project includes a Node.js server script and a web page that connects to it. 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.
Last updated: 10 July 2023
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 Node.js server script for your new site. 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.
← 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.
Take a look in TODO.md for next steps you can try out in your new site!
Want a minimal version of this project to build your own Node.js app? Check out Blank Node!
Glitch is a friendly community where millions of people come together to build web apps and websites.
- Need more help? Check out our Help Center for answers to any common questions.
- Ready to make it official? Become a paid Glitch member to boost your app with private sharing, more storage and memory, domains and more.