Yup! That is what we are gonna do – Setup jQuery project with node.js and server from scratch in Ubuntu. There are plenty of ways to do it in the internet.
Setting up a jQuery project is something, that should be automated and trivial enough not to bother with it all, but yet, there are some important lines to write in the command prompt of Ubuntu to achieve it.
So, here it goes, open the prompt, navigate to the file where you want to nest your project and type:
>>> mkdir Desktop/JS/Week_5/Pro1 (not needed, if you have navigated)
>>> touch server.js (creates server.js).
In the created file put the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
"use strict" // require the dependencies var express = require('express'); // declare the app var app = express(); app.use(express.static('public')); // launch the server var server = app.listen(3000, function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port); }) |
With the current one, you will access the local host on port 3000. If you want another port, change the 3000 from the code to something else.
>>> npm init
>>> npm install –save express
>>> mkdir public; touch public/index.html
>>> npm install semver
>>> npm install jsonfile –save
>>> sudo npm install -g bower
>>> bower install –save jQuery
In the html file, you should define the location of the jquery.min.js. Take a look where it is and simply move it in a way to be in the following directory: public/lib/bower_components/jQuery/dist/jquery.min.js
Then, in your index.html file, you may refer to jquery the following way:
<script src=”lib/bower_components/jQuery/dist/jquery.min.js”></script>
If you want to avoid moving folders, you may create a file “.bowerrc” in your root directory (“Pro1” in my case) and enter the following data before installing bower:
|
1 2 3 |
{ "directory": "public/lib" } |
Finally you can run the server with the following:
>>> node server.js
The terminal should reply with something like this:
Example app listening at http://0.0.0.0:3000
Last but not least, if you want to take a look of the generated files, visit my repository here.
This is a screenshot of the project:
Enjoy it and have a nice evening!