Setup & Installation #1

Today we setup the software prerequisites & clone the Famewerk template. Once you have the following installed on your system you can repeat the Flamewerk setup instructions for anything project you want to build. This will be the most difficult and heavy part of the setup process so take your time to setup your tools properly !

• NodeJS 14.19.2
• Github Account & Github Desktop App
• Yarn
• VS Code or any other code editor

Installing NodeJS#

[

Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.jsNode.js

](https://nodejs.org/en/) Before we can start using the template, we need to have NodeJS installed on our system. NodeJS is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows us to run JavaScript code on the server-side, making it possible to build scalable and efficient applications.

To install NodeJS, follow these steps:

1. Go to the NodeJS website.
2. Click on the "Download" button for the recommended version.
3. Run the installer and follow the prompts to complete the installation.

Once NodeJS is installed, you can check if it's installed correctly by running the following command in your terminal: node -v

If NodeJS is installed correctly, you should see the version number.

node -v

Expected output: 14.19.2

Setting Up a GitHub Account#

To start, head over to GitHub and create an account. Once you have created an account, you can start setting up your profile. Your profile is where you can showcase your coding skills, share your projects, and connect with other developers. You can add a profile picture, a bio, and links to your social media profiles.

Setting Up GitHub Desktop#

GitHub Desktop is a tool that allows you to manage your repositories on GitHub. It is a user-friendly interface that makes it easy to manage your code. To install GitHub Desktop, head over to the GitHub Desktop website and download the version for your operating system. Once you have downloaded the software, install it on your computer.

Once you have installed GitHub Desktop, you can sign in with your GitHub account details. Once you have signed in, you can clone a repository from GitHub. Cloning a repository creates a local copy of the code on your computer. You can then make changes to the code and push those changes back to GitHub.

Installing Yarn through npm#

[

Yarn

Fast, reliable, and secure dependency management.

Yarn

](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) Yarn is a package manager for JavaScript. It allows you to manage your dependencies and install packages easily. To install Yarn, you first need to have Node.js and npm installed on your computer. You can download Node.js from the official website.

Once you have Node.js and npm installed, open up your terminal or command prompt and run the following command:

npm install -g yarn

This command installs Yarn globally on your computer. You can now use Yarn to manage your dependencies in your projects.

yarn -v

Expected output: >1.22.18

Downloading Visual Studio Code#

[

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

MicrosoftMicrosoft

](https://code.visualstudio.com/download) The first step in installing Visual Studio Code is to download the installer for your operating system. You can download the installer from the official Visual Studio Code website. Once you've reached the download page, select the version of Visual Studio Code that is compatible with your operating system. Next, click on the download button to start the download process. The installer file size is relatively small, so the download should complete quickly.

Installing Visual Studio Code#

Once the download is complete, locate the installer file and double-click on it to start the installation process. Follow the on-screen instructions to install Visual Studio Code on your device. During the installation process, you'll be prompted to select the installation location and choose the features you want to install. You can leave these settings as default or customize them as per your requirement.

🔥 Setup Flamewerk#

Cloning the Flamewerk Template with Github Desktop#

You can get started by cloning the Github template using Github Desktop. We will be using the "startup" template, which can be found at https://github.com/flamewerk/startup. Follow these steps to clone the repository:

1. Open Github Desktop and click on the “File” menu.
2. Select “Clone Repository” from the dropdown menu.
3. In the “Clone a Repository” window, select the “URL” tab.
4. Copy the URL of the “startup” Github template from the Github repository.
5. Paste the URL into the “Repository URL” field in Github Desktop.
6. Choose the location on your computer where you want to save the repository.
7. Click on the “Clone” button.

Github Desktop will clone the repository to your computer.

Opening the Folder with Visual Studio Code#

After cloning the repository, you can proceed to open the folder in Visual Studio Code. Here are the steps:

1. Open Visual Studio Code.
2. Click on the “File” menu.
3. Select “Open Folder” from the dropdown menu.
4. Navigate to the location where you saved the repository and select the folder.
5. Click on the “Open” button.

Visual Studio Code will open the folder containing the cloned repository.

Installing Packages with Yarn and Running the Dev Command#

Before running the development command, you need to install the necessary packages using yarn. Here are the steps:

1. Open the integrated terminal in Visual Studio Code by clicking on the “Terminal” menu and selecting “New Terminal”.
2. In the terminal, type the following command: yarn install

Yarn will install the necessary packages.

Once the packages are installed, you can run the dev command. Here are the steps:

1. In the terminal, type the following command: yarn dev

The dev command will start the development server.