I have a node app and I am trying to build it on azure pipeline, but the build gets stuck at the selection where you have to choose between automatic or custom. Is there a way to skip this so it build perfectly?
image
According to the document, we can know: The first time you run gulp you will be greeted with an interactive installer, as far as I know, the pipeline cannot handle such interactive setup.
The easiest way to install Semantic UI is our NPM package which
contains special install scripts to make setup interactive and
updates seamless.
The install process will create two files: semantic.json stores paths for your build and sits on the top-level of your project, theme.config is a LESS file that exists in src/ and allows you to centrally set the themes for each UI component.
The installer will also create a special folder which contains your site-specific themes. The default location for this is src/site. For details, please refer to this document.
So a workaround I can think of is that you can run the npm install semantic-ui --save command locally, and then publish the generated files from the local to the azure repo.
Related
I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!
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 have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose
It's my first experience with react and as stated in official docs, I was trying out create-react-app to create my first react app.
But I notice that it takes around 15-20 minutes to get finished( even though I have good internet connection) and once it was completed, I noticed the space taken by the newly created folder to be around 165-170 MB.
Isn't there any quicker way to get started with react as the above mentioned method probably installs some modules that are never going to be used.
Thank You.
I also faced the same problem when i first started learning react. What i did was i manually configured webpack to bundle my code. And then i created central node_modules folder in particular place. So anytime i want start a react project i just create a symlink to the node_modules folder. And also if i want install a new package, i go the central folder and install it, so the package will be available in the node_modules folder and for any of my project that may need it. That way i only need to install a package once not every time i want to use it for a new project.
But recently i found a package manager called pnpm. Instead of downloading a package anytime need to install it, pnpm maintains a central cache of packages such that anytime you want to install a package, it just creates a symlink(or junction in windows) (similar to what i used to do).
Conclusion
In conclusion i would recommend you to just configure a bundler (vite is cool) by yourself and use pnpm to install packages. You can read more about pnpm on there website
I have created two apps using 'Visual Studio Code' and 'node.js.' I run them using command 'npm start,' and they show in the browser. I want to build them or deploy them so they can be used by anyone. It says there to use command 'npm run build.' How to do that, and what technique you use in order to build them?
It depends on what configuration you used for building the React app. If you used create-react-app, npm run build is the correct command for building it.
If you used a different configuration (e.g. webpack), you should use the relevant command for that configuration.
Either way, deploying it will be as easy as copy/pasting the build folder's content to the server you want to host it, after running the build command.
Visual Studio Code or any other Code Editor for that matter is not relevant. You can develop, build and deploy any React app using any Code Editor you want, it's just a matter of preference.
"Building" refers to the task of preparing (transforming, minifying, compressing, etc.) all the relevant project files so that they're ready for production (assuming that your build scripts are configured to do so).
"Deploying" an app is usually a separate task that will deploy (upload) your current project build to a development platform provider like Firebase, Netlify, Azure, etc. Note that you have to register with a provider and setup a new project on their end before your deploy your project.
Which provider you use is totally up to you. Also, you have to configure your current project once you've chosen your development provider. They'll provide instructions on how to deploy your project.
On a side note, keep in mind that you can configure your own npm scripts so that they run whatever you want. More about that here