aplicacao-sailsjs-semantic-ui.md

1. Crie a aplicação

sails new app

2. Dentro da pasta app, Crie o arquivo de configuração do bower

touch .bowerrc

3. Edite o arquivo para que o bower instale os pacotes em um determinado diretório

{
    "directory" : "assets/vendor"
}

4. Inicie o bower e aperte enter para todas as perguntas

bower init

5. Use o bower para instalar o Semantic UI

bower install semantic-ui --save

6. Edite o arquivo assets/style/importer.less e adicione essa linha

@import '../vendor/semantic/dist/semantic.css';

nesse caso estamos adicionando o semantic-ui as dependências de estilo da aplicação. O mesmo se aplica ao javascript

7. Edite o arquivo tasks/pipeline.js e dentro do objeto jsFilesToInject inclua as dependências javascript do semantic-ui

deve ficar mais ou menos assim

var jsFilesToInject = [
  'dependencies/sails.io.js',

  'vendor/jquery/dist/jquery.js',
  'vendor/semantic/dist/semantic.js',

  'dependencies/**/*.js',

  'js/**/*.js'
];

8. Vamos testar e ver se está funcionando. Edite o arquivo views/pages/homepage.ejs e substitua o conteúdo por esse código html

<div class="ui grid middle aligned">
    <div class="row">
      <div class="column">
        <div class="ui text container">
            <div class="ui positive message">
                <div class="header">
                  Sails.js + Semantic UI <i class="cogs icon"></i>
                </div>
                <p>Você está fazendo isso do jeito certo </p>
            </div>
        </div>
      </div>
    </div>
</div>

9. Reinicie o sails e navegue até http://localhost:1337/

Se você está vendo algo como a imagem a baixo, então deu tudo certo.

---

Até a próxima 👋