Install and set up basic working environment for Frontend Web Developer
Opening the series of articles to learn about Frontend Web I will guide you to install and set up an effective working environment.
Essential applications
– NodeJS, NPM ( https://nodejs.org/en/ )
– Editor (SublimeText, Notepad ++, Atom …) or IDE (PhpStorm, Dreamweaver …), here I use Sublime Text .
– Command Line :
iTerm – macOS.
cmder – Window.
Useful packages for Sublime Text
First, you need to install Package Control for Sublime Text following the instructions here: https://packagecontrol.io/installation .
I will have a more detailed article about Sublime Text , here are some packages I am using:
– Boxy Theme : change clothes for Sublime Text.
– SublimeCodeIntel : smart code suggestions.
– Emmet : package is famous and available on most current editor and ide, help write HTML quickly, you can learn more about its usage and cheatsheet.
– MarkdownEditing : writing with Markdown
– AdvancedNewFile : create files and folders quickly
– SideBarEnhancements : upgrade feature for Sidebar.
Initialize the project
Turn on the command line depending on the operating system you are using, cd go to the directory you are going to code, run npm init command . Fill in the required information, after completion, you will get the following results:
Open Sublime Text , File -> Open to that folder, and you will see a similar package.json inside :
1 2 3 4 5 6 7 8 9 10 11 | { "name": "vtuts", "version": "1.0.0", "description": "Frontend Tutorial", "main": "index.js", "scripts": { "test": "echo" Error: no test specified "&& exit 1" }, "author": "SangND", "license": "ISC" } |
LiteServer + BrowserSync.
LiteServer is a package on nodejs platform, it works similarly to applications that create localhost , understand it simply, it simulates an environment like the environment where you will deploy web for many users, you can test code on many devices with the same network connection with the machine turned on LiteServer . LiteServer integrates BrowserSync to automatically refresh the browser as soon as you change the code and press save.
Install LiteServer, turn on the command line , go to the project directory in the previous step:
npm install lite-server –save-dev
Add the following line to the script of the package.json file:
"Start": "lite-server"
Results:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | "scripts": { "start": "lite-server" } //package.json after installing liteserver and editing { "name": "vtuts", "version": "1.0.0", "description": "Frontend Tutorial", "main": "index.js", "scripts": { "test": "echo" Error: no test specified "&& exit 1", "start": "lite-server" }, "author": "SangND", "license": "ISC", "devDependencies": { "lite-server": "^ 2.2.2" } } |
Test npm start from the command line, the following result is that you succeeded:
Received the Cannot GET / message because the project is currently empty. Create a index.html file, save it and refresh your browser with a blank page, try changing the contents of the index.html file and then save it, the browser will automatically change.
Tips to quickly create HTML in Sublime Text with Emmet , create an .html file, then in the editor you type " ! Tab ”(Exclamation, then press Tab) or“ html: 5 Tab ”will get the Html template as above.
Notice that in the Command Line there is a paragraph:
[BS] Access URLs:
————————————
Local: http: // localhost: 3000
External: http: //192.168.1.9:3000
This section means that you can access your test page from another device such as a computer, phone, tablet if you have the same network connection with your current computer by accessing http: //192.168.1.9:3000
Some advanced BrowserSync configurations, such as changing the code folder, adding middleware, changing the port (Default is 3000), … I will have another article detailing it. You can read more here.
Thank you for reading this article. See you in the next article.