The video does not load from the git during the deployment

Hi, I have constant problems with the fact that the video does not load when it is deployed.

I have a project connected to the depository and videos do not get into it, and they are not shown on the site either. But if you upload manually, then all the videos are displayed and uploaded - how does it work and how do I configure the videos to be uploaded?

Example 1 - uploaded manually Dropbox - img-2024-03-01-16-03-02.png - Simplify your life. from the video - HomePage

Example 2 - auto-warm from the gita - Dropbox - img-2024-03-01-16-04-28.png - Simplify your life. without a view HomePage

@krewe58 Did you link those screenshots incorrectly?
The description, (and links to the site), indicate that videos are only uploaded when you do so manually, but the screenshot of the deploy file browser appears to show the opposite?

Do you have a public link to the repository?

Good afternoon, yes I mixed up the screenshots

If I upload it with my hands, then like this (there is a video) Dropbox - img-2024-03-01-16-04-28.png - Simplify your life

If it is pulled up from the git, then like this Dropbox - img-2024-03-01-16-03-02.png - Simplify your life

there is no public repository, but I can create another one, since the situation is always the same on all projects - do I need to do this?

Can’t say much without seeing your repo, but basically the videos are throwing a 404. Most likely because they don’t exist in your dist folder:

@krewe58 What @hrishikesh has said (that the video files aren’t ending up in your Publish Directory) was my wild guess too.

Being able to check a repo is just the fastest way for someone else to confirm that.

You can check yourself by running your npm run build command locally and checking what’s in the dist folder that is produced. If there’s no video files, then that’s your problem.

You’ve not mentioned what you’re working with, but the fix is to place the files wherever ensures that they end up in the dist folder after the build completes.

Often you want to place the files in public as with Vite, React

Hi, there are these videos in the dist folder, that’s the point - they don’t come to netify

@krewe58 They may be in the dist folder, but are they still there after you run npm run build?

Most systems delete and recreate their dist folder each time the build is run.

If you have manually added files to the dist folder directly, there is a good chance they’re getting deleted by your build.

You would fix it by NOT manually putting them in the dist folder, but into whatever folder the system you’re working with wants static assets to be placed into, as previously mentioned this is usually something like public.

@ nathanmartin
Hello, maybe I didn’t express myself correctly or you didn’t understand me

The gist is this:

After assembly, all videos are in dist - everything is correct here. These videos are in the dist folder.
Then it’s all pulled up on netify, and here everything except the video is pulled up.

But I tried to take the same dist folder and upload it as a separate project in the deploy manual and all the videos are shown in this case - since they got to the host and I see them in the files.

That is, I am absolutely sure that the problem is in the delivery of videos from github > netify, because I looked - initially there are 134 files in the dist folder, and when it is pulled up to netify, there are only 130 files in it, with exactly 4 videos missing.

I checked thinking that the problem might be in git ignore, but everything is clean there.

I want to explain that I don’t add videos anywhere manually, they are in src and are built in dist themselves - they are not pulled from dist to netify

@krewe58 Got it, sorry for the over explanation then!
It just sounded like the other issue, which is extremely common.

So just confirming:

  • there are no dist files in your repository (they’re all created as part of your build)
  • your videos are in your src and built into the dist when npm run build executes
  • when npm run build runs locally, the dist folder produced is correct (all videos)
  • when npm run build runs on Netlify, the dist folder is incorrect (missing the videos)
    ?

You suspect the video files in your src, (which are in src in the repository), are not ending up on Netlify when the build executes?

You could test that theory by changing your build command to something that doesn’t run your build, but just checks if the video file/s exist.

Yes, I fully agree with what you wrote. I recorded a short video (sorry for my English), I hope it won’t cause more confusion - in it I just wanted to show that I specially added a video in git just manually to the repository in the last commit and it’s clear that this commit was sent to netify but the video is like this and didn’t appear. In another case, I uploaded the entire dist folder to netify in manual mode and the video is there and is shown perfectly on the site via another link - that is, the project works correctly.

Hi, @krewe58. Part of the reason we are not able to better assist here is that no one but you can see some of the key details needed to troubleshoot. Specifically, we cannot see the private repository being used for this site.

We would need to examine the repo to debug this. We cannot see the repo so we cannot debug it directly. We can only give you suggestions to debug it because only you can see the repo.

Would you consider making the repo public or making a minimal reproduction of this issue in a new repo which is public?

1 Like

Good afternoon, it seems I solved the problem - I found a dependency that the base directory was not specified in my project - now I installed dist and everything seemed to work, in another project too. Dropbox - img-2024-03-07-10-51-58.png - Simplify your life
I’ll keep watching this

@krewe58 It’s not common to set your base directory as dist.

But if that works for how your project is set up, then great!

Checking your video above again, I can see you had files deployed inside a dist folder:

image

Usually the configuration would be more like this:

Which translates as:

  • Start at / and install the dependencies there
  • Run npm run build in that location
  • Publish only the files that are in dist

Good afternoon, I still don’t understand why this works, since the collector does not work with dist, it works with src. But it works.

I didn’t find any other dependencies, because otherwise the videos simply don’t get to netify

@krewe58 If you’re asking why having your Base directory set to dist works, without being able to see your repository I would say it’s because:

  1. Your repository contains a dist folder that already has the build output
  2. The Base directory of dist tells Netlify to do a cd dist
  3. There is no Build command so Netlify doesn’t run any build
  4. There is no Publish directory so Netlify deploys the files where it is (which is dist)

So your already built files in dist are deployed “as is”, and they’re deployed as the root of the site, since you deployed from within dist.

Hi, @krewe58. I’m concerned that the setup you describe is incorrect and that, while it works today, it is only going to cause more problems in the future.

This is what I think is happening below. I emphasized “think” because this is only a guess below. I cannot say for certain without more information (like the name of the framework you are using or access to your repo).

So. again, this is only a best guess below but what I think is happening is this:

  • normal the dist directory would always be empty and no files would ever be committed to the repo in that directory
  • however, I suspect you generating file in that directory locally with your local build command and then committing those files to the repo
  • that (committing the files in dist to the repo) is not at all a recommended practice and not how the framework is intended to be used
  • this means making dist the base directory fixed the missing video issue but it normally would not if the framework was being used as intended

Again, I’m only guessing about this above. However, that means that then entire Git-back build and deploy workflow at Netlify is being done in a way never intended by either the framework developers or Netlify.

My concern is that using the workflow being used will then result in other unexpected behavior in the future (things like code changes you make not showing up).

You don’t necessarily need to make your repo public but if you do tell us what framework is used for this site we can likely confirm if my hypothesis above is correct or not.

Good afternoon, thank you very much for the detailed feedback - the fact is that I am frontend, I post exactly the layout on the platform, so dist is the most relevant and final state

@krewe58 I see a video on your homepage, so it is loading. It isn’t playing though because autoplay isn’t set and there are no player controls to start the video manually.

Good afternoon, it’s working now because I changed the settings

1 Like

That’s awesome. Glad you got the settings updated.