DEV Community: Thomas

Migrate a Symfony app from heroku to Fly.io

Thomas — Wed, 21 Dec 2022 15:24:34 +0000

A few days ago I noticed that one of my side projects hosted on Heroku was not running anymore.

The reason : No more free tier...

It was time to find an alternative to host my app for free.

Why Fly ?

There is not reason for that choice beside the fact that it manage to host my app for free.

Versions

My app is a Symfony 5.3 API, running with PHP 7.4

Dockerfile

Fly.io does have an integration for laravel but none for Symfony.
I had to find/create a Dockerfile.

I found some great ressources but none of them worked out of the box.

looking at this repo helped me : https://github.com/fly-apps/fly-hello-laravel/blob/main/Dockerfile

This is my edited Dockerfile

FROM alpine:3.14

LABEL fly_launch_runtime="Symfony"

RUN apk update

# add useful utilities
RUN apk add curl \
    zip \
    unzip \
    ssmtp \
    tzdata \
    openssl

# php, with assorted extensions we likely need
RUN apk add --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/edge/community/ --allow-untrusted gnu-libiconv \
    && apk add -U --no-cache \
    # Packages
    tini \
    php7 \
    php7-amqp \
    php7-dev \
    php7-common \
    php7-apcu \
    php7-gd \
    php7-xmlreader \
    php7-bcmath \
    php7-ctype \
    php7-curl \
    php7-exif \
    php7-iconv \
    php7-intl \
    php7-json \
    php7-mbstring \
    php7-opcache \
    php7-openssl \
    php7-pcntl \
    php7-pdo \
    php7-mysqlnd \
    php7-pdo_mysql \
    php7-pdo_pgsql \
    php7-phar \
    php7-posix \
    php7-session \
    php7-xml \
    php7-xsl \
    php7-zip \
    php7-zlib \
    php7-dom \
    php7-redis \
    php7-fpm \
    php7-sodium \
    php7-tokenizer

# supervisor, to support running multiple processes in a single app
RUN apk add supervisor

# nginx (https://wiki.alpinelinux.org/wiki/Nginx)
RUN apk add nginx
# ... with custom conf
RUN cp /etc/nginx/nginx.conf /etc/nginx/nginx.old.conf && rm -rf /etc/nginx/http.d/default.conf

# htop, which is useful if need to SSH in to the vm
RUN apk add htop

# composer, to install Laravel's dependencies
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# add users (see https://www.getpagespeed.com/server-setup/nginx-and-php-fpm-what-my-permissions-should-be)
# 1. a user for the app and php-fpm to interact with it (execute)
RUN adduser -D -u 1000 -g 'app' app
# 2. a user for nginx is not needed because already have one
# ... and add the nginx user TO the app group else it won't have permission to access web files (as can see in /var/log/nginx/error.log)
RUN addgroup nginx app

# use a socket not port for php-fpm so php-fpm needs permission to write to thay folder (make sure the same .sock is in nginx.conf and in php-fpm's app.conf)
RUN mkdir /var/run/php && chown -R app:app /var/run/php

# working directory
RUN mkdir /var/www/html
WORKDIR /var/www/html

# copy app code across, skipping files based on .dockerignore
COPY . /var/www/html
# ... install Laravel dependencies
RUN composer install
# ... and make all files owned by app, including the just added /vendor
RUN chown -R app:app /var/www/html

# move the docker-related conf files out of the app folder to where on the vm they need to be
RUN rm -rf /etc/php7/php-fpm.conf
RUN rm -rf /etc/php7/php-fpm.d/www.conf
RUN mv docker/supervisor.conf /etc/supervisord.conf
RUN mv docker/nginx.conf /etc/nginx/nginx.conf
RUN mv docker/php.ini /etc/php7/conf.d/php.ini
RUN mv docker/php-fpm.conf /etc/php7/php-fpm.conf
RUN mv docker/app.conf /etc/php7/php-fpm.d/app.conf

# make sure can execute php files (since php-fpm runs as app, it needs permission e.g for /storage/framework/views for caching views)
RUN chmod -R 755 /var/www/html

# the same port nginx.conf is set to listen on and fly.toml references (standard is 8080)
EXPOSE 8080

# off we go (since no docker-compose, keep both nginx and php-fpm running in the same container by using supervisor) ...
ENTRYPOINT ["supervisord", "-c", "/etc/supervisord.conf"]

