Guide to setting up this software using Git and NPM on a Mac

I'm facing a challenge trying to install software from GitHub on my Mac. The developer's instructions are quite minimal, or maybe I just lack experience with command line and package management.

You can find the GitHub page here: https://github.com/sehugg/8bitworkshop

(Background: This is an IDE for creating 8-bit games for NES, Atari, etc., which usually runs in a browser. However, I need it locally on my machine to manage multiple projects in different folders.)

The provided instructions are as follows...

Installation

To build the 8bitworkshop IDE:

git submodule init
git submodule update
npm i
npm run build

Usage

To start a web server on http://localhost:8000/ while TypeScript compiles:

make tsweb

Running Tests

npm test

That wraps up the instructions. Now, there are some aspects that I seek clarification on...

Part 1 - Git

I have Git installed, but it seems like it's an old version. Should I uninstall, update, or leave it as is? What do the submodule commands do?

Part 2 - NPM

I need to install NPM, but do I also need Node.js? After installation, what comes next?

Part 3 - TypeScript & Setting up a Web Server

How should I set up a web server for this IDE? Any advice on using TypeScript?

Part 4 - Testing

What exactly am I testing with npm test, and how will I know if it was successful?

If you've made it this far, thank you for reading. I aim to gather sufficient knowledge before proceeding to avoid potential setup issues in the future. Your assistance is highly appreciated.

gittypescriptnpmcommand-lineserver

Answer №1

The issue arose when I mistakenly downloaded the project as a .zip file instead of properly cloning the repository with Git.

Requirements

In order to proceed, ensure that Python 3, Command Line Tools, and Git (which is included in Command Line Tools) are installed on your system.

pyenv provides a seamless installation process for Python 3 on Mac devices that originally shipped with Python 2.

Step One - Setting up Git

Determine where you want to clone the repository, then navigate to that location using Terminal and enter: 

git clone https://github.com/sehugg/8bitworkshop.git

Now, input: cd 8bitworkshop (Tab key can be used for auto-completion) This will place you within the newly created subfolder.

Proceed by entering: git submodule init

Afterwards, type: git submodule update

Step Two - Installation of NPM

Download Node.js from https://nodejs.org/en/download/ (Comes bundled with NPM) Opting for the LTS version is recommended.

To confirm NPM installation, run the following command in Terminal: npm -v It should display the installed version number.

Execute: npm i

If any security vulnerabilities are flagged, use npm audit fix

Warnings like "npm WARN" can typically be disregarded.

You might encounter a message stating "2 vulnerabilities required manual review and could not be updated". Simply ignore this notification.

Enter: npm run build

Step Three - Launching the Web Server

Type: make tsweb

Then, open your browser and visit http://localhost:8000/

Making progress through these steps really isn't as complicated as it seems. Sometimes simplicity is the key.

Step Four - Conducting Tests

Finally, execute: npm test

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building an interactive menu in Angular: A step-by-step guide

