forUse Netlify’s guide for your FullStack applications.

Working with Netlify is a unique experience for any developer. It requires almost no instruction. With just a few clicks, you can connect to your GitHub, GitLab, or BitBucket repository and configure CI/CD and hosting all at once.

It also offers a generous free layer that can accommodate the needs of low-traffic sites.

Netlify is unique

Netlify is dedicated to hosting front-end static content.

Some people might wonder, how do we connect to the back end when using Netlify? Netlify also supports a serverless back end.

You can host both the front end and back end in Netlify and use its proxy capabilities to route traffic accordingly.

So, let’s look at how we can use Netlify to host a full-stack application.

Begin to use

First, you need the following to try it.

  • A simple front-end application ready to be published in a Git repository. You can use this GitHub repository if you want.
  • A Netlify account.

Once you have the front end ready in your Git repository, you can go to your Netlify account and start deploying.

Note: If you use Monrepo on both the back end and the front end, use the build path to configure CI/CD accordingly.

Step 1: Add a new site from Git

After logging into your Netlify account, click the “New Site from Git “button.

Select the repository

You can then authorize access to a GitHub, Bitbucket, or GitLab account and select your front-end app repository from the list.

Choosing a Git vendor

Once you’ve built a bridge between your warehouse and Netlify, we’re pretty much done with the initial setup.

Select branch

You can then choose which branch you want to deploy. Typically, the primary branch is chosen.

Select branch

Step 2: Configure the front-end deployment.

Before deploying the front end of your application, you need to configure the build commands. For example, if your project is based on JavaScript, the build command would be something like NPM run build.

Give build commands

You can then deploy by clicking the Deploy Site button. Furthermore, you will be able to find the URL of the deployed application in the Overview TAB.

** Note: ** You can change this URL or configure a custom field you want by navigating to the site Settings.

Step 3: Deploy the API

I’ve created a simple NodeJS API for this demo. So let’s look at how to deploy it using Netlify.

If you take a look at the background project in the GitHub repository, you’ll notice a file called _netlipi.toml_. _

The netlify.toml file is a configuration file that specifies how Netlify builds and deploys your web site.

In addition, I used the Serverless-HTTP library and Netlify-CLI to create this application, which you can run using the netlify dev command.

// Installing serverless http library
Copy the code
// Installing netlify cli
Copy the code

I then followed the same procedure as the front end to deploy the back end on Netlify.

Pay attention to. Keep build commands and publish directories empty when deploying the API

Keep build commands and publish directories empty

Step 4: Proxy configuration

Now you can go to the URL provided by Netlify and see your application in action.

However, if you look closely, you can see that the application’s back-end URL still points to the directory within the project folder.

We can use Netlify’s proxy redirection feature to solve this problem.

To do this, you need to modify the following lines in the netli-fi. Toml file.

[[redirects]] 
Copy the code

This setting redirects all API requests to the specified URL.

Note: You can also add a proxy configuration in the front end project to forward traffic to the API (/ API /* -> API_URL/*) so that the entire application can run at the same source.

Step 5: ConfigurationThe environment variable

As a final step, I recommend configuring all of the application’s environment variables with Netlify to improve security.

You can edit the site Settings environment variables by going to Site Settings > Build and Deploy > Environment > Environment Variables.

Site-set variables have higher priority than team-level variables.

Editing environment variables

You can find team-level environment variables by navigating to Team Settings > Site > Global Site Settings > Shared Environment Variables.

Team level environment variables

Here it is. I hope you’ve gained a good understanding of hosting full-stack applications with Netlify in this article.

Thanks for reading! !

Build and share Javascript components with bits

Bit Netlify is an extensible tool that allows you to create truly modular applications, with independent components written, versioning and maintained.

Use it to build modular applications and design systems, write and deliver miniature front ends, or simply share components between applications.

A separate source control and shared “card” component (on the right -> its dependency diagram, automatically generated by Bit

Bit: Platform for modular networks