Deploying MERN Fullstack Application on the Web for Free with Netlify and Heroku

Heroku dashboard
Creating new app with Heroku
Creating new app with Heroku
Heroku deployment configs
Selecting repo to deploy using Heroku
Deploying main branch
Successful deployment of main branch
Netlify Overview Page
Connecting to Git Provider from Netlify
Granting access to Netlify to Access simple-react-app repo
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<button onClick={callApi}>Call API</button>
</header>
</div>
);
}

function callApi() {
fetch('https://simple-node-server-niru.herokuapp.com/', { method: 'GET' })
.then(data => data.json())
.then(json => alert(JSON.stringify(json)))
}

export default App;
Selecting repo for deployment in Netlify
Deploy configs on Netlify
After successful deploy in Netlify
Simple react app deployed using Netlify

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store