JavaScript project structure

Question

I'm pretty new to JavaScript and I want to create a project. I've read online that by using npm init a package.json file is created. By using npm install --save or npm install --save--dev I can install packages and they will be added to that package.json file.

I used npm install jquery --save to be able to use jQuery. But how can I include jQuery into my JavaScript file?
When I have a project folder with a src-folder and html-folder. Do I have to put the package.json file in the src-folder or in the project folder?
Are there any other conventions I should know about?

Jquery is useful for DOM operations. Node is mainly for the backend, if you want to use jquery in the frontend I recommend you use Bower! — ooo
– ooo, Commented Nov 8, 2014 at 17:39

vmontanheiro · Accepted Answer · 2014-11-08 15:06:42Z

3

Yes you can but I suggest for you to see http://yeoman.io

A little "architect" who can to help you to start your studies about projects structures.

http://yeoman.io/generators/

answered Nov 8, 2014 at 15:06

vmontanheiro

1,0399 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

JNevens Over a year ago

If I use the generic 'webapp-generator', can I then afterwards use other generators (like 'jquery-generator') to add functionality?

vmontanheiro Over a year ago

So you can see the generators list here yeoman.io/generators , but if you want just add jquery or others libraries in your project. I suggest the bower. bower.io

vmontanheiro Over a year ago

Try to find about the "bowerJS, gruntJS and yoemanJS". They can help you to do a good optimized project.

Timmerz Over a year ago

I think yeoman is a good answer, but since op is a beginner there is more to digest, such as grunt, installing yo, generators, etc. I would actually recommend @JN11 start with some beginner tutorials with basic html and static sites before even getting into node.

JNevens Over a year ago

@vcrzy I've configured the standard Yeamon webapp, but I'm just trying to understand what all the Grunt tasks are for. I know what the purpose of Bower and Bootstrap and jQuery is and where I can add new HTML-files and so on. Also, how can I configure it to run on a server (and not localhost)?

|

Timmerz · Accepted Answer · 2014-11-08 15:01:28Z

1

I created a project for you that has Node.js, Express and jQuery all set up:

https://github.com/timothyerwin/node-express-jquery-boiler

You should be able to start it with:

npm install
npm start
http://localhost:3000

answered Nov 8, 2014 at 15:01

Timmerz

6,1795 gold badges38 silver badges50 bronze badges

2 Comments

JNevens Over a year ago

Can you explain the structure of this project to me? Where do I put my own HTML and JavaScript files? Which files are client files and which are server files? Can I integrate Bootstrap in this project?

Timmerz Over a year ago

the client files are under public and the rest are basically server files. I updated the code to include bootstrap along with a bootstrap.html example.

jmingov · Accepted Answer · 2014-11-08 14:44:59Z

0

The problem is that nodejs is only used to make custom builds of jquery, more info here:

How to build your own jquery (Github)

You dont need to put any json file in your proyect, you can learn how to build Jquery in a different directory here:

Building to a different directory (Github)

Note: Jquery is a client-side library not a sever side module.

answered Nov 8, 2014 at 14:44

jmingov

14k2 gold badges37 silver badges37 bronze badges

Collectives™ on Stack Overflow

JavaScript project structure

3 Answers 3

11 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related