POSTS

Choosing the right tools to utilize in the JavaScript ecosystem might be challenging because of how quickly it is developing. In order to address this issue, I'll demonstrate how to create a front-end project from scratch in this article.

We'll talk about How to Set Up a Front End Development Project, essential editor extensions, how to include JavaScript libraries in your project, why you should use Node.js even if you want to work on the front end, and how to build up an application bundler that will create a live preview as you type in your browser code.

So let's start now.

Selecting A Code Editor

Let's begin with the basics. You need a good editor because you edit text a lot as a web developer. Which one ought you use then?

Since most editors have fairly similar functions, choosing one is largely a matter of personal preference.

If you don't already have a favourite, I'd strongly suggest VS Code. The de facto standard editor for web development recently has been VS Code.

Here is a graph from the most recent State of JS study. More than 23,000 developers participated in this study, which sought to learn about their preferences for web development. The overwhelming majority chose VS Code.

I strongly advise you to look into the State of JS surveys if you haven't already. It can provide you with a fantastic insight of the most recent JavaScript trends. You can discover which programmes and libraries users prefer to use and which ones they will soon stop using.

The ability to install extensions to all popular editors is one of their best features. Let's go over two essential extensions one by one.

How To Use VS Code's Auto-Formatting Features

Prettier is an extension that improves the readability and consistency of your code.

Imagine you copied and pasted anything from Stack Overflow that is difficult to read. A line is too long, the tabulation is incorrect, and so on. After saving the file, everything will miraculously appear as it should.

Prettier operates in this manner. It formats the code using industry standards. It does more than just wrap the lines and fix tabulation. Additionally, it creates parenthesis to make the code easier to read and ensures that you consistently use quote marks, among many other things.

You must first install the Prettier extension for it to function. Go to the Extensions panel in VS Code, perform a search for Prettier, and then install it.

By default, installing the extension does not automatically format your files when you save them. Once the extension is installed, the default behavior is for you to right-click inside a file and choose Format Document. or choose Format Selection after selecting a portion of a file.

The default formatter must be chosen the first time you do this. Although VS Code already provides a formatter, Prettier's is more effective. Now that we have two formatters, we must inform VS Code that we want to use Prettier in the future for formatting.

You must adjust an option if you want your files to automatically format when you save them.

In your VS Code Preferences, navigate to Settings and look for the Format On Save option. Make sure to check the box because it is false by default. After that, formatting ought to take place automatically each time you save a file.

However, formatting can be debatable. Generally speaking, and especially for novices, I strongly advise using the default settings. However, you can alter things if you favor a different design.

You can specify which lines to disregard with comments, and you can make an rc file with a list of your preferences.

You can make a file called.prettier in the project's root folder and add a few settings to it. If you want to use single quotes rather than double quotes in your files, that is a typical alternative. Alternatively, if you choose not to use semicolons to separate your lines.

Once you save your files with these settings, you ought to get a different outcome.

Why Would A Front End Project Need Node?

We need to set up a few other items before moving on to the second essential expansion. We must first discuss Node.js. What exactly is Node, and why would a front-end developer require it?

Although Node is frequently linked to back-end development, this is not entirely accurate.

If you read a job posting for a Node developer, it is likely that they are also searching for a back-end developer.

Even if you work in front-end development, you will still need node.

What exactly is Node, why is it thought to be used for back-end development, and why would a front-end developer even require it?

A JavaScript runtime is called Node. JavaScript files are executed without using a browser. JavaScript code can be run in two different ways. Either you include it on a webpage and use a browser to view the complete thing, or you use Node to only view the JavaScript file.

In all scenarios, JavaScript largely acts in the same way. However, there are significant distinctions in what JavaScript can accomplish when run with Node and in a browser.

For instance, JavaScript can read and edit HTML elements when it is executed in a browser. The primary purpose of JavaScript is to accomplish just that.

There is no surrounding HTML file for JavaScript to access with Node. JavaScript is self-executing.

JavaScript, on the other hand, may access your file system in Node and read and write files.

You may, for instance, execute scripts on your computer to create a project skeleton for you. You may verify your files and get the errors immediately fixed. You could also execute your test files.

Simply put, Node enables you to execute various scripts that simplify your life.

Visit nodejs.org and download the most recent stable version marked as LTS to install node. You may also go to your terminal and type node -v to see if Node is already installed or not. If you receive a version number, Node is installed.

Consequently, the question of why Node is associated with backend development may be answered. Because the servers require a mechanism to operate them without a browser if the back-end code is written in JavaScript. So, yes, Node will be used if you are a back-end developer utilizing JavaScript. Node is a lot more than that, though.

Managing Your Project

We can install a bundler now that Node is installed. Who are bundlers? A bundler is a tool that compiles all of your files into a tidy package that you can execute in your browser.

Why couldn't you use the browser to run your files? You are correct if you use plain HTML, CSS, and JavaScript files. Perhaps you won't even require a bundler.

However, as web development tools have grown, your browser won't be able to grasp your files as soon as you start using something more sophisticated.

Do you employ React? The HTML-like JSX syntax used by React is not a part of JavaScript's syntax. To convert it to simple JavaScript, you need a tool. Otherwise, the browser won't be able to run it.

