Forem: Tuna Çağlar Gümüş

Production Configuration for Rails 6 with Unicorn and Nginx on Ubuntu 18.04

Tuna Çağlar Gümüş — Mon, 15 Jun 2020 00:00:00 +0000

I was using Puma as an app server and there were no web server for my site. It is not a good thing that you don't have a web server on production environment. Web servers are essential tool for serving assets and process requests to your site. App servers main job is run you rails app. That's why i needed an app server and a web server which works well together for my rails web application. I searched for the best solutions and found out that Unicorn (app server) and Nginx (web server) runs pretty well together. So i have implemented it.

This post is about my server implementation for production. It took my days, i wish it will help you. I also want to add that i tried to work with Puma and Nginx but it was really frustrating for me but Unicorn was really easy. I really recommend Unicorn instead of Puma.

Ok. Let's start.

Check your server

First update your server.

sudo apt-get update && apt-get upgrade

Check your rails with

nodejs -v
yarn check --integrity
ruby -v
rails -v

If there is a problem, fix it first. Then move on.

Install Unicorn

sudo gem install unicorn

Go to your config folder in your rails app folder and create unicorn.rb file and use this code.

# set path to the application
app_dir = File.expand_path("../..", __FILE__ )
shared_dir = "#{app_dir}/shared"
working_directory app_dir

# Set unicorn options
worker_processes 2
preload_app true
timeout 30

# Path for the Unicorn socket
listen "#{shared_dir}/sockets/unicorn.sock", :backlog => 64

# Set path for logging
stderr_path "#{shared_dir}/log/unicorn.stderr.log"
stdout_path "#{shared_dir}/log/unicorn.stdout.log"

# Set proccess id path
pid "#{shared_dir}/pids/unicorn.pid"

Create the required directories for your pids and logs. You can access production errors in this log folders if you face a problem. Please check it time to time.

mkdir -p shared/pids shared/sockets shared/log

Install Nginx

sudo apt-get install nginx

Now go to /etc/nginx/nginx.conf file and define your unicorn socket in for your nginx so it will work as reverse proxy. These log files will store web server errors and access logs. You should also check them regularly.

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

upstream rails {
    # Path to Unicorn socket file
    server unix:/path/to/your/rails-app/shared/sockets/unicorn.sock fail_timeout=0;
}

Now be careful part 🙂

Nginx have 2 folders. One is sites-available the other one is sites-enabled . Nginx will serve settings in sites-enabled folder, not in sites-available folder. So you will edit your Nginx settings in available folder and copy them to enabled folder to work.

Go to /etc/nginx/sites-available/domain . 'domain' is a new file you created for your website.

server {
listen 80;
server_name domain.com www.domain.com;

root /path/to/your/rails-app;

try_files $uri/index.html $uri @rails;

# serve static (compiled) assets directly if they exist (for rails production)
location ~ ^/(assets|packs|images|javascripts|stylesheets|swfs|system)/ {
    try_files $uri @rails;
    access_log off;
    gzip_static on;
    root /path/to/your/rails-app/public;

     # to serve pre-gzipped version
    expires max;
    add_header Cache-Control public;

    add_header Last-Modified "";
    add_header ETag "";
    break;
}

# added so i can server html and txt in my public folder. I'm using it for google analytics.
location ~* \.(html|txt) { root /path/to/your/rails-app/public/; }

location @rails {
   proxy_pass http://rails;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
   proxy_set_header Host $http_host;
   proxy_redirect off;
}

# to server error pages
error_page 500 502 503 504 /500.html;
client_max_body_size 4G;
keepalive_timeout 10;

}

Now copy this file to sites-enabled folder. Delete the 'default' file in sites-enabled folder.

sudo ln -s /etc/nginx/sites-available/domain /etc/nginx/sites-enabled

Ok. That should be it. 🤞

Start the servers

Start nginx server.

# to start
sudo service nginx restart

# if you want to restart it
systemctl daemon-reload 
systemctl restart nginx

Start unicorn. Go to your rails main folder.

# to start
sudo unicorn -c config/unicorn.rb -E production -D

