[EN] Let’s Write – Configuration

So far I didn’t give name of my project so I do it now. My application, which I writing in the competition, is called Let’s Write. From now it will be easy to find posts talking about project because I’ll be giving this name in the title ;)

Previously I said some words about what I’ll be doing. Today it’s time for first technical post.

I was able to configure environment. Someone could ask what I must configure if I write in javascript, it’s only scripts I write in a notepad. Not really. Project I’ll be creating using React.js library. Additionally I want to use LESS for styles. It requires a large number of files and also needs some elements to be processed (eg. Styles from .less files to .css).

In addition, it’s nice to not have to copy everything manually. I this case scripting tasks is useful. I decided to use for this Gulp. For those who don’t know this tool I’ll say that Gulp is library that allows to automate tasks. Everything in Gulp is writing in javascript. Gulp itself is based on Node.js. So I still use one language in the project ;)

First blood

The first task I had was to prepare config files, installing everything and adding scripts for tasks.

Equipment

When it comes to the tools that I use:

  • Visual Studio Code – the most important application in this whole play. Very pleasant to use and lightweight Microsoft’s editor. It’ll serve as editor for most files.
  • Cmder – overlay for console and Linux-like terminal emulator. With many similar, available for Windows, this seemed to me the best. From Cmder I’ll run all the scripts, I’ll handle most of GIT and looking through folders. Cmder only drawback is the minimal performance problems.
  • SourceTree – the tool supporting work with Git. From SourceTree I look through repository and commit files. Easier for me to add the descriptions of commits and looking through the structure of repository using GUI.

All my current work can be viewed on GitHub. Maybe it the future I’ll add content to the Readme file where I’ll explain how to run the project.

Labyrinth on disk

The first task I had after repository creation was to create a folders structure needed me.
I assumed that the files on which I’m working will be in a different place than the files ready to run. In addition I’ve separated backend and frontend code. At the beginning I’ll focus on the frontend.
Because of this assumption directories structure has become a deep and complicated. However, it allows me to control the more files.
Currently directories structure looks like on the picture below:

piloty

Packages

When I had already added the directories it’s time to add the file package.json for frontend. File package.json is file which is reading by npm package manager. It contains basic information about project and in addition, what is main reason for its adding, allows save all required for project dependencies. Thus with one command npm install I can install all the libraries I need in the project. I’ll have two package.json files – a separate for the server and a separate for frontend.

Links that were useful at this stage:
https://docs.npmjs.com/files/package.json
http://browsenpm.org/package.json

I’ll add here that VS Code much facilitates work with package.json file. When you add dependencies it’s necessary to specify in which version their need. When you add dependencies VS Code tells us what is the latest version of the library. So we don’t need look for it one the internet.

GIT

After the addition of configuration time for taming Git. By default Git will want to push all files in the project folder. But when I work with Node.js is added a lot of files which shouldn’t be in repository. First of all these are the files of installed libraries (node_modules). First, there is tens of thousands, second, they are added by one command npm install  so there isn’t need to copy them and retrieval from repository.

If I want to say Git whose files I don’t want to commit I add file .gitginore with configuration for Node.js in main folder. You can download it from GitHub: https://github.com/github/gitignore/blob/master/Node.gitignore

I wrote to him with files ready to run because I treat them as binary files. Ignored folder is simply added as a new line I .gitignore files. Eg. such a record will ignore dist directory:

Gulp, Gulp

At this moment, at the end of this stage, I have to add tasks in Gulp yet. In theory simple thing. But, it tooks me almost 2 hours…. Problem was that I wanted to add at once the most tasks useful later. Finally I finished with the script which compiles JSX files (about them next time) and .less files, combines scripts together and move the appropriate files into dist directory. I’ll not conceal that a lot of Gulp code I copied from internet. It was a very useful page: https://jonsuh.com/blog/integrating-react-with-gulp/

Of course, I tried to undestand and analyze everything but I omitted figuring out how to do it by myself.

With Gulp is enough that I’ll put in the console gulp and I get in dist folder compiled styles, copied scripts and copied html files.

Let’s move on

I wonder how much code append to posts. That is why this time I appended nothing :P Let me know what you have sentence. Do you prefer a lot of code or just the bare minimum and detailed description?
And meanwhile I’m taking to continue to work :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *