[Angular + Symfony] A quick website setup

Image for post
Image for post

Recently, I’ve graduated and worked as a full-stack engineer. I found a practical and powerful way to create a website from zero. I used Angular for the front-end and Symfony for the back-end. It just cost a couple of hours in a Sunday morning to set up.

What we gonna build is actual 2 website. The front-end website is built by Angular. It calls the back-end for data. And the back-end is created by Symfony. It receives the requests and sends back the data. The avantage of doing like this is you can easily create front-end app, like web app, IOS, Android, you name it, without touching the back-end. We’ve talked too much, let’s do it.

Pre-require

Before building the website, you need to have a remote server and domain name. The fastest way to do that is to check Amazon EC2 or Microsoft Azure to create one for free with 12 months. These platforms have prepared all the services we need. Follow the official tutorial, and you get your web server.

I have a virtual private server with Ubuntu installed, and bought serval domain names. It is a little bit complicated, but much more fun. It’s also good for you to learn the old-school way to deploy a website. In this article, I will present how to do it.

Front-end

Angular is very powerful and popular front-end Javascript framework. We can use Angular CLI to set up the front-end in a second.

First, install angular CLI

npm install -g @angular/cli

Then, run the following 3 commands, the front-end is set up in the local machine (try it). That’s all !

ng new my-front-end
cd my-app
ng serve

Usually, the local environment is different from the production environment. It is strongly recommended to configure your front-end for both of them. Actually, Angular CLI has done it for us. Open the angular.json file, check the item “configurations”

"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
...
},
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
],
...
}
...
}
}

Finally, set item “server”.

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "<appname>:build"
},
"configurations": {
"production": ... // leave as it is
"local": {
"browserTarget": "<appname>:build:local"
},
}
},

We can modify the environment variables in environment.prod.ts and environment.local.ts. We need to configure these files after setting up back-end. Now, to run a local dev mode, use following command instead (try again).

ng serve --configuration=local

That’s all ! We have got a front-end. Now, let’s deploy it to the server. We need to build the front-end with production environment.

ng build --prod

After running this command, we will have a folder called dist. Copy it, and paste it on your server. I like put it at /root/my-web-app/my-front-end/ . You can put it wherever you want under your user folder (here, the user folder is root). Then, create a soft link to make sure your web server can show your web app.

ln -s /root/my-web-app/my-front-end/ /var/www/html

Voilà, we have deployed the front-end. Angular makes everything so easy.

Oops, nothing is presented. Don’t worry, we haven’t configured web server. Nginx makes it as a piece of cake.

Web server

I choose Nginx as my web server because it’s easy to configure and fast. First, install it on your server.

apt install nginx       //install nginx on Ubuntu
systemctl stop apache2 //stop Apache2 (default web server on Ubuntu
systemctl start nginx // run nginx

Then create a configure file for your front-end.

touch /etc/nignx/sites-available/my-front-end.conf

It’s an empty file, we need write something to tell nginx how to work.

server {
listen 80 default_server;
server_name your-domain-name www.your-domain-name;
root /root/my-web-app/my-front-end/dist/my-front-end;

location / {
try_files $uri $uri/ /index.html;
}

error_log /var/log/nginx/front_app_error.log;
}

It’s a simple configuration. Nginx looks for index.html in the front-end folder, and then shows the web app. If there is an error, nginx will note it in /var/log/nginx/front_app_error.log.

In the end, create a soft link to enable the configuration.

// enable config 
ln -s /etc/nginx/sites-available/my-front-end.conf /etc/nginx/sites-enabled/my-front-end.conf
// reload nginx
systemctl restart nginx

What’s more, it’s common to have “Failed: Permission denied” error in the server. We need to add the permissions of EACH folder of our project to user (usually, it’s www-data).

// test the permissions of user (www-data)
sudo -u www-data stat /username(ie: root)/project/public
// add nginx user (www-data) into username group
gpasswd -a www-data username
// give permissions of EACH folder to username group
chmod g+x /username && chmod g+x /username/project && chmod g+x /username/project/public
// restart nginx
systemctl restart nginx

Now, we have the front-end. It’s already a website. Cool, right ? But, this website can just present some dummy static data. It’s not cool. Angular can do much more than that. It needs a back-end.

Back-end

Unlike front-end, we choose Javascript for more than 99% cases. There are a lot of language for back-end to play with. I choose Symfony of PHP simply because I built a website with PHP in a school project before. You can choose many cool frameworks of Javascript, Python, Java, etc. Personally, I’m interested in Python framework like Django and Flask since Python is so poplar. Anyway, language is not important for starting to build a small website, pick the one you like.

Symfony is a powerful framework of PHP. Api-platform in Symfony makes back-end even easier.

Before creating back-end, I recommend to install Vagrant and add a vagrant box on your local machine. Vagrant provides a virtual machine. One avantage is the configuration on this local virtual machine is almost the same to the remote serve (remember the permissions of user on remote server , it can cause the bugs). It can save a lot of time. The other avantage is you can share your dev environment easier with other developers using Vagrant.

Vagrant file on local machine contains all the configuration. There are two things important.

First, configure the synced_folder in Vagrant file. Vagrant sync your chosen local folder to virtual machine.

Second, add IP of virtual machine to vhost on local machine (Or simply tap this IP to browser to see the interface of back-end).

// Vagrant file on local machineconfig.vm.network "private_network", ip: "00.00.00.00"
// /etc/hosts on local machine
00.00.00.00 myApi.local
// local machine takes myApi.local as 00.00.00.00

Assuming you have install Vagrant and done all the preparation, get into virtual machine by the command vagrant ssh, and start to set up back-end.

First, install PHP and related packages

// install tools
apt install software-properties-common
add-apt-repository ppa:ondrej/php
apt update
// install PHP and packages
apt install php7.3
apt install php7.3-common php7.3-mysql php7.3-mbstring php7.3-xml php7.3-zip php7.3-imagick php7.3-cli php7.3-fpm
apt install imagemagick

php 7.3 is the PHP version I used. php7.3-mysql is installed because I choose MySql as my database, and php7.3-fpm is for Nginx. Please remember this package, reload php-fpm can solve most of the back-end bugs :) Nan, I’m joking. We need check the error logs of PHP, php-fpm and Nginx to solve the problems.

Then, install MySql

apt install mysql-server mysql-client

It’s useful to set a password for user (mine is root). It helps MySql connect a GUI of database (phpMySqlAdmin, Sequel Pro, etc).

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '<your password>';

Next, install package manager composer, which is like npm of Javascript.

sudo curl -s https://getcomposer.org/installer | php// make it global
mv composer.phar /usr/local/bin/composer

Finally, we got all the tools we need. Let’s set up back-end. I choose Symfony 4.4. You can choose the Symfony version you like.

// init symfony project 
composer create-project symfony/skeleton my-api '4.4.*'
// add api-plateform framework
composer require api

Yeah ! Back-end is created. As before, let’s configure Nginx. The process is similar to that of front-end.

Now, tap the myApi.local/api to your browser, you will see the interface of back-end provided by Api-platform.

The last thing, deploy back-end to remote server. There is nothing tricky. Just copy all the files of the project, except Vendor, and paste them on remote server. Vendor contains massive package files of dev mode, and we only need these for the production. Besides, I recommend FileZilla. It’s a GUI helps us communicate with remote server.

Then, repeat all the configuration on the Vagrant virtual machine to the remote server.

Finally, install packages for production mode and clear the cache

// install package
composer install --no-dev --optimize-autoloader
// clear cache
APP_ENV=prod APP_DEBUG=0 php bin/console cache:clear

As front-end, It’s usually good to create different environment files to overwrite the base one. In Symfony, we do it add .env.local and .env.prod to overwirte .env

Conclusion

To set up a website, I used Angular + Symfony to create 2 sites. Angular builds the client site, and Symfony builds API. Web server is Nginx, and Database is MySql. Vagrant provides the local dev environment, and VPS is my remote server.

Deployment of back-end is a little bit complicate. Please leave a comment if you find a better way :)

Written by

Developper in Paris, interested in Big Front-end, Full Stack, Explainable AI. Try to introduce AI into Full Stack workflow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store