javascript

Existem 2 posts marcados com a tag javascript.

Deploy de aplicações SSR utilizando o Supervisord

Se você está construindo aplicações que renderizam do lado do servidor, o famoso SSR, utiliznado React (com o next.js) ou Vue.js (com o nuxt.js), você vai precisar de alguma ferramenta para controle do processos quando for fazer o deploy. Eu escolhi fazer o deploy de aplicações SSR utilizando o Supervisord, apesar de ter visto em vários sites o pessoal utilizando PM2 para este tipo de aplicação, acredito que o Supervisord é mais conhecido em um contexto geral, não só de quem é do mundo do node.
Se você já viu meu Guia para Deploy Django e Python 3, você já usou o Supervisor.

A razão número 1 para você ter um aplicativo React ou Vue utilizando SSR é por causa do SEO. O Googlebot não trabalha bem com páginas renderizadas do lado do cliente (CSR, o contrário do SSR) e por conta disso pode nem indexar suas páginas. Então, ter uma aplicação SSR dessas rodando no seu servidor, significa que você vai servir a aplicação utilizando o node pra rodar os javascripts que você criou. E para manter o seu comando node rodando, você não pode simplesmente abrir em um screen e torcer para que continue rodando. Você precisa colocar seu app em uma ferramenta de controle de processos como o Supervisord para inicializar sua aplicação caso o servidor reinicie ou sua própria aplicação dê algum pau.

Instalando o Supervisord:

sudo apt-get install supervisor

Agora, vamos criar um arquivo de configuração para a aplicação SSR:

sudo vi /etc/supervisor/conf.d/my-ssr-app.conf

That’s the content:


[program:myappname]
directory=/home/username/yourproject/
command=npm run start
user=username
autostart=true
autorestart=true

Então, precisamos avisar o supervisord que existe um novo processo para ele controlar


sudo supervisorctl reread
sudo supervisorctl update

E futuramente, quando precisar restartar apenas o seu app, use o nome que você colocou no arquivo de configuração.


sudo supervisorctl restart myappname

E é isso aí. Agora você sabe como fazer deploy de aplicações SSR utilizando o Supervisord.

I Know Kung Fu GIF from The Matrix (Now you know how to deploy ssr applications using supervisord)

Alguns links:

Post original em inglês

https://www.reddit.com/r/reactjs/comments/an16mx/how_does_seo_work_with_react/

https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8

https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg

Como criar uma extensão para o Google Chrome – Chrome Extension

Essa extensão é super simples, deixei o código dela no github. Na prática, ela é um Content Script, porque é um arquivo Javascript que roda em um contexto.

O objetivo da extensão é mudar o texto das páginas de usuários do StackOverflow.

Primeiro Passo – Criar o Manifest.json

Crie uma pasta para a sua extensão. No caso eu criei uma pasta chamada Mano_programador que é o nome da minha extensão para chrome . Você pode encontrá-la aqui

Qualquer extensão para chrome precisa obrigatoriamente do arquivo manifest.json. Nele você vai colocar as informações importantes sobre a sua extensão que serão usadas pelo Chrome e pela Chrome Web Store.

O meu arquivo ficou assim:

{
 "manifest_version": 2,

 "name": "Mano_programador",
 "description": "Mano programador, o dialeto da quebrada dos nerd.",
 "version": "1.0",
 "content_scripts": [
     {
         "matches": ["http://stackoverflow.com/users/*"],
         "js": ["jquery.js", "myscript.js"]
     }
     ]
}

Coloquei apenas os atributos obrigatórios, os matches nas páginas que meu Content Script vai rodar e os arquivos Javascript que vou utilizar, no caso coloquei o jquery também, pois vou utilizá-lo.

A lista completa com os atributos que podem ir no Manifest.json você encontra aqui.

Segundo Passo – Criar o myscript.js

Você pode chamar esse arquivo como quiser. Eu chamei de myscript.js. Não esqueça de colocar o jquery.js ou qualquer outro arquivo que você tenha colocado no manifest aqui também.

myscript.js:

$(".count").each(function(index) {

    if ( (typeof this.nextSibling) != 'undefined'){
        switch(this.nextSibling.nodeValue.trim()){
            case 'Answers':
                this.nextSibling.data = ' manos me devem uma breja';
                break;
            case 'Reputation':
                this.nextSibling.data = ' de reputação no gueto dos nerd';
                break;
            case 'Questions':
                this.nextSibling.data = ' paradas que não sabia e agora sei';
                break;
            case 'Tags':
                this.nextSibling.data = ' assuntos pa toca po pai';
                break;
            case 'Accounts':
                this.nextSibling.data = ' otros saite';
                break;
            case 'Badges':
                this.nextSibling.data = ' meus bagulinhos';
                break;
            case 'Active bounties':
                this.nextSibling.data = ' Recopensas q to dano';
                break;
            case 'Votes Cast':
                this.nextSibling.data = ' noqvotei [tan dóu fo wut]';
                break;
        }
    }
});

Esse arquivo apenas encontra os textos da página e os substitui pelo dialeto do Mano Programador.

Terceiro Passo – Testar sua extensão

Para testar sua extensão abra o seu navegador Google Chrome e entre na seguinte página: chrome://extensions/

Você verá uma lista de todas as extensões instaladas no seu Chrome, para colocar a sua apenas arraste e solte a pasta com todos os seus arquivos (no caso: manifest.json, myscript.js e jquery.js) para dentro dessa aba do Chrome. Pronto, agora você pode testar seu script.

Quarto Passo – Publicar na Chrome Web Store

Isso é fácil, você precisa ter uma conta de programador (que vai te custar uma taxa de 5 dólares). É só entrar no Developer Dashboard e seguir os passos.

Agora você sabe como criar uma extensão para o Google Chrome

Veja como fica uma página de usuários do stackoverflow (no caso a minha) :
screenshot - mano programador