Development environment

When creating websites in accordance with the current standards, it is necessary to have a development environment. Of course, you can only encode a website with a notebook, but is it really worth the effort? A well-configured environment helps you work almost imperceptibly. In this article, I would like to share how I have my development ecosystem configured.

WINDOWS 10

The operating system must be. I’m not a fan of Apple and don’t own any of their products, although I tested an iPhone once. To this day, I don’t understand why free applications for Android on iOS are paid. I also don’t work under Linux, although I can use Linux and I’m not afraid of the console, I noticed that installing some software elements can cause strange problems not encountered on Windows. This is how I write it with full responsibility: Windows is sometimes easier than Linux. Moreover, fears of the appearance of a blue screen are greatly exaggerated. In the current version of the windows, I have a blue screen only once, and I use Windows a lot. What’s more, automatic updating can be turned off or set to run outside of working hours on the code.

GIT

Git is an absolute foundation for working with any code. I like it so much that I would like to use it everywhere and for every type of file, I work with. It does not require a long period of learning, and in return gives you complete freedom in writing code, including making mistakes, breaking entire components, and recovering them in a few seconds. A phenomenal tool. Git can be downloaded from https://git-scm.com/. Installation is intuitive and it takes about half an hour to learn the basic rules of use. Here you can find a short description of how to use the git. https://krzysztofnyrek.pl/how_used_git

VS Code

A developer-friendly code-writing tool is definitely a Visual Studio Code. Available for download at https://code.visualstudio.com/. It enables the extension of basic functionalities with additional plugins, making it a powerful combine. At the same time, you have to be careful, because some accessories can make your work difficult. A nice convenience in VS Code is full cooperation with the version control system, thanks to which we don’t have to hand-tap the code with each commit. VS Code also allows operations on branches, sending to a remote repository, or resolving file conflicts. I use some of the functionality, I prefer to write some things myself in the terminal. VS Code allows you to display the terminal as a window in the program, which also facilitates work.

Node.JS

The icing on the cake when it comes to working automation. Technically, it is an environment that allows you to run scripts written in JavaScript outside the web browser. It allows you to significantly speed up the work, and even perform tasks that are practically impossible to perform manually. I love and read what the Node.JS community has shared. Node.JS can be downloaded from https://nodejs.org/en/ and installation on Windows is automatic.

NPM

Manager of software packages written in Node.JS. Thanks to this manager, we can easily download the necessary scripts and add them to our project. We can also update scripts as needed, or uninstall them.

What’s more, we can write our own script that will run a sequence of scripts, thanks to which we can easily convert files from the production version to files ready to be uploaded to the server, including uploading them to the server. Personally, I use the following node.js packages:

  • Autoprefixer – to automatically add prefixes in css code for compatibility with older versions of browsers;
  • Concat – to combine css files;
  • Node-Sass – to convert scss files to css;
  • Npm-run-all – to maintain different node.js scripts while working on the code;
  • Browsersync – for the current page view also on mobile devices via a local rooter.

In order to run the manager in the folder where the project files are kept, while in this folder on the command line, enter npm init. Then, we can install packages with the command npm install “package name”. The way packages are launched and the possibilities they provide can be easily found in the package documentation.

As you can see, the environment is not very complicated, but it gives you complete freedom in creating the code and allows you to automate the processes related to generating the final version of files. Configuration of the environment is also not difficult, you only need a few moments with documentation and you can create such a system for work yourself.

Krzysztof NyrekDevelopment environment