Tw Dev Server - como ele pode te ajudar a estudar programação? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 02 Min 23 Seg Tempo restante da oferta: 07 02 23 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Tw Dev Server - como ele pode te ajudar a estudar programação? [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) # Tw Dev Server - como ele pode te ajudar a estudar programação? Aprenda a utilizar o Tw Dev Server como servidor de arquivos estáticos e como simulador de back end com API e banco de dados para facilitar seus estudos. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server.png) Olá Web Developers! Vamos ver o que é e como utilizar o `Tw Dev Server` para te ajudar na hora de estudar programação. ## O que é o Tw Dev Server? Quando estamos trabalhando com desenvolvimento web precisamos de pelo menos um servidor de arquivos estáticos para nossos arquivos HTML, CSS, [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript"), imagens, etc. Isso porque se abrirmos nosso HTML diretamente no navegador, certas operações não poderão ser feitas pelo JavaScript por questões de segurança. Além disso, também é comum a necessidade de uma [API](https://www.treinaweb.com.br/blog/o-que-e-uma-api/ "API") para fazermos requisições, onde recuperamos ou salvamos dados quando estamos estudando desenvolvimento web ou criando um aplicativo mobile. Para que essas necessidades básicas fossem resolvidas surgiu o `Tw Dev Server`. Ele veio com a finalidade de iniciar um servidor estático para nossos arquivos e também servir como um servidor que recebe requisições através de uma API. Com essa API podemos simular um servidor com banco de dados que recebe requisições para recuperar, salvar, modificar e apagar dados (CRUD). E tudo isso sem precisar de nenhuma configuração ou instalação complicada! ![Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-previa.gif) ## Instalando o Tw Dev Server O `Tw Dev Server` pode ser baixado pelo NPM ou como uma extensão do `VS Code`. No NPM, para instalar globalmente em sua máquina, execute: ``` $ npm install -g @treinaweb/tw-dev-server ``` Assim que você tiver instalado, seu terminal terá o comando `tw-dev-server` disponível. ## Iniciando um servidor de arquivos estáticos Para iniciar um servidor de arquivos estáticos basta abrir o seu terminal na pasta raiz do seu projeto e executar: ``` $ tw-dev-server ``` Com isso nós já teremos nosso servidor rodando. ![Tw Dev Server - Terminal](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-terminal.png) Assim como você pode ver na imagem acima, ele irá mostrar como você pode acessar seus arquivos pelo navegador. Na mesma máquina basta acessar `http://localhost:3002`. Entretanto, caso queira acessar de outra máquina ou dispositivo que estejam na mesma rede, basta acessar o endereço que é mostrado logo abaixo. Como se pode notar, ele utiliza por padrão a porta 3002, mas isso pode ser alterado. Por exemplo, caso a gente queira utilizar a porta 4200: ``` $ tw-dev-server --port=4200 ``` Para encerrar basta pressionar `Ctrl + C`. [ ![RxJS - Programação reativa](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/reactivex.svg) Curso RxJS - Programação reativa Conhecer o curso ](https://www.treinaweb.com.br/curso/programacao-reativa-com-rxjs) ### Live Reload e Browser Sync Quando estamos escrevendo nosso HTML, CSS e JavaScript, pode ser meio cansativo ter que ficar atualizando o navegador a todo momento para ver o resultado do nosso trabalho. Para isso o `Tw Dev Server` também possui a funcionalidade conhecida como `Live Reload`. Com essa função ativada, seu navegador vai atualizar automaticamente assim que você alterar algum arquivo HTML ou JavaScript. Caso a alteração seja em um arquivo CSS, o CSS da página é atualizado mesmo sem precisar atualizar o navegador. Para ativar essa função, basta adicionar `--live` ao comando. ``` $ tw-dev-server --live ``` Além disso, também há a possibilidade de você querer testar sua página em vários navegadores, dispositivos ou tamanhos de janelas diferentes. E para facilitar isso temos a função `Browser Sync`, que vai sincronizar todos os navegadores que estiverem acessando a sua página. Com isso você pode acessar a sua página a partir de vários navegadores, até mesmo do seu celular, e tudo o que você fizer em um navegador (como escrever, clicar num botão ou rolar a página) também acontecerá nos demais navegadores! Essa função também atualiza todos os navegadores quando você altera o seu código, não precisando ativar o `--live`. Para ativar o `Browser Sync` basta adicionar `--sync` ao comando: ``` $ tw-dev-server --sync ``` ## Fazendo Requisições Uma das principais funcionalidades do `Tw Dev Server` é disponibilizar uma API para podermos fazer requisições. E isso sem precisar configurar um back end ou um banco de dados. Porém, lembre-se que essa é uma ferramenta para facilitar nos estudos, portanto não deve ser usada para um produto que será lançado, pois não é otimizada para isso. Podemos fazer operações `GET`, `POST`, `PUT` e `DELETE`. Para que possamos fazer requisições para a API, basta adicionar `/api` ao final do endereço que utilizamos para acessar os arquivos estáticos. Em resumo, se você acessa os arquivos por `http://localhost:3002`, as requisições devem ser feitas a `http://localhost:3002/api`. Logo após o `/api` nós adicionamos os nomes que quisermos. Isso será para nos organizarmos. ## Painel Visual do Tw Dev Server Para testar as requisições, ver seus dados, modificá-los, etc, você pode usar a ferramenta visual do `Tw Dev Server`. Basta acessar [https://treinaweb.github.io/tw-dev-server/](https://treinaweb.github.io/tw-dev-server/ "https://treinaweb.github.io/tw-dev-server/"). Uma vez que o seu servidor estiver rodando, a bolinha ao lado do endereço aparecerá verde. ![Tw Dev Server - Painel](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-painel.png) ## Criando Dados Imagine que a gente esteja num projeto de biblioteca e que queremos fazer uma operação `POST` para salvar um livro. Podemos, por JavaScript, fazer uma requisição com o seguinte código: ```javascript let livro = { "nome": "GraphQL: A revolucionária linguagem de consulta e manipulação de dados para APIs", "autor": "Akira Hanashiro" }; fetch('http://localhost:3002/api/biblioteca/livros', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(livro) }) .then(response => response.json()) .then(console.log); ``` Teremos como resposta um objeto com um campo `id` para identificar o dado recém cadastrado. Ele é gerado automaticamente pelo `Tw Dev Server`. Não apenas por JavaScript, como também podemos fazer essa operação pela nossa ferramenta visual: ![Tw Dev Server - Post](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/tw-dev-server-post.png) ## Buscando Dados Para fazermos uma requisição `GET` e recuperar todos os livros, bastaria fazer: ```javascript fetch('http://localhost:3002/api/biblioteca/livros') .then(response => response.json()) .then(console.log); ``` E, claro, também podemos fazer isso na nossa ferramenta visual. Porém, caso você queira que seja retornado apenas um único dado, pode-se passar o `id` do elemento. Por exemplo: `http://localhost:3002/api/biblioteca/livros?id=1591291655803`. ## Atualizando Dados Para atualizar um dado basta fazer uma operação `PUT`, usar a mesma URL e indicar nela o `id` do dado que você quer atualizar: ```javascript let novoLivro = {...}; fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', { method: 'PUT', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(novoLivro) }) .then(response => response.json()) .then(console.log); ``` Assim que executar essa requisição teremos como resposta o dado atualizado. [ ![Nest.js - Banco de dados com TypeORM](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/nest-js.svg) Curso Nest.js - Banco de dados com TypeORM Conhecer o curso ](https://www.treinaweb.com.br/curso/nestjs-banco-de-dados-com-typeorm) ## Apagando Dados Por fim temos a função de apagar dados. Para isso basta fazer uma requisição `DELETE` passando o `id` do dado que se quer apagar. ```javascript fetch('http://localhost:3002/api/biblioteca/livros?id=1591291655803', { method: 'DELETE', }) .then(response => response.json()) .then(console.log); ``` Caso você queira apagar todos os dados de uma coleção, basta passar `all` no lugar do `id` ```javascript fetch('http://localhost:3002/api/biblioteca/livros?id=all', { method: 'DELETE', }) .then(response => response.json()) .then(console.log); ``` Em conclusão, o `Tw Dev Server` é uma ótima ferramenta que pode se aliar aos seus estudos em desenvolvimento web e mobile, seja servindo arquivos ou simulando um back end com api e banco de dados. Também pode ser usado para fazer testes caso você esteja desenvolvendo um front mas o back end ainda não tem uma api pronta para te retornar dados. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #NodeJS ](https://www.treinaweb.com.br/blog/tag/nodejs) - [ #API REST ](https://www.treinaweb.com.br/blog/tag/api-rest) - [ #NPM ](https://www.treinaweb.com.br/blog/tag/npm) - [ #desenvolvimento mobile ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-mobile) - [ #web developer ](https://www.treinaweb.com.br/blog/tag/web-developer) - [ #tw-dev-server ](https://www.treinaweb.com.br/blog/tag/tw-dev-server) - [ #Mock ](https://www.treinaweb.com.br/blog/tag/mock) - [ #live reload ](https://www.treinaweb.com.br/blog/tag/live-reload) - [ #browser sync ](https://www.treinaweb.com.br/blog/tag/browser-sync) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/dicas-de-como-estudar-programacao-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 6 anos atrás ## [ Dicas de como estudar programação ](https://www.treinaweb.com.br/blog/dicas-de-como-estudar-programacao) Confira neste artigo algumas dicas de como estudar programação com foco na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1) Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/11/consumindo-api-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Consumindo APIs com Python - Parte 1 ](https://www.treinaweb.com.br/blog/consumindo-apis-com-python-parte-1) Veja neste artigo como consumir APIs com Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/c-sharp-consumindo-apis-com-flurl-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 6 anos atrás ## [ C# - Consumindo APIs com Flurl ](https://www.treinaweb.com.br/blog/c-consumindo-apis-com-flurl) Veja como consumir dados de uma API no C#, utilizando a biblioteca Flurl. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/npm-voce-sabe-o-que-da-para-fazer-com-ele-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 6 anos atrás ## [ NPM - Você sabe o que dá para fazer com ele? ](https://www.treinaweb.com.br/blog/npm-voce-sabe-o-que-da-para-fazer-com-ele) Veja as várias possibilidades do que podemos fazer com o NPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05114901/ORLEANS-NET-CORE-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando uma aplicação distribuída com ASP.NET Core e o Microsoft Orleans ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-distribuida-com-asp-net-core-e-o-microsoft-orleans) Veja o exemplo de uma aplicação ASP.NET Core acessando os dados de um servidor cluster definido com o Microsoft Orleans. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171418/loiane-groner-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 12: Loiane Groner ](https://www.treinaweb.com.br/blog/tw-entrevista-12-loiane-groner) Fizemos uma série de entrevistas chamada "TW Entrevista". A entrevistada de hoje é a Loiane Groner, que já escreveu diversos livros publicados internacionalmente e possui os títulos GDE (Google Developer Expert) e Microsoft MVP (Most Valuable Professional). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171404/diego-eis-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 11: Diego Eis ](https://www.treinaweb.com.br/blog/tw-entrevista-11-diego-eis) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171346/jaydson-gomes-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 10: Jaydson Gomes ](https://www.treinaweb.com.br/blog/tw-entrevista-10-jaydson-gomes) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Jaydson Gomes, um dos fundadores da Nasc e BrazilJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/27171327/reinaldo-ferraz-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 09: Reinaldo Ferraz ](https://www.treinaweb.com.br/blog/tw-entrevista-09-reinaldo-ferraz) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Reinaldo Ferraz, especialista em Acessibilidade para a Web e que trabalha na W3C Brasil. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 02min 23s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58