Skip to content

A basic Typescript web app project template that uses Vite.

License

Notifications You must be signed in to change notification settings

devshareacademy/typescript-web-app-template

Repository files navigation

TypeScript Web App Template

A basic Typescript web app project template that uses Vite.

License

Requirements

Node.js and Yarn are required to install dependencies and run scripts via yarn.

Vite is required to bundle and serve the web application. This is included as part of the projects dev dependencies.

Available Commands

Command Description
yarn install --frozen-lockfile Install project dependencies
yarn start Build project and open web server running project
yarn build Builds code bundle for production
yarn lint Uses ESLint to lint code
yarn version Updates the project version and the changelog file

Writing Code

After cloning the repo, run yarn install --frozen-lockfile from your project directory. Then, you can start the local development server by running yarn start.

After starting the development server with yarn start, you can edit any files in the src folder and parcel will automatically recompile and reload your server (available at http://localhost:8080 by default).

Deploying Code

After you run the yarn build command, your code will be built into a single bundle located at dist/* along with any other assets you project depended.

If you put the contents of the dist folder in a publicly-accessible location (say something like http://myserver.com), you should be able to open http://myserver.com/index.html and play your game.

Customizing Template

ESLint

This template uses typescript-eslint for linting, and it has been setup to extend the airbnb style guide. To modify these settings, you will need to update the ./config/.eslintrc file with your plugins, rules, etc.

Static Assets

Any static assets like images or audio files should be placed in the public folder. It'll then be served at http://localhost:8080/path-to-file-your-file/file-name.file-type.

Changelog

This project uses auto-changelog for maintaining the changelog. You can view the Changelog here: Changelog.