# to kill unicorn 
sudo pkill unicorn

Thank you. I wish it will help you. Back-end jobs never really finish. Don't stop search for better practices and solutions. Please let me know if i missed anything.

Rails 6 carrierwave production settings for digitalocean spaces with a custom subdomain

Tuna Çağlar Gümüş — Fri, 08 May 2020 02:00:00 +0000

Hello,

I recently worked on both Active Storage and CarrierWave to store user uploaded files and decided to use CW on my site. (Maybe i will tell why i choose CW over Active Storage in a different article)

I'm using digitalocean spaces since it is basicly cheaper when you don't need a huge storage size.I also want to use custom subdomain for my stored files so i don't end up messy urls for my file urls. I don't know why but messy urls look dirty to me. Like developer doesn't even care. What a shame....Coulnd't find a good example for carrierwave settings to use in digitalocean spaces and wanted to share this info myself.I assume you are installed carrierwave before hand.

TODO

Create your digitalocean space.
Create a subdomain and attach SSL to it within Digitalocean form. It can be done with couple of clicks.
Go to API panel and create a key. Store your key info somewhere safe.
Give folder permissons for your domain.
Install necessary gems to use carrierwave with digitalocean.

gem "fog-aws" # storage for AWS S3 digitalocean

Go to your uploader.rb file, in my case it is app/uploaders/image_uploader.rb.

# storage :file. Change this to `fog`
  storage :fog

This is the config/initializers/carrierwave.rb file. This file configures carrierwave to use digitalocean spaces for your website in production.

CarrierWave.configure do |config|
    config.fog_credentials = {
        provider: 'AWS', # required
        aws_access_key_id: 'your-key-id', # required unless using use_iam_profile
        aws_secret_access_key: 'your-secret-key', # required unless using use_iam_profile
        region: 'fra1', # optional, default are different from aws.
        host: 'fra1.digitaloceanspaces.com', # optional, defaults to nil
        endpoint: 'https://fra1.digitaloceanspaces.com' 
    }
    config.fog_directory = 'nameofyourspacesfolder' # required
    config.asset_host = "https://sub.domain.com"
    config.fog_attributes = { cache_control: "public, max-age=#{365.days.to_i}" } # optional, defaults to {}
end

config.asset_host is doing the custom domain job here. Also be careful about region here. It is different from aws defaults.

That should do it.

Best Regards,

Tuna

What is webmention?

Tuna Çağlar Gümüş — Sat, 28 Mar 2020 13:48:44 +0000

Webmention is a way to notify any website URL from your site. Receivers can use webmention to request notifications when other sites mention it. This web standart is created and maintained by IndieWeb. As of January 12, 2017 it is a W3C recommendation.

By using this protocol, you can list any mentions to your posts and push content to other sites automatically. It is like having a conversation between websites. It is also easy to accept webmentions right away.

That's not all, you can also list twitter likes, replies and retweets when your link shared on twitter.

Accepting webmentions

Change the URL and add this code to your head tag.

<link rel="webmention" href="https://webmention.io/pikseladam.com/webmention" />
<link rel="pingback" href="https://webmention.io/pikseladam.com/xmlrpc" />

Now you can enter the webmention.io website and see any mention linked to your site.

Here is good example websites that supports webmentions.

aaronparecki.com Aaron is also the co-founder of indiewebcamp. His websites is perfect example of webmention usage. In his site, you can see the reposts, replies, mentions and twitter likes for his posts.

kickscondor.com Kicks is one of the best collectors in internet. He is always searching for good links, sharing them on its site. Also, he has a good web browser extension called Fraidycat which basically gathers and displays all feed information that you want to follow. His website has pretty old-school kind of different style. He supports webmentions. You can see his twitter replies and mentions under his posts. Kicks doesn't want anyone to share his page. Sorry kicks.

API to list mentions

webmention.io has also have an API to list webmentions to your pages.Just change the target url and list any mention to it.

https://webmention.io/api/links.jf2?target=https://webmention.io

Help out

If you would like to help, you can start on github.

