Build a E-Commerce Site using MERN stack: Step 3D-Setup Package.json

Let’s fix our package.json and finally startup our server.

If you haven’t done any previous steps, I would recommend you do in which we would setup our backend.

Now let finally finish our backend. Let setup our proxy, main, and our options for hosting for our package.json. After our scripts property, enable our main file which will be our server folder, and does not need to specified since it is a index.js file.

Next specify our proxy, which enable us to connect to the backend. It is gonna be http://localhost and the port it is running on. Since we are gonna use auth0, we will have our proxy equal object that with root path object. With one connecting to auth0, and one connecting to your server using a your server url. Which means the backend endpoint has to start with root path, in order to access proxy. If not will return cors errors, or will not even access backend.

First lets specify our proxy that will be a nested object.

Next specify our root paths within the proxy object.

Now let specify the target of each the root path, which will be the same (“http://localhost:5000”).

We will go through auth0 in the future, but for now let’s run yarn start which run react, and run your server to run node. In one terminal type yarn start, and another terminal type node index.js or nodemon(if nodemon is installed).

And in another terminal

It should result.

And to know if node is running, it should output this message.

If it doesn’t look over the previous step where we setup our server.

Note: Check how we connected our database.

The final step is setting up our zeit hosting, just in our package.json. We will go in depth later in the tutorial.

First create a .env.prod file, and copy everything in your .env file and paste it to .env.prod file. NOTE: DO NOT FORGET TO specify it in .gitignore.

We will setup our scripts in our scrips object.

The now-start indicates where the server will run.

And deploy will indicate that it will run the .env.prod file.

Then right below your proxy object, specify your now object which will be used to specify your alias or the name of the subdomain of your site. You would have to call it differently than what I name it.

Well that’s it for our backend at the moment. Finally it is over now we will get started on the fun part, which will be react.

Here is a code as a reference.

Next we will setup our postman testing.

Happy Coding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store