Mostrando entradas con la etiqueta English. Mostrar todas las entradas
Mostrando entradas con la etiqueta English. Mostrar todas las entradas

sábado, 30 de mayo de 2020

An Elixir Phoenix + Preact initial setup

It's been a long time since my last post 😅 Currently I'm starting to get my feet wet with Elixir (again, second attempt), because it is a functional language (I kinda love functional programming, although I'm no expert), and it is optimized for distributed and scalable applications. Also, they have a Web Framework called Phoenix, and I just found out that creating applications with socket connections seems to be a breeze with Phoenix Channels. So I've decided to build a small application, and also I'm taking the chance to give Preact (a ReactJS lightweight alternative) a try for the front-end.

TL;DR

Here is how I created my Elixir and Phoenix application, and set up Preact:

Prerequisites

For this project I already have installed, at the time of writing:
  • Erlang/OTP 22.2.7
  • Elixir 1.10.1
  • Phoenix 1.5.3
  • NodeJS 12.16.2
  • NPM 6.14.4

Create Phoenix web app

First, we are going to create a new Phoenix application. For the sake of simplicity, we are going to skip the creation of the Ecto repo for database access, as this will not affect the Preact set-up.


When asked, install all the required Elixir dependencies, so you don't have to do it later.

Set-up Preact

The Phoenix web application already includes Webpack, so we can proceed to install and setup Preact right away. To install Preact, we run the next command, inside the assets folder:


All the NPM commands should be run inside the assets folder, which contains the NPM package files.
Then, we need to alias React to Preact, so we can make use of any component from the vast React ecosystem, through Preact's compatibility layer. In order to do this, we need to point react
and react-dom imports to Preact, by adding the respective aliases to be resolved in our already present Webpack config file, which is assets/webpack.config.js, like so:



Set up JSX support

The next step is to be able to transpile JSX into plain Javascript. For this we need to add a babel plugin that will do this work, so we first proceed to install @babel/plugin-transform-react-jsx.


Then, we proceed to modify the assets/.babelrc file, to specify the function for JSX that should be used from the plugin:


We also need to modify the Webpack configuration to transpile the JSX files, by modifying the JS rule to also include and resolve JSX extensions:



Update routing

The last bit to finish the set-up is to update the route configuration provided by Phoenix, so the front-end routes can be managed by the Javascript router of our choice, to have a fully fledged single page app. The first step is to open the file lib/phoenix_preact_web/router.ex and move the scope block for "/" to the end, so all of the other routes can take precedence and be handled by Phoenix. Then, we modify the get section to always direct to the index action regardless of the path (lines 37-42):


This way, all routes that do not belong to the API, nor Phoenix dashboard, will load the index page.

Clean Phoenix page templates


Before start adding our UI components, we should get rid of all the static content that Phoenix added by default in our index page. So let's open the template file lib/phoenix_preact_web/templates/page/index.html.eex, and remove all its contents. Let's also open the layout template lib/phoenix_preact_web/templates/layout/app.html.eex and remove all of the body contents. The reason for all this cleanup is because we will use the index page's body to render our components, so we won't need all of that content to be rendered on the server side. The layout file will look something like this:



Render a component


Now that we have the skeleton set-up, we can proceed to add our first component. Let's create a components folder inside assets/js, and inside it add a folder named App, where we will place our initial component. We will end up with a folder structure like this:

Then create a file named index.jsx under our App folder, and add the following code to create a basic counter:


Finally, let's render the component in our main Javascript app file (assets/js/app.js):


Now we are ready to go! Let's run the web application in the command line with mix phx.server, and we will have something like this:


Notice that this is a very basic setup, so other ES6 features like class properties are not available and will require additional configurations.

The full project for this example is available at GitHub: https://github.com/guillegr123/phoenix_preact

Happy coding!

miércoles, 27 de febrero de 2019

Setup MongoDB and Compass on Arch Linux

Hey, my second post in English, Hooray! I wanted to take note in case I need to do this again in another computer, hehehe, so here it is... How to setup MongoDB and Compass on Arch Linux, on a development computer:
  • First, we proceed to download and install MongoDB and MongoDB Compass. We can do this via a package manager like Pamac, or via the command line using yaourt or git/curl + makepkg. This is because these packages are not part of the official Arch repositories, but are available as part of the Arch User Repository (AUR). To download and install these packages via yaourt, we can execute the next command:
    $ yaourt -S mongodb-bin mongodb-compass-community
    With this command we will install the binaries for a recent version of MongoDB, and the MongoDB Compass Community Version.
  • Then, we create the default folder for Mongo DB databases, as root:
    # mkdir -p /data/db
  • After that, in order to be able to start the Mongo daemon service as a normal user, I suggest to create a user group, so we will be able to add to it all the users we want to give access to Mongo and other developer tools. For example, let's create the group developers:
    # groupadd developers
  • Add the required users to the group:
    # gpasswd -a <user> developers
  • Set the group as owner of the Mongo data folder:
    chown -R :developers /data/db/
  • Change permissions of the folder so the user that was just added to the group will be able to write in it:
    # chmod -R g+w /data/db/
  • Re-login or as <user> log your terminal in to the newly created group:
    $ newgrp developers
  • At this point, you will be able to start MongoDB with the current user:
    $ mongod
    If everything is OK, you will see a event log in the terminal without any errors, and messages indicating that MongoDB has created its default collections, and that it is waiting for connections on port 27017, which is the default one.
  • Finally, you can run:
    $ mongodb-compass-community
    To open Compass, and use the default parameters to connect to the local instance of MongoDB.
Happy coding!

domingo, 6 de enero de 2019

Use an Akka actor as stream source

This is my first english post, so please bear with me 😅

I've recently started toying with Akka Streams, by trying to add it to an existing Akka HTTP API that I have created to crawl and aggregate data from other APIs and websites. I thought it would be nice to finally put them in practice, and that it was a good place to start because the project involves some data transformation and processing.
Con la tecnología de Blogger.