Do we need all files and folders while re-desiging Nuxt JS site? - vue.js

Is it necessary to have all files while re-designing website?
Like, I've designed a site with Nuxt JS, published it, now if in future I want to make some changes, do I need all files back that I started with? Like all node modules, pages folder, components folder, everything? Asking because there are tons of files in total.
A recent case happened with me is, I wanted to do some changes in my recent Nuxt JS site, but I missed "pages" folder, however I have "dist" folder. Is there any way I can like recover "pages" folder from my final production site?
Also, what will be best practice to manage Nuxt JS projects? Any tips, tricks will be appreciated.

To develop on a NuxtJS site, you need the directories and files listed in the Nuxt guide's Directory Structure section. The files you don't need for future development are the files in the default .gitignore that create-nuxt-app generates for you, including the dist directory and the node_modules directory.
The dist directory can be regenerated from your source code using npm run generate and node_modules from running npm install if you have package.json or package-lock.json file. Anything that can be generated from some other file(s), you don't need to keep.
Is there any way I can like recover "pages" folder from my final production site?
Unfortunately not.
What will be best practice to manage NuxtJS projects?
Not sure what you mean with "manage", but if you don't use git yet, then git.

Related

Nuxt - Purpose of README.md in each folder in the default project structure

I wonder why there is a README.md in every folder in the default project structure. Is it intended to keep it?
Answer from the Nuxt Discord: Create-nuxt-app only recently made git optional, but it was automatically added previously. AFAIK git can't track empty directories, thus they used README.md to mitigate this. Other solutions I've seen are creating files like .gitignore or .gitkeep inside a empty directory to ensure the empty directory is tracked/commited. It can be any name, but gitkeep seems to be what people gravitated to, yet I never did this personally.

NPM : Create an NPM package that adds files and folders to the project root directory

I've created a web app template that I use frequently for many different projects.
I would like to create an NPM package for it so that it's easier to install for new projects, separate the template from the project files, separate the template dependencies from the project dependencies, and allow easier updating of the template across all projects.
The issue I have is that I need some files/folders to be installed in the root directory (i.e. where package.json is saved). Most can go in the node_modules folder however I have some files that must be placed in the root directory.
For example, the template uses Next.js with a custom _app.js file. This must be in the root directory in a folder named pages. I also have various config files that must be in the root directory.
Can this be done with NPM, or does everything need to be installed in the node_modules folder? I'm having trouble finding anything on SO or Google that answers this, so if you happen to know a guide online on how to do this or can outline things I should search for it would be much appreciated.
With pure npm, everything has to go to the node_modules folder, so you can't solve your issue this way.
Maybe going with a templating tool such as grunt init or yeoman could be a solution here, although – unfortunately – you'll then lose some of the benefits of being able to install a package via npm.
Another option might be to use GitHub template repositories, which have just been introduced recently.
Last but not least one option might also be to just have the files' contents in the npm package, but create the pages/_app.js manually, but inside of it simply require the file contents from an npm module, and that's it. This at least helps to have the content portable, but of course it still asks you to setup the file and folder structure on your own.
Sorry that I don't have a better answer, but I hope it helps anyway.
PS: One "solution" might also be to use the postinstall step in an npm module's package.json file to create folder structure, copy files to where they should be and so on, but at least to me this feels more like a clumsy workaround than like a real solution.

should I add app.js file in gitignore for nodejs/vuejs app?

I am new to vuejs. Recently I noticed that when I pull, it says conflict in app.js file. But I can't find the issue as app.js file is big.
Sould I add this file to gitignore file?
what is best practice to work with vue js?
I imagine you are building to a folder /dist and the app.js being conflited is the one inside of it.
You should ignore the /dist altogether. This folder is generated on the building process, meaning everyone that runs the project will update and create it.
Here is the default vue-cli .gitignore:
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
Not that not anything here may be useful to put in your own .gitignore. But you should for sure have at least node_modules and /dist.
If you are building the Vue project by scratch then I can say the following, when building/compiling your Vue project, best practices say that you should handle your entire production ready project in a dist/ or build/ directory where your main app.js file where the conflicts you are having would occur. This directory is only reserved for deploying the app and is not saved into your code repository, hence on why you should add to the .gitignore file the directory that holds such production files.

Where should jspm_packages go in ASP.NET CORE?

I'm developing with ASP.NET Core, and am using jspm, with Visual Studio 2017 RC and WebStorm.
It seems that jspm init expects your absolute lowest level, root folder with EVERYTHING is always going to be wwwroot, and thus the path it establishes (and even more rigidly enforces in jspm 0.17.x beta) iswwwroot/jspm_packages`
However, a new ASP.NET Core project sets up with the node_modules directory, and by proxy the packages.json file, just outside of wwwroot.
Obviously, I can move the file - but it puzzles me that they're different. Some people say "just use a gulp task" but that isn't really an option. I tried that route and it was a complete nightmare to maintain. Plus, jspm seems to load things directly from its package store by default.
So which is it? Is there an inherit problem with the jspm_packages folder being a sibling to the wwwroot folder? Using the UseStaticFiles option in the configuration allows me to specify access to folders outside of wwwroot.
wwwroot is your public folder, this way, all your assets must be inside of it.
You can configure npm to install modules inside wwwroot folder. Take a look in this config page from npm documentation.
However, I recommend you to put your files outside the wwwroot folder, and then, send to wwwroot only the files you're gonna use.
Grunt and Gulp are very simple and useful. If you want to give it a try, take a look in this tutorial. There you can find an example of how to use Grunt with VisualStudio

Dropbox selective syncing - pattern matching?

I'm using Dropbox on daily basis and put my programming projects in there.
It works great, but once I got many projects my /node_modules dir's are putting
a struggle on Dropbox. It's syncing process starts to be slow and it eats up CPU time.
Is there any way to do a selective sync based on directory name or a mask pattern?
Would be nice to have to a .gitignore equivalent to configure.
Any 3rd party software for that task?
There is a way to selectively sync but I don't believe it has any advanced rules like you're describing:
https://www.dropbox.com/help/175/en
2 way to resolve this problem:
You can put node_modules upper then project directory in files tree. For example:
Project dir: c:/prj/myProjWrapper/myProj
In the c:/prj/myProjWrapper put package.json and make npm install here, NodeJS recursively will find it.
Win and Linux only, not for Mac! In project dir create .ds_store folder (it is not sync by dropbox). Put package.json in to it and do npm install. You must set NODE_PATH=./.ds_store/node_modules;. when starting NodeJS