I you want php8, just replace php7 with php8. (docker's magic)

I made a git repo if you want to browse the files of my 'docker' folder.

Databse

My database is hosted on a tinny VPS, so I didn't had to do anything.

If you want to host your db on fly, they offer free 3GB
postgres.

Alternative

I didn't tried Fly : turboku launcher, but it may be a simpler way to migrate.

see : https://fly.io/launch/heroku

With dockerfile your a not tied to a particular host, and can migrate smoothly between them.

Conclusion

If you are looking to migrate your Heroku app, save yourself a couple of hours and take a look at my repo : https://github.com/Thomas-Philippot/symfony-fly-starter

How I deployed my Nuxt app on a rasberry pi

Thomas — Mon, 17 Feb 2020 11:00:54 +0000

I've recently purchased a rasberry pi to pratice my network and linux skills.
I decided to install apache2 and try making available my own Nuxt app on the web ! (some of you guys knows how much I like using Nuxt)

Disclaimer : ⚠️
I may say things that are "wrong" (not best practices), I only have 2 years experience and this project is for fun so if you notice something wrong, write it down it the comment section. Thank's

Setting up the environement 🛠️

First we need some essential tools.

Git
pm2
Apache2 (obviously)
nodejs
npm
curl

let's run some commands to install eveything ! 👨‍💻

$ sudo apt update

# install apache http server
$ sudo apt install apache2

# install node and npm
$ sudo apt install curl software-properties-common
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -

# install git
$ sudo apt install git 

# install pm2 globally
$ npm install pm2 -g

Then you should see Apache default page when requesting localhost (or 127.0.0.1) on any web browser. 👍

Good ! now we only want to change this default page with our beatiful Nuxt js website !

Building the website 🏗️

This is were git is going to be usefull.

I'm not going to explain how I build my Nuxt app (it's still pretty empty), because this is not the point of this post.

But you just need to know it's on GitHub, so we can use git to download and install it on my server (rasberry).

$ cd /var/www
$ git clone 'our-git-repo'
$ cd 'our-git-repo'
$ npm install
# Build your application with webpack and minify the JS & CSS (for production).
$ npm run build

Apache configuration ⚙️

Now that we have apache up and running and our nuxt app, we just need to connect both of them.

Create a new virtual host

# enable proxy http module
$ sudo a2enmode proxy proxy_http
# creating our new site
$ cd /etc/apache2/sites-available/
$ sudo vi our-site-name.conf

<VirtualHost *:80>
    ServerName www.our-domaine.com
    #ServerAdmin webmaster@localhost
    DocumentRoot /var/www/OUR-DIRECTORY-NAME

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

        # has Nuxt runs on port 3000
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
</VirtualHost>
# :wq to save and exit

Now we have told apache to deliver our nuxt app on http request.

Enable the new site and disable the default one

We just need to replace apache default page with our site.

# enable our nuxt site
$ sudo a2ensite our-site-name.conf
# disable apache default page
$ sudo a2disite 000-default.conf
#reload apache service
$ sudo systemctl reload apache2

And were good to go !👏

Start Nuxt server 🏁

Now you will probably think we only need to open the web browser to see our Nuxt app, but we need one more step.

Because Nuxt use Server side rendering, we need to start the node.js server with npm start.

Pm2 will be perfect for that purpose !

$ cd /var/www/our-directory-name
$ pm2 start 'npm start' --name "NUXT APP"
$ pm2 save

Cool ! Our node.js server is started and will be reloaded by pm2 if it turns off.

# optional : to start the node.js server on startup
$ pm2 startup
# then run the command in output

Requesting localhost should show our beatiful Nuxt app.
We did it ! 🎉

Open our APP on the web 🌐

We just need to configure our router to open 80 (and 443 if ssl/tls is configured), and forward to the server (rasberry pi).
Fortunalty my IAP provides a web interface to do so.

Requesting our domain name or our router ip address show the Nuxt app has well.

Tips for rasberry : you can open port 22 to control your rasberry with ssh from outside your local network

Conclusion 🎇

It was such a good training to deploy this on my rasberry pi !
I really wasn't shure it will handle it.

5 WebStorm shortcuts I use everyday

Thomas — Mon, 27 May 2019 14:24:21 +0000

I'm using WebStorm IDE since I have a student license and one of the things I really like is the shortcuts !

We are writting a lot along the day and we are most of the time making the same actions over and over again.

This is why I searched for a faster way to do them. 🚅

1- Multiline editing

alt + left-click this let you edit everywhere in you code.

1.2 Multiline with text search

you can select next text occurence with alt + j and then edit multiple line in once. (useful if you forget a porperty)

⚠ Do not consider this as a rename tool.

2- Duplicate a line

this one seems useless but it's a real time saver.

I sometime use it to 'multi line edit afterwards'.

3- Moving things around

You can also move you lines up and down with ctrl + shift + (up or down) so you are not forced to copy/cut.

this also works really great with JSON...

4- Clipboard History

did you knew that Webstorm keep in history the content you have copied/cuted ?
Well now you know ! you can choose what to past with ctrl + shift + v.

5- Growing selection

when selecting something you can grow the current selection to the next level with ctrl + w to lower the selection hit ctrl + shift + w.

Conclusion

This is one of the reasons I love WebStorm. let me know if you have other useful shortcuts. and if you learned some of them ! 🎉

Google Login with Firebase and Nuxt

Thomas — Mon, 06 May 2019 15:05:04 +0000

Wanna add a 'Log in with Google' button in your app in minutes ?
Here is how I did it !

Environement

Node @11.0.0
Vue @3.0.4
Npm @6.9.0
Nuxt @2.6.3
Vuetify @1.3.3

