- master - will contain files from all the branches. No specific information will be written on master branch.
- starter - will contain only the starter files, its the boilerplate for this project. Any updates on README.md, .gitignore, and common files will he placed here.
- session_# - each session will have its own branch. These branches will be different algorithm groups, only to be merged by master branch.
- Open Terminal and using "cd" go to directory to place your project i.e. Desktop, or Documents
- Create a new empty folder for the project.
mkdir ProjectName- Enter the folder directory.
cd ProjectName- Make sure you have TypeScript installed globally
npm install -g typescript- Due to some minor bugs and set ups, it's a good idea to install typescript to the local project as well to help reduce future issues.
npm install typescript --save-dev- The tsconfig.json file will be created using the code below, this will help us customize TypeScript with its rules.
tsc --init- In the tsconfig.json file, change the target to “esnext” and module to “es2015” (or whatever config you'd like).
"target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "es2015", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */- We create a package.json file which will tell the project what packages and scripts are needed. We also need this to install webpack and loaders. We use the npm cli
npm init - This is to help us with version control.
git init- Install the webpack, webpack-cli, and the ts loader as developer dependencies.
npm install --save-dev webpack webpack-cli ts-loader- Inside the root directory, create a folder called "src" and inside "src" create a new file called "index.ts" with a sample code i.e.:
console.log("Hello World");- Create a webpack.config.js file in root directory of the project. This file is the configuration for telling webpack how to handle different files of a program.
touch webpack.config.js- In webpack.config.js file, add the following block of code as a template to start which already includes ts-loader:
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.ts",
output: {
filename: "index.js",
path: path.resolve(__dirname, "public")
},
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
include: path.resolve(__dirname, "src"),
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
}- In package.json, create two new scripts called "build" which will only compile the index.ts to index.js under the new folder public and "start" will do the same as build, but also run the newly created index.js with nodeJS.
"scripts": {
"build": "webpack",
"start": "webpack && node ./public",
"test": "echo \"Error: no test specified\" && exit 1"
},- To remove any folders and files that shouldn’t be saved in git for memory performance and privacy reasons.
touch .gitignore- We don't want node_modules (as this is installed within client local computer) and the public (or whatever you name the build folder) in the git as this is dynamically created. Add “node_modules” and "public" into .gitignore file
node_modules
public
- To run the program and see the results in the command line terminal, run this code:
npm run start- Now you can see the program dynamically created the "public" folder which contains the bundled up JavaScript file index.js. This is our compiled TypeScript from index.ts