Cannot get /url in React App with Webpack

[sonalprabhu]

`

    <BrowserRouter>
    <Header />
        <Switch>
        <Route exact path="/" component={Home} />
          <Route exact path="/products" component={Products} />
          <Route exact path="/contact" component={Contact} />
          <Route path="/services" component={Services} />
          <Route component={Nomatch} />
        </Switch>
    </BrowserRouter>

` I have created a NavBar with the components Products, Contact, Services I am able to access the Products page when clicked on the Navbar but when I explicitly type localhost:3000/products , I get the error message Cannot get/products Please help me resolve this issue

[joejoe909]

Hello, did you create a route in one of your backend route files? This would be something you specify in /server/routes. You could create a new file or add one in a file that is already present (if you're building off an example). You would need to add this in order to make it work from a URL.

[sonalprabhu]

No, I will look into that. I am new to web development. Is this error just because I didn't configure the backend files ? Because I saw online about problems with the webpack and public path nd stuff.

[sonalprabhu]

On a related note, in which path are my .js files stored after bundling if my output folder mentioned in webpack is /dist and my component files are in client/component/ ?

[joejoe909]

If you're building in manner in which this book entails, and you want to utilize a URL to access pages there are several things you will need to do.

To get your URL working so you can test it in postman you need to setup a route in the /server/routes you can use files that are there for instance user.routes.js or auth.routes.js you can also create a new file to house all your new routes for each file as long as they are located in the server/routes folder. This is possible because you have an entry in your express.js file for instance

import userRoutes from './routes/user.routes'
import authRoutes from './routes/auth.routes'

and later on:

app.use('/', userRoutes)
app.use('/', authRoutes)

So if you create your own file for housing the backend routes you will add your file to the express.js file.

On the front end, if the routes are only be accessible once you're signed in - you will want to declare the route as private. ``

[sonalprabhu]

On a related note, in which path are my .js files stored after bundling if my output folder mentioned in webpack is /dist and my component files are in client/component/ ?

@joejoe909 What abt this?

[joejoe909]

To be honest I'm not that far a long in the book but I was just going over webpack from a diffrent packt book on javascript so i would guess it would be /dist/server/routes. If you're bundling thought it might condense the code to a single file for instance to express.js

[sonalprabhu]

Okay Thank you so much for your help

[joejoe909]

So looking over the code again and I apologize for this... I've had my head in a different book... It will bundle everything into bundle.js. Sorry I'm jumping through a lot of books. I have that wonderous packt subscription. In later chapters this may change.

[joejoe909]

How far along are you into Full-Stack-React project book?

[sonalprabhu]

I am also jumping between books. I had finished the setup chapter in the books and thought I would try few basic things.

[sonalprabhu]

So looking over the code again and I apologize for this I've had my head in a different book. It will bundle everything into bundle.js. Sorry I'm jumping through a lot of books. I have that wonderous packt subscription. In later chapters this may change, however.

No worries My query was like: I put a video on one of the pages and after bundling, it's in dist/videos/name.mp4 folder Similarly, I wanted to know which folders my component files were in ( frontend )