How to deploy a folder inside a repository in GitHub

Support
1

Hi everybody. I’have deployed my app ( https://sparkling-daffodil-439c8a.netlify.app) but there is nothing. I want to deploy a folder inside a repository in GitHub, not the whole repository. What can I do? Thaks in avdance. Regards.

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

2

Hey there, @Amapola-Negra :wave:

Thanks so much for reaching out. Can you elaborate a bit more about your use case? What folder do you wish to deploy? Can you share your repo with us?

3

hi Hillary. Thank you very much for your reply. Yes. my repository is GitHub - Amapola-Negra/freeCodeCamp-Projects-Repo

I’m trying to deploy an app wich is inside the folder “Random-Quote-Machine”. It is a React app, so I think I have to reach the folder “public” inside the other folder. Thanks in advance.

Regards

4

Try going here: Netlify App and change the build settings to:

  1. Base path: Random-Quote-Machine
  2. Build command: CI= npm run build
  3. Publish directory: build.

Inside the public folder, also add a file named _redirects with the value:

/* /index.html 200
5

Hi. Thanks for all your time, but it doesn’t work.

Regards

7

What do you mean by it doesn’t work? Do you get an error?

8

Hi. Well. I doesn’t get an error. I get nothing, just a white screen. My app in not there. Thanks in advance.

9

That’s because your HTML file is not referencing any JavaScript assets:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,300;1,600&display=swap" rel="stylesheet"> 
                <link rel="stylesheet" href="style.css">

        <title>Random Quotes Machine</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

That’s the entire HTML that you’ve built for your site. Since there is no JavaScript file being loaded, React never loads and parses the DOM.

Try building locally (npm run build NOT npm run start) and see what you’re getting in your build/index.html file.

10

Hi again. Sorry for the delay. I have a bundle. I have change the settings of the deployment. The “index.htm” in the “dist” folder targets the “bundle.js” which I suppose is the compiled project. But it doesn’t work either. What can I do?

Captura
Captura892×299 13.9 KB

Thanks in advance.

Regards :slight_smile:

11

Is there a new site? On the previous site, I don’t see any new deploys after August 9.

12

Hi. Well I changed the settings but I don’t know how to redeploy it again. Thanks in advance.

13

You can trigger a deploy either by committing to your repo, or by using the “trigger deploy” button at the top of the deploys listing page:

image
image1193×614 60.4 KB

14

Hi. I did but the app is not deployed. The message says "The directory doesn’t exist. My app is in a folder inside a repository in GitHub, the url is “Amapola-Negra/REACT-PROJECTS-REPO/random-quotes-machine/dis/index.html” The “index.html” file is the one that is linked to the “bundle.js”. I have the capture of my build settings. I appreciate any help. Regards

Captura
Captura878×286 15.4 KB

15

Hey @Amapola-Negra

The base directory value is incorrect. The value is the name of the directory inside the repository you are deploying from, i.e. Random-Quote-Machine and the publish directory value should show Random-Quote-Machine/dist. You are including your GitHub username (Amapola-Negra) and repository name (which is now called freeCodeCamp-Projects-Repo) which is not correct.

This is the settings you need

Screen Shot 2022-09-07 at 7.49.17 am
Screen Shot 2022-09-07 at 7.49.17 am1824×1420 213 KB

16

Thank you for all the trouble I’m causing. I changed it as recommended and it doesn’t work either, but the problems are other. I have a capture of what the log says.

problem deploy
problem deploy927×796 36.9 KB

What can I do?

17

Hey @Amapola-Negra

For future reference, images of deploy logs do make it much harder to assist in debugging. Either pasting the log into a code block, or linking is preferred :slight_smile:

Based on the screenshot, you are using something that is experimental and not currently enabled in webpack.

ReactDOM.render(<About />, document.getElementById("app"));

This is not a Netlify issue, it is your project, as I received the message when attempting to build the project locally. To fix it, as the log shows,

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.

To do this, create a babel.config.json file in Random-Quote-Machine directory, run npm i @babel/preset-react and then npm run build (always a good idea to do this locally to check everything is working before deploy IMHO.)

18

Apologies @Amapola-Negra

In the babel.config.json you need to add

{
  "presets": [
    "@babel/preset-react"
  ]
}
19

Don’t worry!! I have changed the whole app. Now I’m working with Vite, and it works. So I’m very happy. Thank you very much. All the best :slight_smile:

2 Likes
20

So glad to hear everything is working now. Thanks for all of your assistance here, @coelmay!