Bootstrap for small typescript html5 projects that don't need a gargantuan amount of frameworks.
If you want to setup as simple as the following using typescript and webpack.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>TypeScript Webpack Empty Template</title>
</head>
<body>
<h1 id="most-important-content"></h1>
<script src="webpack.min.js"></script>
</body>
</html>This is mainly for myself but it may bring some usefulness to others that want to avoid the whole headache of setting up a typescript project with webpack, formatting, and linting tools. (Basically the full simplified CI/CD setup.)
- typescript (of course)
- webpack
- express
- prettier
- eslint
- jest
- dead simple travis config
- example
sharedModule.tswith its corresponding.test.tsfile - live coding setup
- Frontend frameworks (depends on if you consider webpack to be a frontend framework)
copy-files- copies all frontend assets from src/public/ to lib/public/
format- runs
prettier(a tool used to format your code)
- runs
lint- runs
eslint
- runs
jesttest- runs
jest. Be sure to include at least one.test.tsto prevent it from failing
- runs
build- deletes everything in
lib/*and runstsc,webpack-cliandnpm run copy-files
- deletes everything in
build-prod- same thing as
buildbut with production settings. Runstestbefore building
- same thing as
test- a combination of
prettier --check,build,jesttest, andlintcommands
- a combination of
dev-server- starts a live
webpack-cli,tsc,nodemon, andcopy-and-watchsession usingconcurrently. Any changes you make to.tsfiles will update and restart the server. Making file changes insrc/public/*will simply copy that file over. (NOTE: for unknown reasons, if you create/delete a ts file, tsc will sometimes scream at a non-existent error. Just rerundev-serverif that happens) - More on how this works:
webpack-cligenerates and copies the build file tolib/publicevery time you make changes that affect the frontend.tscwill rebuild any ts files and make changes tolib/, which will causenodemonto restart the servercopy-and-watchwill watch for changes tosrc/public/*and copy them over tolib/public/as needed. This will also triggernodemonto restart the server.
- starts a live
src/public/is your public root foldersrc/server.tsis the node server filesrc/client.tsis the entry point for webpack
Hope you find this to be a great time saver. Please open an issue if there's anything that is missing and essential to development.