Skip to content

paolominel/vanilla-typescript-project-boilerplate

 
 

Repository files navigation

Vanilla-Typescript Template

This is template used to make plain html and css projects with Typescript

GitHub tag License

Made with Node.js

How it works

This template uses webpack to compile all typescript code in the src directory into a single javascript bundle. This enable the use of modules in the typescript code. All imports used in the index.ts code would get bundled into a single javascript file (in this case script.js) solving the problem of with tsc --watch command which will compile each imported module seperately to their javascript equivalent.

How to use template to create your own projects

Click on the "use template" button
use template

Input your the name of your Project and click "create project from repository" button
create new project from template

You should see that your new project's repository has been created
new-project-created

copy the link to clone the repo to your local machine (note the link will be different depending on your repository account and your project name)
copy-repo-link

after cloning your repo to your local machine with the git clone command

Installing the dependencies

In the projects root directory

npm install

This will install all the dependencies in the package.json

Then:

Go into the src directory and run the start script

cd ./src

npm start

This will run the start script in the package.json (this runs webpack --watch which will automatically recompile index.ts in the src directory on every change)

In the public folder/directory

open index.html (if you are using visual studio code as your text editor use liveserver extension)

If all the steps are done correctly the counter-example show be rendered in your browser when you open index.html in your browser with liveserver
counter-example

check out the github repo

Packages

No packages published

Languages

  • TypeScript 35.4%
  • CSS 33.8%
  • HTML 30.8%