How to host your full stack app online free (possibly) forever.

Mousam33 — Mon, 13 Mar 2023 03:12:49 +0000

My todo list app hosted for free.

[Note: This article is only for development/project purposes]

Pre-requisites:

You'll be needing your app fully built, this tutorial focuses only on the hosting part.
Ready everything for deployment. In my case, I used a jar file for the back end and the front end is a react app.

Limitations

You'll probably use a database or a file to store your data in the back end, currently the storage limit is capped at 500 Mb.
The back end process will end after approximately 30 minutes of inactivity. However, it is automatically restarted when the endpoint is hit.

A bit about my todo list app

I used springboot for making the app's back end, with a h2 file database. It is hosted in replit. Hosting your back end here provides you with a "https" endpoint.

The front end is made with react and tailwind. It is hosted in netlify.

Hosting the back end

Create an account with replit.
You should see a screen like below after you log in.

Now, go ahead and click on "Create Repl", you should see a pop up as below, here choose the java template (if you want to host a jar file) and assign a Title to your project.

Here's what you should be seeing. A Main.java file, along with other files.

Delete all files by clicking on the 3 dots that appear next to a file while hovering on it, and upload your jar file by clicking on the 3 dots on top-right of the "Files" pane.

After the upload is done, once again click on the same button and select "Show hidden files".
You should see "Config files" section appear, from there select the ".replit" file.

Now, clear everything in the .replit file until "[packager]" and replace "run" with your own command.

Modifying the ".replit" file changes the behaviour of the "Run" button. Upon starting it, in my case, I saw the typical springboot output on the terminal and replit provided me with a custom "https" url shown on the "webview" pane on the top-right corner of the repl section.

And that's it. The API endpoints should now be available.

Hosting the front end

Create a netlify account.
Log in and in the "Sites" section, select the drop down "Add a new site" and choose "Deploy manually".

All you have to do now is drag and drop your "build" folder in case you have used react. Otherwise, a folder that contains your "index.html" file should work fine.
Netlify will provide you with your site URL.

You're done.

Final words
Once again, this is by no means a tutorial for deploying production level apps. This should only be used for small pet projects.

Forem: Mousam33

How to host your full stack app online free (possibly) forever.

My todo list app hosted for free.