Step 1. Making project root directory
mkdir simple-deploy-app-typescript-to-heroku
Step 2. Initialize your directory as a node project
cd simple-deploy-app-typescript-to-heroku
npm init -y // automatic create new file package.json
Step 3. Install required dependency using NPM
npm i @types/express @types/node express nodemon ts-node typescript
- Express is used for making REST API easier.
- Nodemon keeps the server running and swapping the latest code so we don't need to restart the server every time our update new code.
- ts-node directly runs .ts node file.
- typescript for type-script support to javascript.
Step 4. Configuring Typescript
tsc --init // automatic for create new file tsconfig.json
Then add new line below compilerOptions
object.
"include" : [
"src/**/*.ts" /* Include every ts file in source folder */
],
"exclude" : [
"node_modules" /* exclude everything in node_modules */
]
Step 5. Setting up server
Edit file package.json
"compilerOptions" : {
//**/
},
"scripts": {
"start": "ts-node src/config/server.ts",
"dev": "nodemon -x ts-node src/config/server.ts"
},
Server script would live in src/config/server.ts
Create a new simple server with express now.
src/config/server.ts
import express from 'express';
const app = express()
const PORT : string|number = process.env.PORT || 5000;
app.use("*",(req, res) =>{
res.send("<h1>Welcome to your simple server! Awesome right</h1>");
});
app.listen(PORT,() => console.log(`hosting @${PORT}`));
Testing for server is running as well, we run cmd npm run dev
.
Step 6. Deploying to Heroku
Substep 1: Installing Heroku CLI
Substep 2: Logging in into Heroku
heroku login
Then we are going to a new windows browser for login to Heroku application.
Substep 3: Creating a heroku application in heroku
Substep 4: Creating a file Procfile for Heroku
Add a new line to file
web:ts-node/src/config/server.ts
Substep 5: Initializing our project into a git repo of Heroku
git init .
git add .
git commit -m "Initializing project"
Finally of substeps: Pushing code to Heroku
git push heroku master
I hope it helps a little bit for you.
Thanks for reading my post.
Have a nice day!
Top comments (5)
How would you compile and deploy the front end containing typescript? In my client json package, I run tsc && react-script build but that doesnt seem to work to generate. I encounter some error in the heroku-postbuild.
I will find out this case in later
Thanks a lot!
thanks buddy!!!
Really simple and straightforward tutorial!