Docs

Nuxt : https://nuxtjs.org/
Firebase : https://firebase.google.com/docs/

Firebase installation

To install firebase to you Nuxt project simply run the command

npm install firebase --save

and create a file like firebase.js into your pulgins directory.

Go to your Firebase console and create a new project. after registering your project you will be able to find your firebase config object.

here how to find it : http://support.google.com/firebase/answer/7015592
(our app type is web app)

now that you have your firebase config object let's register it into your nuxt plugin !

// /plugins/firebase.js
import firebase from 'firebase'

let firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
}

let app = null
if (!firebase.apps.length) {
  app = firebase.initializeApp(config)
}

export const db = app.database()

don't forget to add '~/plugins/firebase.js' to your nuxt.config.js in the plugins section.

And you will be ready to go !

at this time you will still need to import firebase from 'firebase' into the pages.

Sign in with popup

I will be using the signInWithPopup() method provided by firebase in this exemple

Button

<v-btn outline fab @click="googleSignIn" color="#4285F4"><v-icon>fab fa-google</v-icon></v-btn>

Method

      googleSignIn () {
        this.provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithPopup(this.provider).then(result => {
          // store the user ore wathever
          this.$router.push('/home')
        }).catch(e => {
          this.$snotify.error(e.message)
          console.log(e)
        })
      }

the user informations are stored into result.user. up to you to store theme where you want !

Well done ! 👋

that's it ! if your firebase app is correctly registered, you should be able to fetch your Google accounts informations !

let me know if you had difficulties with firebase ore if i made any mistake, i'm still learning !

How I built a desktop app with vue in minutes

Thomas — Thu, 21 Feb 2019 14:08:03 +0000

When it comes to desktop app, electron is a powerful tool. You can build cross-platform applications in one shot.

As I like vue, i've triyed created an application with 'electron-vue' and this is how simple it is !

Let's make a weather app using OpenWeatherMap API

🛠️ Installation

I was using Ubuntu 18.04 and Webstorm IDE. I also like vuetify components so I installed the vuetify/electron repository

Looks like the GitHub repo doesn't exist anymore..

To install the project run

vue init vuetifyjs/electron my-project

cd my-project
npm install
npm run dev

Now you are ready to go !

Then to display the weather, i will need :

-Highest temperature
-Lowest temperature
-Humidity

So let's change that page into what we need ! I'm using two Card component, one to search the city and the other one will then display the weather

      <v-card>
        <v-card-text>
          <p>Welcome to my météo app.</p>
          <p>Search for a city to display the weather</p>
          <v-text-field label="City" box v-model="city"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn primary flat router @click="getWeather">Search</v-btn>
        </v-card-actions>
      </v-card>

      <v-card v-if="show">
        <v-card-text>
            <v-layout row>
                <v-layout xs6>
                    <v-card-text>
                        <v-spacer></v-spacer>
                        <h1>{{temp.toFixed(2)}}°C</h1>
                        <h1>{{weatherDescription}}</h1>
                    </v-card-text>
                </v-layout>
                <v-layout xs6>
                    <v-card-text>
                        <p><v-icon>fas fa-snowflake</v-icon>Min : {{ tempMin.toFixed(2) }}°C</p>
                        <p><v-icon>fas fa-sun</v-icon>Max : {{ tempMax.toFixed(2) }}°C</p>
                        <p><v-icon>fas fa-tint</v-icon>Humidity : {{ humidity }} %</p>
                    </v-card-text>
                </v-layout>
            </v-layout>
        </v-card-text>
      </v-card>

💻Requesting the API

I now need to code my getWeather function

I'm using axios to make API requests, I then store the data i want into my app

the API endpoint is '/data/2.5/weather'

  import SystemInformation from './WelcomeView/SystemInformation'
  import axios from 'axios'
  axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
  export default {
    name: 'welcome',
    components: { SystemInformation },
    data () {
      return {
        city: '',
        country: '',
        weatherDescription: '',
        temp: null,
        tempMin: null,
        tempMax: null,
        humidity: null,
        show: false,
        key: '863668499362fb4884ebd97229f3b26b',
        url: 'http://api.openweathermap.org/data/2.5/weather'
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      getWeather () {
        axios.get(this.url, {
          params: {
            q: this.city,
            appid: this.key
          }
        }).then(response => {
          this.temp = response.data.main.temp - 274
          this.tempMax = response.data.main.temp_max - 274
          this.tempMin = response.data.main.temp_min - 274
          this.humidity = response.data.main.humidity
          this.weatherDescription = response.data.weather[0].description
          this.show = true
        }).catch(errors => {
          console.log(errors)
        })
      }
    }
  }

🌟 And that's it !

Simple as a classique Vue js application, I just made a simple cross-plateform application.

this was my first electron app, and also my first blog post

I really loved it because i'm able to use the same app on Windows, MacOs and Ubuntu (has i work on ubuntu)

feel free to tell me about stuff i made wrong ore i could have done better, and to share some cool stuff to work on !