This just a simple introduction article to webmentions. If i missed anything please let me know.

Phoenix Framework or Ruby on Rails

Tuna Çağlar Gümüş — Mon, 24 Feb 2020 20:06:46 +0000

Hello,
Recently, i read the article titled "7 reasons I switched back to PHP after 2 years on Rails" by Derek Sivers. He got good points but article is 13 years old. 😊

So, i asked about his view for today and he answered.

What you guys think about that? Did you try and move to Phoenix form Rails? Do you really think phoenix could be next big thing?

If you want to read the article here is the link: https://sivers.org/rails2php

Thank you,
Best regards,
Tuna

📝 A way to create your own, multi device supported, cloud based markdown and note taking platform.

Tuna Çağlar Gümüş — Sat, 11 Jan 2020 20:57:14 +0000

Hello, 👋

I wanted to get my hands on a native markdown editor that I can store my drafts and notes online.

Here is what I was looking for;

It should have native apps for Microsoft, Linux, Mac OS & iOS because I wouldn't say I like to write in browsers.

I never used twitter in a mobile browser. Don't judge me.
All my markdown formatted notes and the draft should be in sync between apps.
I should be able to continue where I left off, no matter which computer or phone I'm using.
It should look cool because bad design drains my all will to write.
I don't care live preview, but it should at least have a syntax highlighting.
It should be free!

Actually, I know it is never free to run a server, but paying a monthly fee to store my kilobyte sized MD files is not for me. 😄

My search for this kind of product continued several weeks until I decided to do something myself. Here is what I found;

notion.so: free until 5MB but has native app support. synchronization between documents and has a good design.
bear app: none web, none PC but has a good design and markdown oriented app. It has a $1.5 monthly subscription model for synchronized documents.
ai-writer: $19 per month for a basic plan but has a good support app for those who write books and lengthy documentation or maybe papers.
typora: awesome markdown native app. it is free but doesn't sync docs across your devices. Non-mobile.

These were the ones that took my attention. There are nearly hundreds of solutions that I can choose, but none of them cover all my "incredible" standards 😄

My proposal

I noticed i can use my server as a markdown library in the cloud. I would store my files in it, but how I have a native app to edit these files? How I access them from everywhere? How fast will it be? How cool will it be? :)

My solution was simple but effective.

I will create a "notes" folder in my cloud server. It will be in sync always :)
I will access it from everywhere with SSH connection.
I will install the necessary VIM extension, so Markdown syntax highlighting will be there.
I will use Termius for the mobile, console for Mac & PC. At least, they are not browsers. Also, I can continue writing from where I left off.
It will be free. No monthly fee's or limited resources. (No addition to my current bill.)
I can install any theme, plugin, and font to my system and use them in VIM. So it will be cool!

Lets get to work 👨🏽‍💻

Login to your server by doing ssh username@111.222.333.444. Enter your username and password. Go to your home folder by doing cd /home.
Create your markdown library folder.

mkdir notes

This will create a notes folder in your home directory. Now we can create and edit files in it with Vim. Vim is a clone, with additions, of Bill Joy's vi text editor program for Unix. Sometimes it is hard for beginners to use it. Because of that, we will use Kakoune. Kakoune is a code editor that implements Vi's "keystrokes as a text editing language" model. As it's also a modal editor, it is somewhat similar to the Vim editor (after which Kakoune was originally inspired).

Install Kakoune for ubuntu by doing

sudo apt install libncursesw5-dev pkg-config
git clone https://github.com/mawww/kakoune.git && cd kakoune/src
make
PREFIX=$HOME/.local make install

for mac

brew install kakoune

That's it. After that, you only need to create your MD files and start taking notes on it. To create a new file, you do

kak newfile.md

This will create a new markdown file and open it. To enter edit mode, click i button. Then write your note.

To save it, click esc then write :wq (write and quit).

That's all. Now you can access your server by using the Termius app and write your note on Kakoune with your phone, then continue writing from your pc or mac by simply using any terminal you have. You can always add new features to this simple platform by adding new extensions.

A screenshot of one of my drafts.

Thank you for your time. Best regards,
Tuna

