After Heroku announced the termination of free plans π, it has become need for developers to find free alternatives to Heroku for deploying apps.
While researching this, I found many options that can cater to our needs, viz. Digital Ocean, AWS, GCP, and many others. But these cloud providers need a dense setup, and the pricing is way too high.
But I have π for youβ¦
You can deploy your Express app on Vercel for FREE. π
Iβll let you know steps by which you can easily deploy Express app on Vercel. (You can start from step 2/3 if you have existing Express JS App)
PS: In this blog, especially Iβm focusing on Node (Express) app. For python or other tech stacks, we can discuss it in another blog. β
1) Basic Express App π
(if you already have one, you can skip this step. Github repo link at bottom of article)
-
Init Node JS app : Go to folder in which you want to create app and run following command
npm init -y
-
Install packages : After app is initiated, install
express
package using yarn/npm
yarn add express / npm install express
-
Boilerplate for Express : Create
index.js
file in root of the folder. And copy the below code snippet
const express = require('express') const app = express() app.get('/', (req, res) => { res.send('Express JS on Vercel') }) app.get('/ping', (req, res) => { res.send('pong π') }) const port = process.env.PORT || 8080 app.listen(port, (err, res) => { if (err) { console.log(err) return res.status(500).send(err.message) } else { console.log('[INFO] Server Running on port:', port) } })
-
Update NPM scripts : Add
start
script inscripts
object
"scripts": { "start": "node index.js" }
- Spin up app : Start your app by running
yarn start
ornpm run start
. Upon starting server, open browser and navigate tolocalhost:8080
. You will getExpress JS on Vercel
as a response from our Express app.
2) Initialize git in our project. π»
- Make a
.gitignore
file in the root of the folder. And addnode_modules
to it. If .gitignore file exists check thatnode_modules
is added into it.
Execute
git init
in the terminal (from root of project) or you can use VS Code's source control tab to initialize git repository.Connect local repo to remote (github/bitbucket). You can use any of the version control system to publish your repository.
3) Create Vercel project πΎ
- Go to vercel.com -> Login
- Login using the Version control platform you have kept your repository.
- From the dashboard -> Add new project -> Select your repository -> Deploy
4) Add Vercel config in app βοΈ
- In the above step, after your fist deploy is completed, you can see that we're not getting
Express JS on Vercel
response from API. - To work this as expected, we need to tell Vercel that this is an API and you need to serve this as a serverless function.
-
For this, simply we need to add
vercel.json
file in root of our project. Paste below code in file
{ "version": 2, "builds": [ { "src": "index.js", "use": "@now/node" } ], "routes": [ { "src": "/(.*)", "dest": "index.js" } ] }
- NOTE: In the
dest
field, please put the filename which is the base entry file of your project. Suppose you haveapp.js
as your base file you need to modify this config accordingly. Then only Vercel will know which file to serve as a base file for API execution.
5) Re-Deploy and Re-Check API π
- After
vercel.json
file is added, push these changes to git repository.
Vercel will automatically trigger a deployment when you push in your branch. If it doesn't trigger automatic deployment, you can start a manual deployment.
Once the new deployment is live, you can now see by refreshing the VERCEL deploy URL and check that now we're getting
Express JS on Vercel
as a API response.To assure that API is working perfectly, you can also hit
/ping
route which will returnpong π
as the response.
Github Repo Link : Express JS on Vercel
How can we forget Typescriptβπ€
Stay tuned for a fresh new article on Deploying Typescript based Express App on Vercel
. Coming soon...
Tirth Patel, signing off! π«‘
Top comments (2)
Thank you , following what you write, i have deployed my express API successfully,very nice ,hug you
When running
vercel dev
locally, I'm getting error:TypeError: listener is not a function
I even corrected @now/node to @vercel/node in
vercel.json