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.
← 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.
Let's keep track of the submitted favorites using an array. First add this code near the top of server.js:
const favorites = [];In the POST route, inside the if(color) block, add this code to save the submitted value to the array, and write it to the console:
favorites.push(color);
console.log(favorites);Click Tools > Logs at the bottom of Glitch to see the log statement in action when you submit new colors through the form.
Clearly this is not a robust data storage approach and won't persist for long! Your Node apps can use a variety of databases, like SQLite and Airtable.
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.