Rails 6 & Webpacker Settings for Production

Tuna Çağlar Gümüş — Sat, 28 Dec 2019 17:39:36 +0000

Rails 6 Webpacker Settings for Production

Hello,

TLDR; Things got messed up when I went into production with my webpack installed Rails 6 codebase. I solved the case and learned a few new things along the way that I share below.

This -> 🌝

This is the face of a man who solved several problems that he faced in moving Rails 6 webpack into the production environment, yet hated every minute working on it.

Why do we lack a simple documentation on this procedure?
While the primary goal of developing a website is to deploy it, how come I cannot push my website to the public simply using webpacker. Furthermore, why one earth there is not any warnings.

No, probably there is documentation on going to production with webpack and Rails 6. The main reason is that Rails documentation pages still include lots of legacy resources from Rails 5.X releases, and it is hard to find one for Rail 6. Guess what, that is the documentation. 🌝

The Problem

It is simple. I want to go to production and serve my packs and assets from Rails.

I know it is not a good choice for production. But I want to first, set my environment; second, make sure it is working; and finally, go backend and install nginx or apache or any other server that serves assets.

The problem is getting several errors on the way. Now, let's go through errors one by one, and solve our problems to production.

Yarn.lock Settings

Yarn.lock file tells the system which yarn packages are needed for your website to work and what are their dependencies. But, when you work on your MAC or PC and develop your system there, and go to production with a Linux server, sometimes you get inconsistent yarn.lock file, because your systems are different.

Usually, you should push your yarn.lock file to your repo and use it on production. But if you are a lucky one like me, you can get the following message:

rails server -e production

ERROR: The engine "node" is incompatible with this module. Expected version ">=8.16.0". Got "8.10.0"

You are getting this error because your node installations on your dev and production environments are different. You can always update your dev environment to be in sync with your production. I think this should be the best solution. To do that;

yarn install --ignore-engines

This step updates your yarn.lock file for your production environment. Then, you can push it to your repo and use it from your dev environment. 👍

You can also update your node to a newer version, but this can break other things in production with a node dependency. So, be careful.

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

A better option would be to go with different yarn.lock files and yarn installation for production and development if you know what you are doing 😄. Unfortunately, that was not the case for me.

If you decide to go with two different yarn files, go to your webpacker.yml file and change the following line so that you should not get an error every time.

check_yarn_integrity: true 
to 
check_yarn_integrity: false

Hosts for Production

When you can run rails server -e production successfully but you get;

Blocked host: turrsu.com
To allow requests to turrsu.com, add the following to your environment configuration:

config.hosts << "turrsu.com"

This is a feature that comes with Rails 6. You need to define hosts for the app to work. So you go config/environments/production.rb file and add your host.

config.hosts << "www.turrsu.com"

and also you need to go to your development.rb file and add this

config.hosts = nil

and if you have dynamic URLs, you can use regex here like this

config.hosts << /[a-z0-9]+\.turrsu\.com/

Serving assets from webpack with Rails and Puma

As long as you have nginx or apache installed as a server, they serve your assets, and you don't need to do anything. However, if you want to serve your assets from Puma and Rails, you have to do this.

Go to your config/environments/production.rb file and change the following line.

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
to
config.public_file_server.enabled = true

This serves your assets from your Puma/Rails.

You are all set but still can't access your assets from production

This usually happens because of two reasons. You either didn't set your bin/webpack for production, or you didn't compile your assets for production. Let's go one by one.

Set webpack for production

To compile your packs, you do for your app.

bin/webpack

But it doesn't do it for production because in default, it's set for the development environment, and you need to change that in production.

Go your bin/webpack from your production env.

Change these lines

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= "development"

to this

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "production"
ENV["NODE_ENV"] ||= "production"

or define RAILS_ENV, RACK_ENV and NODE_ENV environment variables to production.

Now, when you do bin/webpack this compile your packs for production.

Lets compile for production

In Rails, you need to compile your assets to serve them. Compile doesn't always re-write your files. Sometimes you get this error:

