We used react-boilerplate to create and application. And we've used material-ui as the UI library and hosted on Azure IIS.
Due to a recent material-ui package release, somethings are breaking on local environment and not in the deployed application. I just want to make sure if it's just in the dev environment or deployed react app uses a previous package.json version to make sure npm install won't break the deployed application.
(The package.json file in wwwroot folder shows the express server package.json, but I want to find the react application package.json or versions)
So, how can I find the package.json file of the deployed application ? Or how can I check the installed versions (package-lock.json or npm ls) ?
TLDR :
How to get the installed package versions of deployed react application (on Azure IIS)?
package.json is used during build to choose dependencies to install for the project. This file does not exist in the deployed files. If you go to Advanced Tools tab on your app service and then click on Tools>Zip Push Deploy, you will see all files on your deployed website. You will not find package.json there as it is only present before the build process.
The only way for you to find the package.json file for your deployment build is if you are using CI/CD, then you can go to Deployment Center tab on your app service, click on the latest build link and see the branch from which the build was triggered. You will find the package.json file in that branch. If the branch has been modified after the build was deployed, you can check history of that branch and choose package.json as on the date of deployment.
If you are not using CI/CD, then you are out of luck.
Related
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I am building and releasing React JS projects under Node JS using Jeninks installed in one server with the four steps.
Source checkout
npm install --production
npm run build
Copy the build folder to the node server
The second step, installing node package dependencies (node_modules), needs an internet connection that is not available in the Jenkins installed server. So, planning to have the node_modules folder(which contains already installed required packages) as a common artefact in some other system with an internet connection and should be used in check-out out React JS project under the Jenkins system. The project source is checked out only in Jenkins installed server. Is it possible to achieve the same? or any other method available for my requirement?
I am developing a project with frontend on ReactJS and backend on Java (Spark framework). To build server with frontend, I build the frontend using yarn build and then, using Maven, copy contents of build folder to src/main/resourses/public folder, from which Spark serves all static files. Recently, I moved to CRA and since then all icons disappeared on production build.
When I run the project on webpack-dev-server, everything works fine. All icons are loaded as you can see below:
But when I build production version of the frontend and copy it to the public folder, I get an this error:
The same fragment on production build:
My thoughts are that either icon fonts are copied incorrectly at some point, or the server cannot properly load the fonts, which is less probable as they were loaded earlier when I did not use CRA.
Also, it seems that fonts do exist in the website, because they appear as Sources in Chrome Dev Tools. However, as I said they might be loaded improperly.
P.S. I'm using the following versions of Semantic UI. I generated semantic folder in src directory using npm i semantic-ui.
semantic-ui: ^2.4.2;
semantic-ui-react: ^0.85.0
I found an issue. The problem was that after I built the frontend, Maven incorrectly copied the production build to the public folder
The solution was found here
Working to add Angular (v4) to an existing ASP.NET MVC 4 application. One of the projects it has includes Selenium Web Driver which has a web.config file included.
node_modules\selenium-webdriver\lib\test\data\web.config
This folder is NOT included in the project but is in my web application folder
myapplication\node_modules
myapplication\Controllers
myapplication\Views
myapplication\web.config
etc...
The web.config in the selenium-webdriver folder causes the build to break with the following error:
It is an error to use a section registered as
allowDefinition='MachineToApplication' beyond application level. This
error can be caused by a virtual directory not being configured as an
application in IIS.
Pretty common error and easily fixed when it is your own mistake, but since this is a library I'm using I don't have control over the file. So my question is a bit leveled based on my research:
Can I make the "test" folder of selenium-webdriver go somewhere else?
Should my node_modules folder not be at the root of my web application?
In general.. how do I fix this?
install the rimraf package
npm install rimraf
then in package.json use rimraf command
'script': {
'postinstall': 'rimraf node_modules/**/web.config'
}
Please note that first time you will have to delete it manually, as the package is already installed and postinstall command will not run.
But for all your future installs + for your teammates, it will be taken care of automatically as postinstall command runs after every npm install
Please do read more about npm pre & post hooks
Its more of a work-around, but my making your node_modules folder hidden it won't show up in your solution explorer and Visual Studio will run your project as normal. As far as I could see, this doesn't affect running your web application.
I have access to an Angular app in a Github repo. I'm added as a contributor. The developers are using Grunt and I want to work with one of the branches.
To build a dev. environment locally- can I do the following?
Create a project folder
Clone the github repo. to this folder
NPM install //from inside the project folder - will this read package.json and install Grunt and the other dependencies?
Run grunt build
Is this the standard way of setting-up local environments? I don't want to create a branch or push anything yet.. will get to that at a later point.
Any suggestions/ advice or tips ?