In work we have a pretty complicated stack and situation, which could be somehow described as the following schema:
The situation is:
We have an old, poorly maintained PHP/AngularJs project which uses webpack for bundling.
We also have another project ("Some React Project") which contains a few sub-projects, and all of them are bundled into some bundle, which is then bundled with the old angularjs project. The AngularJs project then renders the React components from this bundle using some bridge library.
In addition, we have another modern React project, which is completely isolated and has it's own CI/CD process (it's actually another app).
Now we are going to develop a new module, using react, which should be used in all three projects.
We first thought about maintaining it by publishing it to NPM and for each update, to deploy it in any project using npm install. The problem is that it has SO MUCH OVERHEAD. It is so very hard to test and deploy. It's hard to maintain and since
some of our projects are very old, it's a complete nightmare.
Are there any other options available?
Is it possible to somehow deploy to package artifacts somehwere, and then automatically update it in all the projects?
Have you considered installing directly from another repo ?
Actually the overhead might be to have an auto-updated package. This would mean that you could never introduce a breaking change in that package.
{
"dependencies": {
...,
"common-package": "git+ssh://git#<your_forge_host>/path/to/<repo>.git#<your_tag_or_branch>",
...
},
...
}
Related
I'm confused why all the React tutorials I'm using to learn React have me installing libraries through npm rather than importing through CDN's (React, Redux, Material UI, firebase, etc). I thought CDN's were more efficient.
Any guidance on this would be helpful (this is my first time using VS code and installing packages like this, the only other website I've programmed I just imported bootstrap and jquery through CDN and coded in notepad++ :/)
While you can of course use a CDN to import scripts into your application (with, for example a <script> tag) npm is useful in the fact that when you build your React app it will bundle all the required modules together.
This can be advantageous in the fact that your users don't have to download any scripts when your application loads (which can take some users with slower connections a long time) since everything is bundled within your React app. Some applications depend on a lot of dependencies, and forcing every new user to download each script individually can cause speed issues.
At the end of the day, I don't think there is a right or wrong answer as to whether you should use a CDN or NPM, just understand that when you use NPM it bundles the required scripts into your app when you run npm run build instead of the user having to download them when they visit your site.
CDN's will only get you so far. In the industry you're going to be expected to have some experience with npm/yarn. If you keeping going down the frontend rabbit hole, you'll eventually run into things like Webpack and Babble which will help make your Javascript a lot more efficient and backwards compatible. Installing things through npm/yarn will also often offer a lot in terms of providing you with a better development environment (things like react-scripts, eslint, prettier, etc).
I will start to develop a react that will be used by many internal react apps in my company. This library is starting from scratch, and there are many architectural decisions to be made about the components, utilities, REST client API, etc. To facilitate the development, the idea is to develop the library in parallel with the first react app.
For now, I created the library using create-react-library and deployed it in our internal Nexus 3 repository using npm publish. Also, I already created the react app using the create-react-app.
During the development, I will start to watch the react app, and I want that every modification made on the library or in the app should be synchronized in the react app server.
My question is: How I can link locally the react library and the react-project, in such a way that I only start the react-project (npm start)?
You can push your library to git or other VCS, and then using the get link, you can register this as a package in your main repo.
Once the library is stable enough, release a tag and update the package URL to the tag. You can even publish this repo to NPM and install like any public dependency.
Reason to go with this approach is that since both are in development phase, it would be easier for you to maintain link on git or other VCS.
As an alternate, you can even use npm link which can also be used, but per my understanding, maintaining over VCS is more reliable as you can have different tag/ version of same project, and this also facilitates you to have parallel development without too much overlap.
Reference
npm install private github repositories by dependency in package.json
npm link
I have a React-webpack web app (client side only - no API server) and was tidying up the package.json file and it occurred to me that all of the dependencies are dev dependencies as you do not run the React web app in production - you build it and distribute the built files.
Is this right?
React and possibly ReactDOM would be dependencies. Any additional libraries you're using that appear on the page would also be dependencies (example: react-autosuggest). Everything else would generally be a devDependency.
There's no great consensus on this yet (see this webpack issue, for instance). Some folks want to do everything as a dependency, others as a devDependency, I'm sure you could make a case for bundled dependencies, etc. The solution I outlined above is a best practice that seems to work well. For example, if you're using a version range on a package, you likely wouldn't care about minor/patch version change to webpack, eslint, karma, mocha, etc. You'd most certainly care about even a patch level change to something like react, so it gets separated out into a much shorter dependency list. (Looking at one project, there seems to be a 4-5x difference between dependency and devDependency. It's much easier to spot the meaningful changes if you corral them into the dependency tree.)
Related: yarn takes the approach I outlined above.
I´m pretty new to gradle and currently there is question that bugs me. The situation appears as follows: Based on a bower technology stack I implemented an Angular App. The app as it is doesn't change nor has it to be built in any way since there are just static javascript and HTML pages. In my opinion the used versions of angular, bootstrap and other libraries should also stay the same due to compatibility of the single libraries so these files also shouldn't change. Is this a correct behavior or should I get at least the latest build of the used libraries version as I deploy the application?
Also less is used in the application. Is there a way to compile the CSS every time I run the gradle build file or should I deliver just the compiled and finished CSS file?
As a result I´m also not quite sure if it's recommended at all using gradle to deploy an "static" angular application.
I hope someone out there can help me to answer the questions above. As you can guess, I´m not very experienced at deploying of such angular applications since this is my first project with this kind of problem.
This goes for all package managers, not just gradle but npm, gem, nuget, maven, whatever.
Use static dependancy version numbers. Otherwise you will end up finding breaking dependencies in QA or Prod rather than production.
This means you need to be aware of security fixes in your dependencies.
When you need a feature or fix in a new version of your dependencies, unlock the versions, rebuild and test in dev. Re-lock the dependencies and send to QA for verification.
I want to split my web project into three: front-end, back-end and super-admin.
What is the best way to re-use the components across code bases? Npm packages? That seems hard to maintain:
Open component dev package
Make changes
Push changes
Tag version
Update all projects
Seems complex and prone to errors. Is there a better way?
Depends on if you need to use different versions of the shared components from different projects. If so, you probably need to make a versioned npm package. However, if you just want to share the packages and use the same version everywhere, you have other options. For one, you don't have to actually build and publish an npm packge, you can just use npm link. This will basically create a symlink to your shared code in node_modules of the other projects.
Alternatively, you can do it without any npm package at all, just have the shared components in a separate project (directory) and import them in javascript through an alias, using a bundling system (webpack alias / browserify aliasify).