Hello everyone, today I am going to show you how to use nodemon and how to access server-side files from the client in node project.

I think it’s boring to change the code and restart your node server to see change effects. It also wastes your development time.

To ignore frequently restart your server, you can use nodemon. nodemon is very popular npm package for nodeJS developer.

Install nodemon

To use nodemon you need to install it globally on your machine. Go to npmjs.com and search for nodemon. You will see a command to install it by npm. This is a very popular npm package, you can see so many people download it.

Now back to your code editor, I am using vs code. Here I open the same project that was created from my previous node tutorial. If you do not complete that tutorial you can download the source code from github.com. It is a very simple project. Source code download link(before the start).

Go to the terminal window or you can do that from the command prompt in windows. Then type npm install -g nodemon and press enter.

npm install -g nodemon

Here -g use to install the package as globally. So that, you can use nodemon for any node project that runs on your machine.

After installation succeeds, go to terminal and type nodemon on terminal then press enter. You will see it run node server.js command internally. Once again, here server.js is my server entry point file name. That define in the package.json file.

nodemon

Now check that in the browser your server is running.

Let’s check is it works or not. Change the string node to nodemon or you can change anything, to see change on your own project. Save it by pressing Ctrl + S. See terminal your server is restarted already. Then go to the browser and refresh it. See the string is changed as you return from the server.

You don’t need to stop your server and start it again.

Access Server Files

Let’s learn how to access server files from browser or client. By default, you can’t able to any files on the server, which one does not return from the server.

Go to your code editor and click on the folder icon and create a folder public. It does not matter what the name of your folder. You can give others. Inside this folder create an HTML file.

Now add some code for HTML view. Here I add a title in the head section and a string inside h3 tag in the body.

Now back to your server.js file. And import path to join your html file with the root directory. By default path is install with the express package. So you need not install that separately.

Now change server response type from string content to file by sendFile method.

Back to your browser and refresh it. See your browser view is changed as your html code. See the text MEAN start appears which you define in html body with h3 tag.

Let’s try to access a stylesheet from the index.html file. Create a CSS file inside the public folder.

Add red color for h3 tag.

Now add the CSS file reference to html file at head section.

Then refresh your browser. And go to the console of your browser. For chrome press F12. You will see an error, which indicates that you have no access to this CSS file. Also, your text color does not change to red.

Set Public Resources Folder

To give access to this file, you need to make it static with the help of express. Here I make the public folder static. So that client can access any file inside the public folder.

As you define the public folder as static so you need not add that to the reference.

Then go to browser one more time and refresh it. You will see text color change from black to red. Also, there is no error on console.

Source Code: github.com(after complete)
Youtube Playlist Link: MEAN Stack
Mean Stack Tutorial: Mean Stack(step by step)

Feel free to give your valuable feedback in comment section. Enough for today, see you soon.


Leave a Reply

Your email address will not be published. Required fields are marked *