Webpacker can't find application in /Users/tcgumus/Documents/rails/pikseladam-with-ror/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
 unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

To make it a clean and straightforward compile job, you need to delete public/assets and public/packs folder.

RAILS_ENV=production rake assets:precompile
bin/webpack

or if you didn't update your bin/webpack file, you do this

RAILS_ENV=production rake assets:precompile
RAILS_ENV=production RACK_ENV=production NODE_ENV=production bin/webpack

After this, I was able to run my app from my Puma/Rails and access my assets from it. This article solves some problems you will face when you go to production with Rails 6 and webpack, but I'm pretty sure this is just a beginning.

Defining a production environment is a tough job. It includes lots of decisions to make, and it changes quickly when requirements change, when developers change. I wish this article will help some of you, but please consider that it includes my decisions for my production environment right now. It can change through time and space. This is still a work in progress. 👨‍💻

Please let me know if I can help.
Best regards,
Tuna

Install Gatsby, add Tailwind CSS to it and deploy it to Netlify. A simple website example. 📖

Tuna Çağlar Gümüş — Sat, 21 Dec 2019 21:32:32 +0000

Hello all,

I wanted to try something new with my blog. So, I will use GatsbyJS. I wanted to learn it anyway. Gatsby is a react based free framework for creating fast websites and apps.

Basically;

You install nodeJS, yarn, and npm (mostly comes with nodeJS).
You create a new Gatsby project.
Develop your project with javascript, CSS, and HTML.
Build the project.
Deploy your project by just copying and pasting your Public folder to host.

I will use Netlify as my host, and Tailwind as my CSS Framework.

Netlify is somewhat crazy. They host websites for free until 100GB bandwidth. They also let you use custom domains. And, Tailwind CSS is an incredible CSS framework. Probably that's why i see a lot of tweets and questions about that.

OK, let's get to work.

Requirements

Go to the nodeJS website and install it.
If you want to use homebrew for it.

    brew install node

But be careful, it won't install npm. You need to install npm by using CURL.

Install yarn.

    brew install yarn

Install gatsby and create your first project

Let install gatsby.

    npm install -g gatsby-cli

and try it.

    gatsby --help

Now create our first project. Go to your desired folder for the project.

    gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

You can change the name of your folder after creating your project.
Let's run our gatsby project.

    cd hello-world
    gatsby develop

This will generate our first project in development mode. You can view your site by navigating to http://localhost:8000/

Install tailwind CSS to your gatsby project

First, install tailwindcss to your npm packages.

    npm install tailwindcss

Create your Tailwind config file.

    npx tailwind init

Now, we need to install postcss plugin.

    npm install --save gatsby-plugin-postcss

Include the plugin in your gatsby-config.js file.

    plugins: [`gatsby-plugin-postcss`],

Create a postcss.config.js file at your project home and insert

    module.exports = () => ({
      plugins: [require("tailwindcss")],
    })

Now we need to include our tailwind CSS to our project.
Create a "styles" folder under the src folder. Create site.css file in styles folder.

    @tailwind base;

    @tailwind components;

    @tailwind utilities;

Now call your site.css file in your pages/index.js file.

    import "../styles/site.css"

That should be it. Now you can use Tailwind CSS in your application by simply using classes in your index.js file.

    import React from "react"
    export default () => (
       <div class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">Hello Gatsby!</div>
    )

And build your website for deployment. This will generate files in Public folder.

    gatsby build

Run your project in local

    gatsby develop

Now, you should see your processed "Hello Gatsby!" block.

Publish your project on Github, Gitlab or Bitbucket and deploy it to your Netlify host.

I won't share every step here with images. It will look disrespectful but there are plenty of articles about publishing your first project in Github. Please, check these out.

But, Simply;

Create an account in Github.
Download & install the GitHub client.
Login from the client and create a new repo for your gatsby project "Public" folder.
Commit it and publish it.

Then, there is the deployment.

Create your netlify account & log in.
Click "New site from Git" button.
Connect your GitHub profile with netlify.
Select your project from the list of your GitHub repos.

Then, it will ask for your domain.

