Skip to content

lucianesantcs/vitets-sass

Repository files navigation

Vite + TS + Sass Boilerplate

This is a boilerplate to create simple HTML CSS/SCSS TS pages.

Before using:

  • If it's just a plain HTML CSS TS page, delete everything on main.ts file and use only the index.html file to structure your code.
    • Start coding replacing div app with your HTML.
    • You will have to import your style.scss and any other .ts file in the HTML
  • If it's a more structured project that will use a lot of typescript, keep the structure as it is.

Pre-settings:

Run the project:

  • Use Node.js v18 or higher
  • Run the command npm install to install the dependencies.
  • Run the command npm run dev to install open the project.
    • Check the terminal to see the URL of the project. Eg: Local:http://localhost:5173/

Build & Deploy the project to Github Pages:

Run the commands:
  • Run npm run build to build the project to the .dist folder
  • Run npm run deploy to deploy the code the the github pages to the gh-pages branch
  • If you prefer to run both, use npm run build-deploy instead and it'll build then deploy
Configure the repository:
  • Go to Settings -> Click on Pages. On the Build and deployment section, make sure Source is Deploy from a branch. Then, Branch should be "gh-pages" to the folder "/root"
  • Check the live site on the url: https://{username}.github.io/{repo-name}/.
    Eg: https://lucianesantcs.github.io/vitets-sass/