← Back to Explore Feed ✨

Setting up Node JS

A brief quickstart to using NodeJS and the node package manager (npm).

Beginner
Workshop
Project
JavaScript
Web Dev

Written by

@cometblazer

on July 1, 2024

Setting Up Node.js: A Quickstart Guide

Whether you're a coding novice or a seasoned developer, getting your environment set up quickly is crucial. In this guide, we'll walk you through the steps to set up Node.js and npm (Node Package Manager), so you can hit the ground running on your hackathon project. We'll also demonstrate how to use npm by installing the typewriter-effect package.

What is Node.js and Why Should You Use It?

nodejs logo

Node.js is an open-source, cross-platform runtime environment that allows you to run JavaScript code on the server side. Traditionally, JavaScript was used primarily for client-side scripting in web browsers. However, with Node.js, you can now use JavaScript for server-side programming as well.

Why Use Node.js?

  • Fast and Efficient: Built on Google Chrome's V8 JavaScript engine, Node.js is designed for performance and scalability.
  • Non-blocking I/O: Its event-driven, non-blocking I/O model makes it ideal for real-time applications.
  • Single Programming Language: You can use JavaScript for both front-end and back-end development, streamlining your development process.
  • Rich Ecosystem: With npm, Node.js has a vast repository of open-source packages that you can leverage to speed up development.

It's okay if you don't know all the nitty-gritty details of how everything works when you're starting out; just know that Node.js is very important in web development!

Installing Node.js

  1. Download Node.js Installer:

Visit the Node.js website. Then, click on the "Download" button to get the latest LTS (Long-Term Support) version.

  1. Run the Installer:

Open the downloaded file and follow the prompts in the installation wizard. Make sure to check the option to install npm as well.

  1. Verify Installation:

Open a command prompt and type node -v to check the Node.js version. Then, type npm -v to check the npm version.

check node version

What is npm and Why is It Important?

nodejs + npm

npm (Node Package Manager) is the default package manager for Node.js. It allows you to install, share, and manage dependencies for your projects. With over a million packages in its registry, npm provides a treasure trove of tools and libraries that can significantly speed up your development process.

Key Benefits of npm:

  • Dependency Management: Easily manage project dependencies.
  • Version Control: Control the versions of packages to avoid compatibility issues.
  • Scripts: Automate tasks using npm scripts.
  • Open-source Packages: Access a large repository of reusable code.

Typewriter Effect Workshop

npm typewriter Source: https://www.npmjs.com/package/typewriter-effect

Now we're going to demonstrate how to use npm by installing and using the typewriter-effect package from npm. One can implement a typewriter effect on their own, but it's much simpler and more reliable to use an npm package. This workshop will guide you through the process of adding a typewriter effect to a Next.js project, making your content dynamic and engaging. Prior knowledge of NextJS is recommended but not required for this workshop - and this typewriter add-on can definitely be added to projects in other languages!

To get started, clone the starter template provided for this workshop. Open your terminal and run the following commands:

git clone https://github.com/CometBlazer/nodejs-example cd nodejs-example npm install

Once the installation is complete, verify the project setup by running the development server with npm run dev. You should see the project running on http://localhost:3000, displaying a basic template.

basic template

Before diving into the typewriter effect, it's important to understand the role of package.json and package-lock.json. The package.json file contains metadata about your project, including dependencies, scripts, and versioning. It's essentially the blueprint for your Node.js project. The package-lock.json file ensures that the same versions of dependencies are installed across different environments, providing consistency and reliability.

package json Starter Template's package.json file

Now, let's install the typewriter-effect package. Run the following command in your terminal:

npm install typewriter-effect

This command adds the typewriter-effect package to your project, updating the package.json to include this new dependency. You can verify the installation by checking the dependencies section in your package.json file.

Next, we'll integrate the typewriter effect into our Next.js project. Open the app/page.tsx file and modify it to include the typewriter effect. Here’s how you can do it:

First, we need to import Typewriter. Insert the following code at the very top of the file, right below use client:

'use client'; //app/page.tsx import Typewriter from 'typewriter-effect'; /*Rest of Code*/ export default function Home() { return (

Next, add your typewriter component

<Typewriter options={{ strings: ['Hello, world!', 'Welcome to the Typewriter Effect Workshop.'], autoStart: true, loop: true, }} />

where it says

<div className="text-xl text-blue-700"> {/* Insert typewriter effect here */} </div>

You can customize your text to make it your own!

Full code:

import Typewriter from 'typewriter-effect'; export default function Home() { return ( <main className="flex min-h-screen flex-col items-center justify-between bg-gray-100 text-gray-800"> <header className="w-full text-center p-5 bg-blue-600 text-white"> <h1 className="text-4xl font-bold">Typewriter Effect Workshop</h1> </header> <section className="mt-10 text-center"> <h2 className="text-2xl mb-4">Interactive Typewriter Effect Demo</h2> <div className="text-xl text-blue-700"> <Typewriter options={{ strings: ['Hello, world!', 'Welcome to the Typewriter Effect Workshop.'], autoStart: true, loop: true, }} /> </div> </section> <section className="mt-10 w-full max-w-2xl text-center"> <h3 className="text-xl font-semibold mb-3">Why Use the Typewriter Effect?</h3> <p className="mb-4"> The typewriter effect is a great way to make your content more dynamic and engaging. Whether you're building a landing page, a portfolio, or a blog, adding a typewriter effect can draw attention to your key messages. </p> <h3 className="text-xl font-semibold mb-3">How to Implement the Typewriter Effect</h3> <p className="mb-4"> Using npm, you can easily add the typewriter effect to your Next.js project. Follow the steps in this workshop to see how simple it is to integrate and customize the effect to fit your needs. </p> <h3 className="text-xl font-semibold mb-3">Resources</h3> <ul className="list-disc list-inside mb-4"> <li><a href="https://www.npmjs.com/package/typewriter-effect" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Typewriter Effect on npm</a></li> <li><a href="https://nextjs.org/docs" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Next.js Documentation</a></li> <li><a href="https://nodejs.org/en/docs/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">Node.js Documentation</a></li> </ul> </section> <footer className="w-full text-center p-5 bg-blue-600 text-white"> <a href="https://github.com/vercel/next.js/tree/canary/examples/typewriter-effect"><u>Github Repository</u></a> </footer> </main> ); }

In this implementation, we import the typewriter-effect package and use it within the Home component to create a typewriter effect in the specified section. The Typewriter component takes an options prop where we define the strings to display, set autoStart to true, and enable looping.

Customizing the typewriter effect is straightforward. You can adjust various options such as delay, deleteSpeed, cursor, and more to fit your preferences. For instance, to change the typing speed and cursor appearance, modify the options prop:

<Typewriter options={{ strings: ['First sentence.', 'Second sentence.'], autoStart: true, loop: true, delay: 75, deleteSpeed: 50, cursor: '_' }} />

finished project

By following these steps, you’ve successfully integrated a typewriter effect into your Next.js project, enhancing the interactivity and appeal of your web content. The typewriter effect is a powerful tool for drawing attention and making your messages stand out.

Feel free to explore more customization options and refer to the additional resources provided to further enhance your project. Happy coding!

Celebrate

npm Reference

Here's a list of commonly used npm commands:

1. Installing a Package

To install a package, use the npm install command followed by the package name. For example, to install the express package, you would run:

npm install express

You can also use the shortcut of "npm i" instead of "npm install":

npm i express

2. Installing a Package Globally

Global packages are available from any location on your system. To install a package globally, use the -g flag:

npm install -g nodemon

3. Adding a Package to Your Project

To add a package to your project’s package.json file, use the --save flag:

npm install express --save

4. Installing all dependencies

If you clone a project from Github, you would need to install all the dependencies present in the package.json onto your local machine as well. You can do so with the following shortcut:

npm install

or

npm i