Do you employ SCSS or another CSS language? However, you must convert it to normal CSS so that the browser can comprehend it.

Utilizing a bundler will also enable you to create a live preview of your website as you are coding. Every time you save a file, the outcome appears instantly in your browser.

So how do you choose a bundler? There are numerous choices. Webpack is the most popular bundler right now. A powerful tool with many configurable possibilities is Webpack. However, this breadth of choices is also a downside. If you are unfamiliar with it, setting it up is not an easy task.

Parcel is a wonderful alternative that has recently grown in acceptance. Webpack and parcel both have things in common. It is actually better in certain aspects.

It has the wonderful feature that, once installed, it requires no settings. Parcel understands your files and determines what you are utilising automatically.

Do you employ React? No issue; Parcel understands that and translates JSX. Do you employ SCSS? No issue. Parcel is aware of what to do.

You must enter a command into your terminal in order to install Parcel. To install it, we'll use npm, the node package manager. A tool that comes with Node is called npm. Npm is available if you installed Node.

JavaScript libraries can be installed globally on your machine using npm.

Run the following command in your terminal by going there. Here, the -g tag denotes global. You may use Parcel to run any project after it has been installed on your machine. Parcel only needs to be installed once; you don't need to do it for every project you create.

Let's look at how to use Parcel to manage a project after installing it on a global scale

Consider a website that contains HTML, CSS, and JavaScript files. Parcel can generate a real-time preview for us.

Make sure you are in the folder containing your project when you open the terminal. If you are using Visual Studio Code, you can utilise the built-in terminal, which will launch in the appropriate location by default.

The next command will start parcel once we have confirmed that we are in the correct folder. You will then receive a URL where you may view the outcomes. We can view the outcome of any file change in real time in the browser after saving it.

Until you stop it or close the terminal window, this script will run and create a live preview of your website. Generally speaking, you can continue to use it as you work on your website. Once you're done, you can stop it by using Ctrl+C.

By clicking Ctrl+C to stop it and run the same script again, you can resume it if it becomes desynchronized or if you break it due to an error.

Adding Libraries To Your JavaScript Project: How To Do It?

Let's look at how we can add libraries to our project now that Node has been installed and we've had a chance to see npm in action.

A CDN was once used by developers to add libraries. By including a script element in your HTML that points to a URL, you can import a library.

That is fine and it still functions effectively, however many developers now add libraries to their projects using npm, or the node package management. So how does it function?

You must first run the following command in your terminal to initialise the project. Once more, you must execute this command in the project's root directory (pro tip: use VS Code's built-in terminal to begin in the appropriate location).

This command added some metadata to the package.json file in your root. The project name, description, version number, and other details are included. All of these settings will have a default value when the yes flag is added.

Now we can use the npm install command to add libraries to our package. We used Three.js to render 3D boxes in the browser in my previous article.

How To Receive Coding Advice While Coding?

ESLint is the second essential addon for VS Code. ESLint can provide you with coding advice while Prettier was formatting the code.

When you try to understand the code, there are a number of JavaScript patterns that might lead to errors or be deceptive.

In this illustration, we declare a variable, but due to a typo, we attempt to use a variable that is not present.

This will be highlighted for you by ESLint. When you declare a variable, it will warn you that you won't use it, and when you use the variable, it will alert you that you're attempting to use an undeclared variable.

Following these alerts, it's simple to see that you made a mistake. Of fact, ESLint is much more complicated than merely catching this kind of easy mistake. There are those that are less clear, where you might not initially get why it complains.

You can then choose the link to view a more thorough description of the harm that this pattern is thought to cause and how to avoid it.

How then can you use ESLint into your project? There are a few more steps involved in setting it up than installing an extension. Fortunately, most of these tasks only need to be completed once.

To begin, you must install the ESLint extension, just like you did with Prettier. Install ESLint by going to Extensions and searching for it.

Additionally, you must create an ESLint configuration. However, you must first ensure that your project has been initialised with npm init.

To start your project if it doesn't already have one, run npm init —yes if you don't already have a package.json file.

Then, use the following command to construct an ESLint configuration.

Another tool included with Node is npx. Even scripts that are not on your machine can be run by it.

In this instance, we just run the ESlint script without ever installing ESlint. Although we installed the ESLint extension, this particular script is not what is being run.

This will produce a bundle that can be executed in the browser in the dist folder. To see your finished product, simply open the new index.html file located in the dist folder in your browser.

How To Create A Vue Or React Project?

Do you intend to use React or Vue.js to create a website? Essentially, you must follow the same procedures.

Start a project with npm init, install the necessary dependencies, configure ESLint, and then launch it with parcel.

Visit my video on YouTube where we walk through the previous phases and quickly demonstrate a React and Vue.js project.

You can use those fundamental tools when working on a front-end JS project. Libraries may be added with npm, code organization is achieved with prettier, unneeded hassles are avoided with elslint, and your project is run with parcel.

What happens when you've completed it? It must be included in a finished production build that you can publish online.

After setting up a front end project, you are now prepared to begin developing your website.

If all this seems too much to do on your own, you can hire a Front End Development Company or a Software development company they will help you take all the essential steps to set up a Front End Development Project.