Criar protótipos com vuejs e maneira super rápida é tão fácil… somente 4 comandos no terminal
npm install -g vue-cli
para instalar o vue-cli de maneira global. Se você já fez esse passo uma vez, não precisa mais para os próximos projeto
vue init webpack meuprojeto
para iniciar o projeto
cd meuprojeto && npm install
para ir para o diretório do seu novo projeto instalar as dependências
e por fim
npm run dev
para rodar seu projeto!!
Vamos configurar um ambiente de projeto, como se fosse ume esqueleto, com webpack e webpack-dev-server com auto refresh para melhor desenvolvimento.
Primeiro vamos ao terminal para instalar o webpack e o webpack-dev-server de maneira global
sudo npm install -g webpack webpack-dev-serverAgora navegamos até a pasta do nosso novo projeto e rodamos o “npm init” para iniciar o projeto e depois, abrimos o arquivo package.json e adicionamos as seguintes dependências
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"css-loader": "^0.26.1",
"file-loader": "^0.10.0",
"node-sass": "^4.5.0",
"sass-loader": "^6.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.2.1"
},logo depois de adicionarmos essas dependências (que incluem aí o babel e alguns loaders do webpack) nós rodamos no terminal o npm update para baixar as dependências necessárias.
Nesse passo configuramos o webpack.config.js com o source-map, que irá permitir que possamos debugar nosso projeto, com o plugin de auto refresh, com os loaders de babel, url e file loader, css, style e sass loader, além do devServer, que será o servidor de desenvolvimento que irá nos ajudar com o auto compile a auto refresh 🙂 .. mas de maneira simples, é só copiar esse código abaixo
webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: './src/js/main.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader:'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.(woff|woff2|ttf|svg|eot)$/,
loader: 'url-loader?limit=100000',
},
{
test: /\.(scss|sass)$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
}
]
},
devServer: {
// host: '0.0.0.0',
inline: true,
watchOptions: {
poll: true,
aggregateTimeout: 300
}
}
}prontinho… dessa maneira a gente já tem um pré ambiente de desenvolvimento javascript, com webpack, common.js, debug e auto refresh
Como instalar o lite-server e o browser sync para ter o poder do autorefresh e melhor produção dos seus projetos
Não é chato você estar escrevendo seus códigos e toda hora tem que dar reload na página?
Chega disso!
Entre no seu ambiente de produção pelo terminal e rode o seguinte código para instalar o lite-server
sudo npm -g install lite-server
Dessa forma, ao ir na pasta do seu projeto e rodar o comando lite-server, o servidor já estará disponibilizando um endereço para você acessar o seu projeto.
Agora vamos fazer o refresh automático com o poderoso Browser Sync
Configuraremos um novo arquivo dentro da pasta raiz do projeto.
nano bs-config.json E coloque o seguinte código no arquivo
{
"host": "0.0.0.0",
"watchOptions": {
"usePolling": true
}
}
Pronto.. agora rode o lite-server novamente e você estará conectado ao browser sync para seus refreshs automáticos
Para mais detalhes e instruções avançadas, vá até o scotch.io nesse artigo aqui
sudo apt-get install apache2 php5 mysql-server php5-mysql phpmyadmin && sudo /etc/init.d/apache2 restart
OU MELHOR:
sudo apt-get install lamp-server^ phpmyadmin
Aqui um script pra fazer seu server em Node.js rodar ao iniciar sua máquina e deixá-lo rodando em background. (testei no ubuntu)
description "node.js server"
author "kvz - http://kevin.vanzonneveld.net"
# used to be: start on startup
# until we found some mounts weren't ready yet while booting:
start on started mountall
stop on shutdown
# Automatically Respawn:
respawn
respawn limit 99 5
script
export HOME="/root/path/to/your/nodejs/app"
cd $HOME
exec yourprogram.js >> $HOME/node.log 2>&1
end script
post-start script
# Optionally put a script here that will notifiy you node has (re)started
# /root/bin/hoptoad.sh "node.js has started!"
end script