Assistance with downloading a file on my localhost application

Question

I have a reactjs web app. On one of the pages, I want a user to click on a download button and then be able to download a pdf file that I have in my assetsfolder. I seem to be having some problems trying to do this. Here is what I've tried.

For reference, I have tried the solution proposed in this question

The answer states to do this:

<a href="path_to_file" download="proposed_file_name">Download</a>

So for my first attempt I have a button that looks like this:

<a href="../assets/resume.pdf" download="Resume">Download</a>

The error I receive on my browser is Failed- No file. I figured that my path was wrong so I've tried many variations even an absolute path and the result is the same. The file cannot be found.

In the second attempt I found this other stack overflow question

This question's answer declares this answer:

<a href="file:///C:\Programs\sort.mw">Link 1</a>

When I try to implement the second answer with my own directory paths, I receive a Failed - Network error problem. Is there something I'm missing.

A long time ago, I was able to host the file online but it seems like it should be an easy thing to do to have the file in your directory system the way images and stylesheets are. Am I missing something here? Help would be appreciated.

------EDIT-----

The file structure looks like this:

react-site
  -- node_modules
  -- package.json
  -- index.html
  -- resume.pdf
  -- README.md
  -- src
     |
     | -- a bunch of files
     | -- assets
     |     
     | -- modules
          |
           - skill.js * This is where I reference the download

------- EDIT #2 ------

skills.js:

40   class Skills extends Component {
 41   render() {
 42     return (
 43       <div>
 44         <ReactHighcharts config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
 45         <div>
 46           <a href="resume.pdf" download="Resume">Download</a>
 47           <RaisedButton label="Download Resume" primary={true}/>
 48         </div>
 49       </div>
 50     );
 51   }
 52 }
 53
 54 export { Skills };

Answer 1

These simple steps work for me.

import CSVFile from '../assets/sample/CSVFile.csv'

<a href={CSVFile} download="CSVFile.csv"> Download Here </a>

Answer 2

You have to specify the file location relative to your HTML file, i.e.

<a href="src/assets/resume.pdf" download="Resume">Download</a>

Make sure that this folder is publicly available on the web server. You may also want to move it out of the src folder, as this may be misleading.