Setup

For developing applications using Vue.js, we need to set up a development environment on our system. This includes installing a code editor, creating a project and the most important one, installing configuring Vue.js library.
This section of  Vue.js tutorial will cover all of these in detail and a simple language.
[the_ad id=”89″] Installing code editor
A code editor is a software that you will use to write application files. It is responsible for managing the entire project.
There are many editors that you can use to learn Vue.js and create applications using it but the most preferred one is Visual Studio Code or simply VS Code by Microsoft.
In order to download it, navigate to the site https://code.visualstudio.com/download and download the software as per your operating system. Once downloaded, click the file downloaded and follow the on-screen instructions.
Installing Vue.js
There are two ways to add Vue.js to your application.
1. Adding Vue.js file manually
Choose an appropriate location on your system and create a folder that will contain Vue.js library and your own application files. On my system, the folder is F:\vue.
Download Vue.js script file from its download site and include it in the main file of your application in script tag just like javascript is used. This is a simpler approach and is recommended for learning purpose if you are just starting to learn.
Head over to Vue.js website where you will see an installation link as shown below.
vue.js getting started
Click the above link where you will see options to download Vue.js file as below.
downloading vue.js file
Click on Development Version and it will download a file named vue.js. Place this file in the project folder F:\vue.
Now create an html file, suppose we name it as index.html. Include Vue.js file in it by placing the following line at the top.

<script src="vue.js"></script>

assuming that both the files are in the same folder.
[the_ad id=”94″] 2. Using CDN
CDN stands for Content Delivery Network and is used for serving resources. A CDN simply provides a URL for a resource, which, in this case is Vue.js file.
Include the URL in the HTML file of the application and you can then use Vue.js. This method is similar to the first one except that in this case, the js file will be fetched from a remote server while in the first approach, the file would be present on your system locally.
CDN for Vue.js file is  https://cdn.jsdelivr.net/npm/vue 

As before, create an index.html file in the project folder and include the following tag at its top.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. Using Vue.js Command Line
This option should be chosen when developing a real world application as it will create a complete project structure with many folders and files.
If you are just starting out and are not familiar with other frameworks such as angular or react, then use the first approach. Once you become comfortable with Vue, then set up a proper project using Vue CLI(Command Line Interface).
For installing Vue.js with this approach, you need to have Node.js installed on your system. Node.js provides a runtime environment for javascript applications in the form of a server.
Installing Node.js
For installing Node.js, go to its downloads page, download the latest stable release as per your operating system and install it. If you install Node.js, npm is also installed along with it. Once installed, open command prompt and type

  • node -v : If node is successfully installed, it will print the version of node installed.
  • npm -v : If npm is successfully installed, it will print the version of npm installed.

Node.js automatically installs npm which stands for Node Package Manager is a package manager for javascript applications. It makes it easy to install packages required by an application via its command line client.
A package can be considered as a library. If you are from java background, consider a package as a jar. If you know a package name, then you can download it using command npm install package-name
[the_ad id=”95″]
Once Node.js is installed, you can easily install Vue.js CLI using npm using below command line

npm install –global vue-cli

With Vue CLI, you can easily and automatically create Vue project templates having all the required files pre-configured. Without CLI, you will have to create everything manually which is a tedious task as you will see and understand later.
Note that --global flag installs it globally so that you can access Vue CLI from anywhere on your system. Without this flag, CLI will be accessible from within the current folder only.
After CLI is installed run the following command to create your first Vue.js project.

vue init webpack-simple vueapp

where vueapp is the name of the folder in which the project will be created. It will ask you the name of the project, its description, author etc., with default values.
You can change them or hit enter to keep the defaults as shown in the image below.

F:\>vue init webpack-simple vueapp

? Project name vueapp
? Project description A Vue.js project
? Author Codippa
? License MIT
? Use sass? Yes

vue-cli · Generated “vueapp”.

To get started:

cd vueapp
npm install
npm run dev

After the project creation is complete, move inside the project folder using cd vueapp and run command

npm install

as shown in the image above.
This will install all vue related libraries in the designated folder.

F:\vueapp>npm install> node-sass@4.12.0 install F:\vueapp\node_modules\node-sass
> node scripts/install.js
….
….
added 847 packages from 625 contributors and audited 10418 packages in 96.218s

Finally execute command

npm run dev

F:\vueapp>npm run dev

> vueapp@1.0.0 dev F:\vueapp
> cross-env NODE_ENV=development webpack-dev-server –open –hot

Project is running at http://localhost:8080/

[the_ad id=”86″] This will start a server listening at port 8080 and will also launch the default browser with the page loaded as below.

Folder contents of the project generated by vue CLI will be.

