I'm trying to use Angular2 with Springboot, but I can't set them together.
I first started a springboot project, and then tried to follow the Angular 2 Tour of Heroes by johnpapa and run npm install.
The structure looks like below:
I have the /app folder, and the .js are compiled to resources/static/app/js.
Problems:
1) The folder resources/static/node_modules/ has lots of files. So when running bootRun, it gets really slow and sometimes can't even refresh the files. I believe I shouldn't put the node_modules there, but not sure..
2) npm install puts the files in ./node_modules so currently I copied them to static folder. Should I just build the node_modules to static?
3) My structure looks hacky.. what is the best way to do it ?
How to set this structure? Also, please let me know if I should start using grunt/gulp or some other tool to make this easier.
Ps.: In case anyone is interested in the johnpapa's guide: johnpapa's angular2 guide
1) Remove node_modules from static folder. Your build process should bundle all the necessary modules. node_modules is used only during build.
2) Do not copy node_modules into static folder
3) Remove sources from static folder. That one is meant only for generated bundle + some static PROD files like index.html
Try really cool project builder Jhipster ;)
I shared on github a project that integrates Angular 2 with springboot. you can check here Angular 2 with spring boot
Related
Im building a React Nodejs web application and Im trying to understand how to bundle the frontend with webpack. [
This is my project structure
Where should I install webpack and configure webpack.config.js? Most of the project structures I have seen put the frontend folder inside the backend folder, also in some projects they also bundle the backend separately. Can someone give me an explanation on where to implement it with this folder structure? I'm really confused
This article was kind of getting to the point but didnt solve my question
Webpack should be part of the frontend repository, so it should go into the frontend/package.json. Similarly, just like frontend/eslintrc.json is your linting settings for your frontend, you should create a frontend/webpack.config.js for your frontend webpack config.
Since you're in VSCode, it looks like, when dealing with just the frontend, you could consider making things easier on yourself by going to File -> Open Folder -> select the Frontend folder, and then you can easily operate on it, its package, and everything it contains (without getting mixed up with the backend at all).
Where your frontend folder goes is up to you, but your current approach is fine - organizing to have a /frontend and a separate /backend folder in the same parent directory if you wish.
i am learning react and writing my own components but i ran into an issue with project organisation.
here is my tree
Project_Folder
- Components
- Form
- index.js
- form.less
- package.json
- Button
- index.js
- button.less
- package.json
- node_modules
- <million unknown packages>
- application.js
- webpack.conf.js
In my application.js i import form like that: import Form from './Components/form/index.js'; Recently i figured if i just put my components folder in to node_modules folder i can import my components with import Form from 'Components/Form'; which is much better. but then developing this components becomes a hell just because whenever i go in to node folder it has millions of other modules which are required by webpack or babel or mini-CSS-extractor.
is there any solution to a better organization within node_modules, or maybe i should install dev tools globally ?
Definitely you shouldn't keep your components in node_modules catalog, that's where you keep only dependencies of your app. Here's might be a good read for you. Especially when you'll be using git repository, you shouldn't copy your node_modules catalog in there, because, as you've noticed - it's huuge. Let any other person working on this code to install dependecies on it's own, after cloning a repo.
There's few conventions - one will be to keep your components in src/ catalog. My advise for you will be to install globally create-react-app (a boilerplate generator for React sites, available here) and check it's conventions. Should be a great lesson for you.
One thing that concerns me is why there's package.json inside each component? There should be only one package.json file for a whole project. Read here.
If you want your file paths shorter and easier to read/use, you can create aliases with Webpack like this.
It is not a good idea to have your components inside the node_modules folder. Unless you are creating shareable code between teams through other tools/frameworks. Using your components there create a whole bunch of a problems that you have not faced YET :( !
i.e Node modules give the flexibility to share code using only the package.json and ignoring them with .gitignore. And reinstalling them through npm install.
Can you see the problem here?
To be able to share your components now inside the node_modules the options are:
either push your files without the folder losing your components (Not an option after all :()
send the whole application and the modules which could be huge and forces everyone to have to download a massive repo or even in case of upload to the repository (git, bitbucket, gitlab) (taking forever to upload)
create a whole module for that component only to write './X' into 'X' (requires extra effort and does not sound a good deal for me)
Structuring folder is a delicate topic. It envolves a little bit of analysis of what suits your taste better and there is no right way of doing (even if you find experts that claim that such way is the correct)
For a better approach you could check the react documentation:
https://reactjs.org/docs/faq-structure
and a tutorial that I think will suffice in your case
https://medium.com/hackernoon/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed
Goodluck:)
You should avoid messing with your node_modules folder. It is best to let npm or yarn write into it.
What will happen if you need to delete your node_modules and rebuild it? All your code will be lost.
What will happen if you want to share your code or push it to remote repository.
You will be force to share your nodes_modules folder around.
As for react project best file structure, checkout this article on react website.
There is not really a best structure, all depend on you and your team. Usually people:
Group files by feature
common/
Avatar.js
Avatar.css
APIUtils.js
APIUtils.test.js
feed/
index.js
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
FeedAPI.js
profile/
index.js
Profile.js
ProfileHeader.js
ProfileHeader.css
ProfileAPI.js
Group files by type
api/
APIUtils.js
APIUtils.test.js
ProfileAPI.js
UserAPI.js
components/
Avatar.js
Avatar.css
Feed.js
Feed.css
FeedStory.js
FeedStory.test.js
Profile.js
ProfileHeader.js
ProfileHeader.css
I've searched all over google and checked out the official docs for Webpack but have not had any luck finding a tutorial/guide/plugin to even do this. Has anyone done this before or should I just drop webpack altogether and go for a grunt-maven-war file generator instead?
Well, there is nothing special in building spring-boot with webpack. You can install node globally, you can install it during build...
You just add plugin to pom.xml to run node command i.e. (https://github.com/eirslett/frontend-maven-plugin)
And that actually it. It runs webpack and you get your js, css, fonts, ... files in some folder. Now you proceed like it is usual static assets, pack them into war and enjoy.
I'm new to Angular 2, I know host Angular 1.x on shared hosting like GoDaddy, but I don't have idea how publish Angular 2 application, for example I have this structure folder:
angular2-quickstart
--app
app.component.ts
main.ts
--node_modules
--typings
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json
typings.json
What file i need to upload on ftp?
I don't tried anything because I don't know how to proceed
Thanks in advance!
As a component based language, angular 2 includes some caveats in it's deployment process.
First, the files used in development environment aren't necessarily shipped to production. In short, you'll only need to upload .js, .html and .css files .
Second is that even if your application works deploying only the files mention above, it's advisable to include the following process:
Bundling: Compiling all the .js files into single files. For instance, vendor.js could include all third party libs and bundle.js would include all application .js files. (Bundles are import for performance reasons, but bear in mind that with the arrival of http 2, this process will be abandoned)
Minification: it's a standard process in all web apps, but now you only minify bundled files.
Take a look in this article, as it give some examples of tools that can help you with deployment process.
http://www.ninjaducks.in/hacking/angular-setup/
If you don't have a backend, free hosting sites will usually look for an index.html to begin their job. Hence, your folder structure is correct but you will need to upload the js files instead of the ts files.
I think that one popular workflow is to gulp-typescript your .ts files, and send the resulting .js files into a distribution folder. The many .js files could also be "gulp-concatenated" (gulp-concat) into one file.
Of course you'll need to be sending your html and css files as well.
Since the Angular2 library relies heavily on what's in the node_modules folder as well, you would need to upload your package.json and npm install on the server side. You could try uploading the node_modules but the upload takes a lot of time.
You need to build angular2 project using tools like webpack or angular-cli - which also uses webpack post beta.14 release. Webpack will create a distribution directory - dist - which you can deploy to the server. Webpack bundles all the code into a single file which it puts inside the dist folder. Here's a good resource to understand the code and deployment structure of angular2 app: https://github.com/mirkonasato/angular2-course-webpack-starter
Clone the above directory, run "npm install" to install all dependencies and run "npm run build" you will see the distribution folder - dist - which you can deploy.
Well, you can run ng build in your root application directory. It will create a dist directory containing the app and files. You can put this directory into the page the webserver will look for the index.html
I'm adding my own grunt build setup to my meteor project and assumed from the docs that if I put it into the private folder, it would be left alone by iso-build. Alas this is not the case, and all manner of hell breaks loose.
I'd like to know why?
A simple solution is to put my assets folder outside the meteor folder, which I'm fine with.
NB : I'm not looking to debate the validity using grunt in this situation, I'm interesting in understanding how iso-build treats folders, and how, if possible, to implement some control over what it includes or ignores etc.
basically meteor doesn't ignore npm modules in the private directory, i've gone with the strategy of moving my grunt setup and assets outside of the meteor directory and have my assets moved by grunt into the public directory.