Day 27 – Working with Static files - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-30 20:16:32

Lets do a fun thing, start a stylesheet on our profile page. like - 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vxvnzvnwu6zor6w82pme.png)

Now let's write a little bit of css

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/24v5vmxo0awcihejzc12.png)

Add the css class in our current `profile.ejs` page

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7la4om14z77cay9gdwia.png)

now check the browser, sadly know change. Do you know the reason ? 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nxuyl2ymiuuj3mw46mvs.png)

Because we can access that static files. Because we didn't make any static files route. Let's add this in `app.js` so that we can get the static files.

We can use a inbuilt express middleware to access that static folder which will created. Just using `app.use('/assets', express.static('assets'))` will give access to the /assets folder. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/geiki40sk0e4ip1d83ne.png)

Now we can go to browser and see out it change

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/06lvt7dndw52ya1m4wp2.png)

In `app.use('/assets', express.static('assets'))` In 1st part is route and 2nd part is folder that we are going to put the files.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0n2h1wb845zqasq5ebn1.png)

###So, can you work with the static files now? 

You can see the graphical version here
{% instagram B6tWx9fF1OH %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day27-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


###__You can read the old posts from this series (below)__

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}

{% post nerdjfpb/day-9-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2dfe %}

{% post nerdjfpb/day-10-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2802 %}

{% post nerdjfpb/day-11-creating-and-deleting-folders-learning-node-js-in-30-days-mini-series-3a2d %}

{% post nerdjfpb/day-12-creating-own-server-learning-node-js-in-30-days-mini-series-3ef %}

{% post nerdjfpb/day-13-buffer-stream-learning-node-js-in-30-days-mini-series-5c5d %}

{% post nerdjfpb/day-14-serving-html-pages-learning-node-js-in-30-days-mini-series-2hl3 %}

{% post nerdjfpb/day-15-sending-json-to-client-learning-node-js-in-30-days-mini-series-21pc %}

{% post nerdjfpb/day-16-routing-basic-learning-node-js-in-30-days-mini-series-5hk6 %}

{% post nerdjfpb/day-17-npm-node-package-manager-learning-node-js-in-30-days-mini-series-1nek %}

{% post nerdjfpb/day-18-why-express-js-learning-node-js-in-30-days-mini-series-b5a %}

{% post nerdjfpb/day-19-nodemon-learning-node-js-in-30-days-mini-series-m39 %}

{% post nerdjfpb/day-20-express-js-introduction-learning-node-js-in-30-days-mini-series-2pg5 %}

{% post nerdjfpb/day-21-http-methods-learning-node-js-in-30-days-mini-series-hci %}

{% post nerdjfpb/day-22-route-parameters-learning-node-js-in-30-days-mini-series-4knk %}

{% post nerdjfpb/day-23-template-engines-learning-node-js-in-30-days-mini-series-4f7d %}

{% post nerdjfpb/day-24-working-with-ejs-part-1-learning-node-js-in-30-days-mini-series-493 %}

{% post nerdjfpb/day-25-working-with-ejs-part-2-learning-node-js-in-30-days-mini-series-19gp %}

{% post nerdjfpb/day-26-working-with-ejs-part-3-learning-node-js-in-30-days-mini-series-1ofd %}