Built Tool

Vite

Vite doc:

$ npm create vite@latest invest-app -- --template vanilla
 
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y)
 
Scaffolding project in /home/.../invest-app...
 
Done. Now run:
 
  cd invest-app
  npm install
  npm run dev
$ npm create vite@latest invest-app -- --template vanilla
 
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y)
 
Scaffolding project in /home/.../invest-app...
 
Done. Now run:
 
  cd invest-app
  npm install
  npm run dev

Código Fonte

Arquivos
invest-app
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── package.json
├── public
│   └── vite.svg
└── style.css
Arquivos
invest-app
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── package.json
├── public
│   └── vite.svg
└── style.css
$ cd invest-app
$ npm install
$ npm run dev
 
> invest-app@0.0.0 dev
> vite
 
 
  VITE v4.4.9  ready in 191 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
$ cd invest-app
$ npm install
$ npm run dev
 
> invest-app@0.0.0 dev
> vite
 
 
  VITE v4.4.9  ready in 191 ms
 
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

http://localhost:5173/:

Building the App

$ npm run build
 
> invest-app@0.0.0 build
> vite build
 
vite v4.3.0 building for production...
✓ 7 modules transformed.
dist/index.html                      0.45 kB │ gzip: 0.29 kB
dist/assets/javascript-8dac5379.svg  1.00 kB │ gzip: 0.60 kB
dist/assets/index-48a8825f.css       1.24 kB │ gzip: 0.65 kB
dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
✓ built in 132ms
 
$ npm run preview
 
> invest-app@0.0.0 preview
> vite preview
 
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
$ npm run build
 
> invest-app@0.0.0 build
> vite build
 
vite v4.3.0 building for production...
✓ 7 modules transformed.
dist/index.html                      0.45 kB │ gzip: 0.29 kB
dist/assets/javascript-8dac5379.svg  1.00 kB │ gzip: 0.60 kB
dist/assets/index-48a8825f.css       1.24 kB │ gzip: 0.65 kB
dist/assets/index-44b5bae5.js        1.45 kB │ gzip: 0.75 kB
✓ built in 132ms
 
$ npm run preview
 
> invest-app@0.0.0 preview
> vite preview
 
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose

Build Options

Deploying a Static Site

Static Asset Handling

/codes/package/vite/invest-app/main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'
 
document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`
 
setupCounter(document.querySelector('#counter'))
/codes/package/vite/invest-app/main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'
 
document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`
 
setupCounter(document.querySelector('#counter'))

NPM Dependency Resolving and Pre-Bundling

import 'bootstrap'
import 'bootstrap'

Import JavaScript

// import Investments from './lib/investments.js'
import Investments from './lib/investments'
// import Investments from './lib/investments.js'
import Investments from './lib/investments'

Bootstrap

Bootstrap:

$ npm install bootstrap
$ npm install bootstrap

Código Fonte

Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   └── InvestmentCard.js
│   ├── data.js
│   ├── lib
│   │   └── utils.js
│   └── main.js
├── package-lock.json
├── package.json
└── public
    └── vite.svg
Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   └── InvestmentCard.js
│   ├── data.js
│   ├── lib
│   │   └── utils.js
│   └── main.js
├── package-lock.json
├── package.json
└── public
    └── vite.svg
/codes/package/bootstrap/invest-app/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Invest App</title>
  </head>
  <body class="bg-body-tertiary">
    <div class="container">
      <h1 class="text-center my-5">Investimentos</h1>
      <div class="investments row row-cols-1 row-cols-md-3 g-4"></div>
    </div>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>
/codes/package/bootstrap/invest-app/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Invest App</title>
  </head>
  <body class="bg-body-tertiary">
    <div class="container">
      <h1 class="text-center my-5">Investimentos</h1>
      <div class="investments row row-cols-1 row-cols-md-3 g-4"></div>
    </div>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>
/codes/package/bootstrap/invest-app/js/main.js
import 'bootstrap';
import { investments } from './data';
import { InvestmentCard } from './components/InvestmentCard';
 
import 'bootstrap/dist/css/bootstrap.css';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');
/codes/package/bootstrap/invest-app/js/main.js
import 'bootstrap';
import { investments } from './data';
import { InvestmentCard } from './components/InvestmentCard';
 
import 'bootstrap/dist/css/bootstrap.css';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');
/codes/package/bootstrap/invest-app/js/components/InvestmentCard.js
import { formatCurrency, formatDate } from '../lib/utils';
 
export function InvestmentCard(investment) {
  return `
    <div class="col">
      <div
        id="investment-${investment.id}"
        class="bg-white card"
      >
        <div class="card-header d-flex justify-content-between align-items-center">
          <div class="fs-5 fw-bold text-primary-emphasis">
            ${investment.name}
          </div>
          <div class="fs-5 fw-bold text-primary-emphasis">
            ${formatCurrency(investment.value)}
          </div>
        </div>
        <div class="card-body">
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Origem:</span>
            ${investment.origin}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Categoria:</span>
            ${investment.category}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Data:</span>
            ${formatDate(investment.created_at)}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Taxa:</span>
            ${investment.interest}
          </p>
        </div>
      </div>
    </div>
  `;
}
/codes/package/bootstrap/invest-app/js/components/InvestmentCard.js
import { formatCurrency, formatDate } from '../lib/utils';
 