All of the application code should be written inside the src folder. As evident from the folder contents, this is a very complex structure as compared to the first approach.
An advantage with this approach is that if you make any changes and save, it will automatically refresh the browser page while with first and second approaches you need to refresh manually to confirm the changes.
[the_ad id=”267″] If you see the same page on the browser and same folder contents, then you have successfully configured Vue.js in your application with this method.
Opening project in code editor
Final step is to open the code editor(VS Code) that we configured in the first step with the project contents loaded. Follow below steps to open VS Code with the project contents loaded into it.

  1. Open command prompt on windows or terminal on Mac and linux systems
  2. Navigate to the location where you created the project(either manually or using Vue CLI)
  3. Type code . (code space dot) and hit enter.

This will launch VS Code with the project contents loaded as shown below. Images shown below are for each of the methods described above in the same order.

Vue,js downloaded and added manually

Vue.js loaded from CDN

Generated by vue CLI

[the_ad id=”88″] Congratulations!!! you have successfully set up Vue.js in your application and you are now ready to start learnng Vue.js with this tutorial.

Setup

In order to develop a react application, you need to prepare a development environment on the system. This guide walks you through the process and if you follow it, then by the end of this post, you will be all set to start creating react applications right on your machine.
[the_ad id=”89″]

Softwares required
As a part of React development environment, you need to have some softwares/tools installed on your system. They are

  1. node.js : Provides runtime environment for javascript applications. It starts a light weight server on your system for serving HTTP requests. Another important use of node.js is the npm tool which it provides.
  2. npm: Stands for Node Package Manager is a package manager for javascript applications. It makes it easy to install packages required by an application via its command line client. A package can be considered as a library. If you are from java background, consider a package as a jar. If you know a package name, then you can download it using command npm install package-name
    npm is automatically installed when you install node.js.
  3. A code editor: Preferably an IDE for writing react code, provides features such as code intellisense, debugging etc. We will be using Visual Studio Code as the IDE.

[the_ad id=”94″]

Installing node.js
For installing node.js, go to its downloads page, download the latest stable release as per your operating system and install it. If you install node.js, npm is also installed alongwith it. Once installed, open command prompt and type

  • node -v : If node is successfully installed, it will print the version of node installed.
  • npm -v : If npm is successfully installed, it will print the version of npm installed.

Installing create-react-app
Once npm is installed, you can install any package using it directly from your machine, no need to go anywhere.  Now, in order to create a react application you need react libraries such as react and react-dom. You also need a Babel compiler for converting JFX code(covered later) into javascript. React application bundler webpack is also required.
After installing react libraries you will need to create your own application which will use many files that should be arranged in a specific architecture. Creating this structure manually would be a painful task.
create-react-app is a package which manages all this. It downloads and installs react libraries. It also creates the skeleton required for developing a react application. We can install this package using npm using its install command

npm install -g create-react-app

Here, npm install is the command which tells npm to install a package, package name is given at the end. -g flag instructs npm to install create-react-app globally. This means that once installed globally, you can access this package from any location on your system. If not installed globally, then create-react-app will work only at the location where you ran the above command.

Above command can be shortened to npm -i -g create-react-app

where flag -i stands for install and flag -g stands for global installation.

Installation of create-react-app takes some time, so please be patient.
[the_ad id=”95″] Note that if you do not use create-react-app package then you will have to install react libraries, Babel, webpack manually. Also, while creating react application, you need to create all html and js files manually. Thus, it is suggested to use create-react-app package.
Getting code editor for React
Microsoft Visual Studio code is the most preferred IDE for writing react applications. It is open source and free, contains features such as autocomplete intellisense, code debugging, integration with repositories etc. It can be downloaded from here.

[the_ad id=”88″]
Creating First React Application
Once all the above tools are installed, you are ready to move on to develop react applications. Following below steps will give you a running react application.

  1. Open command prompt and navigate to the directory/folder where you want to place your react application.
  2. At the terminal type command create-react-app [Application Name] and hit enter. Example,
    ceate-react-app react-application. It will create all necessary folders and files.
  3. Open the folder where you installed the above react application and you will see a folder structure as below

Congratulations!!! you have successfully created your first React application.

[the_ad id=”96″]

Running React Application in Browser
Since react applications are web applications, they can be run only in browser. In order to launch your application, open command prompt and navigate to the folder where react application was created. In our example, it is F:/react/reactapp and run the command

npm start

This will show the following logs on the prompt.

It will also start a server listening at port 3000(default react port) on your system and will automatically launch a browser as shown below.

[the_ad id=”267″]

Opening react application in IDE
Till this point there was no use of the editor which was installed previously. But now when you will code your own application, you will need the IDE. How will you open and set up your project in the editor. There are 2 ways.

  1. Open the IDE as you open any other installed software, that is, by clicking the shortcut icon or by navigating to the installed location and clicking the executable file(code.exe, in this case).
  2. Open command prompt. Go to the location where you created the project(F:/react/reactapp, in our example) and type
    code .(code space dot) and hit enter.

         IDE will automatically open up along with your project loaded into it. Refer image below.

Exit mobile version