Fullstack Wizard. First installment.
programming·@alexbalan·
0.000 HBDFullstack Wizard. First installment.
# Let's make a landing website
## Before word...
The Fullstack Wizard is a multiple parts series where I aim to teach you some tricks and give you a little bit of insight into full-stack web development.
Since this is the first post in the series we will discuss some general notions and I'll make clear to you what technologies are used, what we'll be doing, and what's the end-goal. OK, without any further ado let's dive into our today's main topic.
## What is a full-stack developer and what are we going to work on
In simple words, a full-stack developer is someone that takes care of all the aspects related to software development from designing the app, to writing the logic behind the app to creating and connecting the database, etc. In a way, a full-stack developer is someone that can create an application from A to Z all by himself.
In this series, we are going to play full-stack developers and are going to create our own web application. The theme that I chose is *"project management platform"*. Please, feel free to use any theme you want and create your application. This is strongly advised since I'm not going to explain all the code here, only the interesting bits, and instead give you a link to access the full project for further reading.
Alright so at this point, a full-stack developer like yourself should know what app he/she wants to develop.
### Choosing the right tools
I'll share a secret with you. There are no right tools. You can search the internet all day long and you'll find thousands of people giving their two cents on various technologies and how well they work with other technologies, but the truth is almost anything works with anything. So if you always wanted to use some frontend framework, but didn't know what's the best backend framework to pair it with, stop worrying and use whatever you like.
That being said, I'll now give you a list of tools that I choose for this project and I'll give you a short explanation on why I chose them:
- **Frontend framework:** [Vue.js](https://vuejs.org/)
I went with Vue because it's light on resources and allows me to develop faster than other frameworks I've tried.
- **CSS Preprocessor:** [Less](http://lesscss.org/)
A preprocessor is great because it allows you to define CSS variables and functions. I went with Less because, again, it's light and I had fewer problems with it than other preprocessors like Sass.
- **CSS Framework:** [UIkit](https://getuikit.com/)
I know that Bootstrap is by far the most popular among other developers, but the robustness of UIkit is something to behold. I chose UIkit because it has a ton of features, great documentation and it has the most useful modern stuff like sidebar navigation baked in.
- **Backend Framework:** [Laravel](https://laravel.com/)
The Laravel documentation is one of the best I've ever seen and it's one damn powerful framework being able to do whatever you want on the server. There is nothing I was unable to do in the past using Laravel.
- **Database:** [PostgreSQL](https://www.postgresql.org/)
I know that MongoDB is all the rage nowadays but a relational database like PostgreSQL has its advantages of being able to enforce useful schema rules. Also in recent tests, PostgreSQL was shown to be faster than the likes of MongoDB.
Feel free to use whatever tools you like. Now, before we go even further, a full-stack developer should choose the tools he likes best to do his job.
## Creating a landing website
A landing website is the first thing a new user is going to see when he's going to find your project so it should make a nice impression, give the new user some info on your project and provide him with a way to access your project.
For this website, I'll be using my frontend tools, namely Vue.js, Less, and UIkit. Let's see how we can get our hands on those tools.
First we'll need to grab [Nodejs](https://nodejs.org/). On Linux distributions this task is simple, just run:
````bash
# On Ubuntu
sudo apt install nodejs
# On Fedora
sudo dnf install nodejs
````
On Windows, you can just download the installer from the website, make sure it's the LTS version, or if you want to experience some form of package management I'd recommend you take a look at [Scoop](https://scoop.sh/). With scoop installed you can just open a PowerShell terminal and run:
````poweshell
# Git is a dependency for scoop
scoop install git
scoop install nodejs-lts
````
To install and use Vue and the rest we'll also need a node package manager. You can use npm if you are familiar with it, but I'll go with [Yarn](https://yarnpkg.com/). To install yarn we can use:
````
# Ubuntu
sudo apt install yarn
# Fedora
sudo dnf install nodejs-yarn
# Windows
scoop install yarn
````
OK, you are doing wonderful, Mister/Miss Fullstack developer.
One last step is to grab our actual tools so let's do just that using **yarn**:
````
# Everybody
yarn global add @vue/cli
# Note: If Linux users have problems here, try running the above command with sudo
````
This will grab the latest version of Vue.js and will give us access to the command line program called vue which will help us create our project.
## Creating the project for the landing site
First, find a place where you want to store your project, for me, that's in my <code>Projects</code> directory in the home folder. Then we need to open a terminal and navigate to that directory using the <code>cd</code> command. For example, since my Projects directory is in home, I would type:
````bash
# Everybody
cd Projects
````
Now we are going to create our project with:
````
# Everybody
vue create landing-site
# Note: You can name your project however you want
````
You will see the following dialog appear:
Please press the down arrow and enter to choose *"Manually select features"*.
Check the features that I did by navigating to them with the arrows and using the **Space** key. After you did this, press Enter to continue.
Answer with **n** to the next question and press enter.
Now you choose your CSS pre-processor. I'll go ahead and choose *Less*.
In the next dialog I chose error prevention only:
Then *Lint on save* and save configs in *package.json*. Also, I answered with *n* when asked to save this as a preset for other projects.
It will take a couple of seconds to download everything and create your project so sit tight.
After it's done type <code>cd landing-site</code> or whatever name you used for your project and let's go ahead and install UIkit as this is the last missing piece from our toolbox.
````
# Everybody
yarn add -D webpack
yarn add -D uikit
````
*Wait a minute... What's this webpack?*
Webpack is a tool that will help us put all the different files from uikit, vuejs, etc. together. It will also be able to import images and other assets into our final project. In other words, it will compile our project into Html, CSS, and js files and will import our assets into them. Great, right?
## Seeing your project in the browser
This is the last thing on our agenda for today. Let's see the fruits of our hard work.
````
# Everybody
yarn serve
````
Something similar will appear on your terminal
Copy whichever link you like and paste it in your browser. Tadaaa!!! There's your landing site made with vuejs. Though it's ugly and it's not yours, we'll get there in the next episode of **Fullstack Wizard**.
---
Until then, take care, stay tuned, and share your thoughts with me in the comments section. I'll see you around, dear full-stack developers.