I am working with an Interface that looks like this: export interface INavData { name?: string; url?: string | any[]; icon?: string; } To populate this Interface, I use the following data structure: export const navItems: INavData[] = [ { ...

angulartypescript

I've noticed that my Mac inexplicably loses track of Node modules

In my package.json file, I have around twelve dependencies which in turn bring in a plethora of other dependencies. It's no secret that the dependency tree can rapidly expand. Despite running `npm run dev` multiple times without any errors, it recent ...

macosnpm

The Next.js API has a mysterious parameter that remains undefined

I currently have a component implemented import React, { useEffect } from "react"; import styles from "../styles/success.module.css"; import { useRouter } from "next/router"; import axios from "axios"; const Success ...

typescriptnext.js

TypeScript project failing to generate directory in proper file hierarchy

In my TypeScript project, my tsconfig file looks like this: { "compilerOptions": { "outDir": "dist", "sourceMap": true, "noImplicitAny": true, "moduleResolution": "Node", "resolveJsonModule": true, "modul ...

javascriptnode.jstypescriptnpm

The error message "UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty" typically occurs

Struggling to successfully run the build using npm run build. Encountering the following error: UnhandledPromiseRejectionWarning: Error: ENOTEMPTY: directory not empty, rmdir '/var/www/html/abhinav/png-react/png-compressor/build/static' ...

javascriptreactjsnpm

Leveraging TypeScript for defining intricate tree manipulation guidelines

In my current project, I am working on enhancing a TypeScript process that is in place. The goal is to make it more strongly typed for better scalability and accuracy. The structure of the existing tree under consideration is as follows: interface Node { ...

typescript

What is the method for determining which .npmrc file is currently in use?

Having trouble with npm and the packages installed. Upon installing the package "@date-io/core" using yarn, an error arises: error couldn't find package "@date-io/core" on the "npm" registry. The issue seems to stem fr ...

node.jsnpmconfigurationyarnpkg.npmrc

Error encountered: Project is unable to find the definition of s.fn.modal and throws an Un

Encountering an error message stating "Uncaught TypeError: s.fn.modal is undefined" when setting up a Bootstrap5-dialog project in nodejs, specifically when the main index page is loading. Any suggestions on how to resolve this issue would be greatly appre ...

npmbootstrap-5bootstrap-dialog

An error occurred while trying to assign a value to a property that is undefined in Angular: attempting to set the

I am working with two interfaces export interface ClosureItem{ id:string; name:string; visibility?:boolean; } export interface ClosureAllItems{ [K:string]:ClosureItem; Financials:ClosureItem; Risk:ClosureItem; Iss ...

angulartypescript

I encountered an issue when installing npm modules as I tried using all the available registry commands but still

I'm encountering an issue with npm install and have attempted various registry commands, but I still can't resolve the problem. npm timing stage:rollbackFailedOptional Completed in 0ms npm timing stage:runTopLevelLifecycles Completed in 210 ...

node.jsnpmnpm-install

Encountering an issue with the form onSubmit function in React TypeScript due to an incorrect type declaration

I have a function below that needs to be passed into another component with the correct type definition for updateChannelInfo, but I am encountering an issue with the type showing incorrectly: const updateChannelInfo = (event: React.FormEvent<HTMLFormEl ...

reactjstypescripttypescript-typings

Can you explain the functionality of 'npm install -g '?

I tried to create a private npm registry using sinopia and I ran into an issue after executing npm install -g sinopia. Here is the error message that appeared: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffcede6efebac ...

node.jsnpmsinopia

What is the process for installing Node.js and NPM on a USB flash drive running Windows 7?

I am currently using git-bash/mingw32 on Windows 7 without admin privileges. My goal is to install npm on my F: USB drive. Here are the steps I have taken so far: /f/envs/r1 (master) $ curl -L https://npmjs.org/install.sh | sh % Total % Received % X ...

windowsnode.jsgitbashnpm

Do I really need all the dependencies suggested in the angular2 quickstart guide?

As a beginner in Angular 2, I have no prior experience with Angular 1. I recently came across this tutorial https://angular.io/guide/quickstart and I'm curious if all the suggested dependencies are truly essential. After running 'npm install&apo ...

node.jsangularnpm

Using TypeScript in conjunction with Node.js

I'm currently trying to use typescript with nodejs, but I keep encountering errors. Can anyone help me troubleshoot? Here is the code snippet (assuming all necessary modules are imported): import routes from "./routes/routes"; let app = express(); ap ...

node.jstypescriptexpress

Charting responses to inquiries

After reading the contents of this post about rendering dynamic surveys let questions = [{idquestion: 1, question:"age?"}, {idquestion: 2, question: "sex?"}]; let answers = [{idanswer: 1, answer:"17", idquestion: 1}, {idanswer: 2, question: "male", idques ...

typescript

Distribute the capabilities of the class

Is there a way to transfer the functionalities of a class into another object? Let's consider this example: class FooBar { private service: MyService; constructor(svc: MyService) { this.service = svc; } public foo(): string { ...

javascripttypescript

Proper positioning of try/catch block in scenarios involving delayed async/await operations

For the past six months, I have been utilizing async/await and have truly enjoyed the convenience it provides. Typically, I adhere to the traditional usage like so: try { await doSomethingAsync() } catch (e) {} Lately, I've delved into experimenti ...

javascripttypescriptasync-await

Is there a way to instruct Babel to generate polyfills such as `__createClass` only once for multiple files?

In my project, I have multiple ES6 files, each containing at least one class. For every file, the __createClass, __interopRequireDefault, and __classCallback polyfilling functions are generated. I plan to concatenate them using browserify, but it seems re ...

node.jstypescriptbabeljs

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

htmlcssangulartypescript