Enter your domain name.
Go to your domain provider and change your website DNS to

dns1.p07.nsone.net
dns2.p07.nsone.net
dns3.p07.nsone.net
dns4.p07.nsone.net
Verify your domain from netlify.
Click the "Deploy" button.

And, that should be it. You should view your project build from your domain. You can check my example project results from https://pikseladam.com.
Actually, I didn't like the ending of this post. But, I didn't want to spoil it with a presentation of screenshots either.
Anyway, I just started writing community articles and I have a lot to learn. I'm sure you will understand. 👍

Best regards,
Tuna

How to install Tailwind CSS on Rails 6.0

Tuna Çağlar Gümüş — Mon, 16 Dec 2019 20:07:45 +0000

Hello all,

I recently tried to upgrade my rails app from 5.2.3 to 6.0.0. The main reason for that to have a webpacker to play with. Webpacker is a manager for app-like JS modules and Tailwind CSS is one of them. I choose Tailwind CSS for my webpacker test project since I also wanted to learn it.

I actually started webpacker - tailwind installation on my rails 5.2.3 but it got complicated quickly and also I didn't like the outcome of my platform. There were lots of config files calling one another. I was using old and new stylesheets at the same time which is not a clean approach.

The lucky thing for me, Rails 6 is now using Webpacker as a JavaScript compiler instead of an old assets pipeline aka Sprockets. I decided it's time for the upgrade my system to the new version and using Tailwind CSS in it. I thought it will be much more optimized and bug-free. Additionally, I believe it is a better approach to implementation.

Before you start

Be sure that rails is working and installed.

    % rails --version
    Rails 6.0.0

Be sure webpacker installed and working. If you get an error when you do this. Head over to the end of the page. I shared some of the problems and their fixes at the end of the page.

    % bin/webpack
    warning package.json: No license field                                                    
    Hash: b16157b01cbbb4d9c379
    Version: webpack 4.41.2
    Time: 5261ms
    Built at: 2019-12-16 20:41:05
    ...

Be sure yarn and node are installed.
But be careful. I really didn't want to spoil my codebase with MBs of node_modules. So I didn't really installed the node.js from node download page. I just installed the yarn which has a dependency with node. So it only installs the needed node elements which a much better and cheaper option.

For mac;

    brew install yarn 
    # to check installation do
    yarn --version

So now you should be ready.

Installation

    yarn add tailwindcss
    # and do 
    yarn list

and find tailwindcss on the list. Since webpacker has a dependency for postcss-import we will go with the @import method instead of @tailwind method when calling the tailwindcss.

Go app/javascript/css/application.scss file.
As I unnecessarily mentioned I upgraded from rails 5.2.3 to 6. This file was not there and tailwindcss skipped creating it. If there is no application.scss in your path, create it.

So, time to edit some pages. To file: app/javascript/css/application.scss

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";

add to file: app/javascript/packs/application.js

    require("css/application.scss")

add to file: postcss.config.js

    require('tailwindcss'),
    require('autoprefixer'),

go to your application layout page add 2 new lines in the head. In my case it was file: app/views/layouts/application.html.erb

    <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

and now do again

    bin/webpack

look over the output and see your pack/application.js is called.

That should be it. Now you can go and try your Tailwind CSS. This is a good example to try it out. Copy code to your app/views/layouts/application.html.erb page. Start your server and check it out.

    <div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
        <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
        </p>
    </div>
    <div class="px-6 py-4">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
    </div>
    </div>

Some error that I faced along the way.

    ERROR:
    Webpacker configuration file not found...

That was a yarn installation error. I uninstalled yarn and installed it again in the rails directory. That fixed it.

    brew uninstall yarn

    ERROR:
    LoadError: Could not load the 'listen' gem.

ass you probably understand. Rails 6 is requiring listen gem to be installed.

    gem 'listen'
    bundle

and it will fix this problem as well.

    ERROR:
    Tailwind CSS is not loading.

You should check your application.html.erb file and make sure your pack tags are correct.

Ok. That's it for me for now. Please let me know if I miss anything. 👍

Best regards,
Tuna