DEV Community

Cover image for How to deploy a react application present in a repository to Netlify ?
Karthikeyan
Karthikeyan

Posted on • Originally published at imkarthikeyans.hashnode.dev

2 1

How to deploy a react application present in a repository to Netlify ?

In this blog post , I will be sharing a problem I faced when trying to deploy a react app which is inside a repository to netlify.

Problem faced:

So I have this repository skarthikeyan96/local-hack-day-learn where I will be placing bunch of projects.

I wanted to deploy my first app inside local-hack-day-learn which is a todo list https://github.com/skarthikeyan96/local-hack-day-learn/tree/main/todo-list( ongoing ) to netlify.

How do you do it ?

https://media.giphy.com/media/J27RmnHMy8LC1QwcQY/giphy.gif

Solution:

Updating the build and publish folder in netlify either through their web application or via netlify.toml file.

We will see both ways.

Fix 1 : Updating the configuration from web application

Go to
Build Settings section for the application which you have already deployed or when you are deploying the application , you can update the build and publish sections under the build settings.

image.png

Since the todo-list application is bootstrapped with create-react-app

Set the base directory to todo-list/ and publish directory to todo-list/build as recommended in the netlify docshttps://docs.netlify.com/configure-builds/file-based-configuration/%20

image.png

Fix 2 : creating and updating netlify.toml file

The netlify. toml file is a configuration file that specifies how Netlify builds and deploys your site — including redirects, branch and context-specific settings, and more.

create your own netlify.toml in the root folder and update the following


# Settings in the [build] context are global and are applied to all contexts
# unless otherwise overridden by more specific contexts.
[build]
  # Directory to change to before starting a build.
  # This is where we will look for package.json/.nvmrc/etc.
  # If not set, defaults to the root directory.
  base = "todo-list/"

  # Directory that contains the deploy-ready HTML files and assets generated by
  # the build. This is relative to the base directory if one has been set, or the
  # root directory if a base has not been set. This sample publishes the
  # directory located at the absolute path "root/project/build-output"
  publish = "todo-list/build"


Enter fullscreen mode Exit fullscreen mode

That's it. These are the two ways, out of which I have used the first way to solve the problem.

Conclusion.

Thank you for taking the time to read the blog post. Hope you find this blog helpful and title is relevant.

If you found the post useful , add ❤️ to it and let me know if I have missed something in the comments section. Feedback on the blog are most welcome.

Let's connect on twitter : (https://twitter.com/karthik_coder)

https://media.giphy.com/media/A5OPIlNp8fHQbATsvC/giphy.gif

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up