export function InvestmentCard(investment) {
  return `
    <div class="col">
      <div
        id="investment-${investment.id}"
        class="bg-white card"
      >
        <div class="card-header d-flex justify-content-between align-items-center">
          <div class="fs-5 fw-bold text-primary-emphasis">
            ${investment.name}
          </div>
          <div class="fs-5 fw-bold text-primary-emphasis">
            ${formatCurrency(investment.value)}
          </div>
        </div>
        <div class="card-body">
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Origem:</span>
            ${investment.origin}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Categoria:</span>
            ${investment.category}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Data:</span>
            ${formatDate(investment.created_at)}
          </p>
          <p class="my-1 text-secondary-emphasis">
            <span class="fw-bold">Taxa:</span>
            ${investment.interest}
          </p>
        </div>
      </div>
    </div>
  `;
}
 
$ npm run dev
$ npm run dev

Tailwind CSS

Tailwind CSS:

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init

Código Fonte

Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   └── InvestmentCard.js
│   ├── data.js
│   ├── lib
│   │   └── utils.js
│   └── main.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js
Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   └── InvestmentCard.js
│   ├── data.js
│   ├── lib
│   │   └── utils.js
│   └── main.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js
/codes/package/tailwind-css/invest-app/postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
/codes/package/tailwind-css/invest-app/postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
/codes/package/tailwind-css/invest-app/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
/codes/package/tailwind-css/invest-app/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
/codes/package/tailwind-css/invest-app/css/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/codes/package/tailwind-css/invest-app/css/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/codes/package/tailwind-css/invest-app/js/main.js
import { investments } from './data';
import { InvestmentCard } from './components/InvestmentCard';
 
import '../css/style.css';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');
/codes/package/tailwind-css/invest-app/js/main.js
import { investments } from './data';
import { InvestmentCard } from './components/InvestmentCard';
 
import '../css/style.css';
 
const investmentsGrid = document.querySelector('.investments');
 
investmentsGrid.innerHTML = investments
  .map((investment) => InvestmentCard(investment))
  .join('');
/codes/package/tailwind-css/invest-app/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Invest App</title>
  </head>
  <body class="bg-gray-100">
    <div class="container mx-auto lg:max-w-screen-lg">
      <h1 class="text-center text-2xl my-12 font-bold">Investimentos</h1>
      <div class="investments grid grid-cols-3 gap-3"></div>
    </div>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>
/codes/package/tailwind-css/invest-app/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Invest App</title>
  </head>
  <body class="bg-gray-100">
    <div class="container mx-auto lg:max-w-screen-lg">
      <h1 class="text-center text-2xl my-12 font-bold">Investimentos</h1>
      <div class="investments grid grid-cols-3 gap-3"></div>
    </div>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>
/codes/package/tailwind-css/invest-app/js/components/InvestmentCard.js
import { formatCurrency, formatDate } from '../lib/utils';
 
export function InvestmentCard(investment) {
  return `
    <div
      id="investment-${investment.id}"
      class="bg-white shadow-md rounded-lg p-4"
    >
      <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-700">
          ${investment.name}
        </h3>
        <p class="text-lg font-semibold text-gray-700">
          ${formatCurrency(investment.value)}
        </p>
      </div>
      <div class="mt-4">
        <p class="text-sm text-gray-500">
          <span class="font-bold">Origem:</span>
          ${investment.origin}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Categoria:</span>
          ${investment.category}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Data:</span>
          ${formatDate(investment.created_at)}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Taxa:</span>
          ${investment.interest}
        </p>
      </div>
    </div>
  `;
}
/codes/package/tailwind-css/invest-app/js/components/InvestmentCard.js
import { formatCurrency, formatDate } from '../lib/utils';
 
export function InvestmentCard(investment) {
  return `
    <div
      id="investment-${investment.id}"
      class="bg-white shadow-md rounded-lg p-4"
    >
      <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-700">
          ${investment.name}
        </h3>
        <p class="text-lg font-semibold text-gray-700">
          ${formatCurrency(investment.value)}
        </p>
      </div>
      <div class="mt-4">
        <p class="text-sm text-gray-500">
          <span class="font-bold">Origem:</span>
          ${investment.origin}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Categoria:</span>
          ${investment.category}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Data:</span>
          ${formatDate(investment.created_at)}
        </p>
        <p class="text-sm text-gray-500">
          <span class="font-bold">Taxa:</span>
          ${investment.interest}
        </p>
      </div>
    </div>
  `;
}
 
$ npm run dev
$ npm run dev

Editar esta página