Hosting your full stack projects for free

If you write personal programming projects, you probably need a place to deploy them, preferably for free.

There are many free hosting platforms if you have a frontend-only application / static website, but not so many if you also have a backend / API.

AWS has a free tier, but also a big learning curve.

What if you could...

• write your API in a common backend framework, such as Express.js or Flask, and drop it on a hosting platform with one button push?
• write your frontend app with any of numerous Javascript frameworks, and drop it on the same hosting platform?

... for completely free?

Vercel - a platform to deploy frontend AND backend.

Vercel lets us deploy not just the frontend, but the backend too.

You can also connect to a database from the Vercel backend.

It's a serverless platform, but you don't have to know how to write lambda functions.

You can deploy an ordinary Express.js or Flask app on it.

(If you want to write serverless functions, you can do that too.)

I'm not affiliated with Vercel and it does not pay me, I just really like it.

A walkthrough of creating an Express.js / React.js app and deploying on Vercel

The sample application is a simple app with one route.

You can check out this Github repository and create your own repository off of it.

https://github.com/elze/vercel-express-react-demo

Getting started with the barebones application

From the following Github repository

https://github.com/elze/vercel-express-react-demo

let's check out the v1 tag:

• Click the link "tag" in the Github repository

Getting started with the barebones application, cont.

• In the v1 tag page, download the .zip or the tar.gzversion
• Unzip it on your computer.

You will create a new repository using this as a basis.

• Rename the directory into which you unzipped - this will be the name of your repository, e.g.
  <your-Github-id>-vercel-express-react-demo
• From the command line, cd into this directory.
• git init - this will create a new git repository named after the directory.

Running the app locally: the server

• cd into the api subdirectory.
• Run npm install
• Run node index.js

This should start the Express.js server. You can visit it at

http://localhost:8081/api/skills

The port number may be different - the command line output will tell you what port it is running on.

The data that comes through does not make much sense, it's only used for the demo purposes.

Running the app locally: the frontend

• cd into the top-level directory in the app (in a different terminal)
• Run npm install
• Run npm start

This should start the React.js server. You can visit it at

http://localhost:3000

The data that comes through does not make much sense, it's only used for the demo purposes.

It should look like what you see in this page:
https://vercel-express-react-demo.vercel.app/

Connect Vercel to Github

Push your repository to Github.

Now you can connect it to Vercel.

• Go to Vercel site and sign up with your Github account (give Vercel permissions to access your Github account)
• In Vercel dashboard Overview tab, click "New Project" and follow the steps.

Connect Vercel to Github (cont.)

Search for and select a Github repository you want to deploy on Vercel.

Leave the defaults in place and click "Deploy" (open the screenshot in a separate tab to see the "Deploy" button)

Connect Vercel to Github (cont.)

After the deployment succeeds, Vercel will give you the URL at which you can access your app.

E.g. https://vercel-express-react-demo.vercel.app/

If the deployment fails, there will be a link to the logs where you can see why it failed.

The best thing (can also be a bad thing) -

Whenever you push to Github, your application will be automatically redeployed!

Deploying to Vercel WITHOUT Github

You can also deploy to Vercel without going through Github.

Once you have signed up for Vercel, you can deploy a project there without even having a Github repository for it.

If your repository is connected to Vercel, you can still deploy it without pushing to Github first.

For that, you need to install Vercel command line tool from npm.

Then, in the project top-level directory (the one that has package.json, etc.), type vercel.

Vercel will ask you some questions (you'll probably want to choose the default answers) and deploy your code.

References

https://vercel.com/guides/using-express-with-vercel -- Vercel's own guide to running Express.js apps on it.

Questions? Feel free to email me: elze.hamilton@gmail.com