How to install Semantic-UI in Azure - reactjs

I am installing a pipeline, CI/CD a React Project but suddenly it wants me to select an option on my semantic plugin.
How do I force it to install the automatic?
https://prnt.sc/v5ogsf

According to the document: Semantic UI includes an interactive installer to help setup your project. However, we cannot interact with command line task in azure pipelines.
As a workaround, you can complete install Semantic UI step locally.
1.Clone your azure repository to your local.
2.Run npm install semantic-ui command in your project. Please refer to the steps about install Semantic UI in this document.
3.Commit and push the changes to your azure repository.

Related

How can I get a hold of Sencha GRUI?

I saw some webinar from Sencha, and I am planning to use GRUI from Sencha in my next React project, Is it available over NPM? full feature? Where to find and download?
Short Answer: Evaluation copy is available via npm, but you have to buy the full version. It is not available via download as other ExtJS products.
Please follow the following link to the documentation:
GRUI documentation
Details on GRUI can be accessed easily by visiting the Sencha GRUI page.
It is available over NPM and can be consumed like any other package.
For evaluation, all the features are available and can be checked over a development environment; but some advanced features will require license activation to be enabled in a production environment.
You can the NPM package from our npm page.

Best practice for installing node_modules for a reactjs app on Azure Linux Web App

I have a react(specifically NextJS) web app running on a Linux Azure Web App Server. I have it deployed and working correctly via GitHub Actions. However, I'm having issues finding the most efficient way to deploy the node_modules.
Here's what I've tried.
I've ran the install and build within GitHub Actions and deployed the package as a zip artifact. However, the file was huge due to the node_modules and takes 10+ minutes to deploy.
I've created a postDeploy script to run after deployment that runs an npm install. Not sure if this is the best way to go about it so I reverted this.
For the startup command, I have azure running npm run start:prod. I thought about changing this to npm install && npm run start:prod . I'm not sure if this is a good idea either
What I've settled on so far is I just manually get on the server and run npm install after a deployment. This won't work for CI/CD though.
I've read that azure kudu supposedly detects package.json within the wwwroot folder and will automagically install dependencies but I haven't seen this work, nor could I find any documentation on it. So far, my best idea seems to be to change my startup command to run an install before starting the app but I'm not sure.
Any advice?
There shouldn't be a big difference between GitHub Action and Azure DevOps in that terms. But what should you do actually on your pipeline is run npm run build command and publish only produced output.
Please take a look here how it looks on Azure DevOps.

Semantic-UI Dependency Stuck on Ongoing Build on Azure Devops Pipelines

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.

How to build react.js apps at visual studio code?

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

Why do I need to install node.js and git to learn AngularJS?

I am presently reading Manning's AngularJS in Action by Lukas Ruebbelke
The introductory part suggests,
Because you’re pulling files from a CDN, you’ll need to run
Angello Lite(the application name) from a web server. There are a few ways to do this, but one of the easiest ways is to use the npm package serve.
The steps for installing Angello Lite are as follows:
■ Install Node.js. You can find all of the information to do that at http://
nodejs.org/.
■ Install the serve package by running npm install -g serve from the command
line.
■ Download Angello Lite from GitHub, using the URL given above, and place it
on your local machine in a directory named angello-lite.
■ Navigate to the angello-lite directory from the command line and run serve.
■ Go to http://localhost:3000 in your browser to see the application.
Does learning Angular JS require previous exposure to node and git?
If I have Apache Tomcat already configured on my local m/c, what is the procedure to start with it?
Furthermore, just to keep in sync with the author, I installed git and then cloned a dir onto my local m/c from github.
Then i install node.js and Install the serve package by runningnpm install -g servefrom the command line.
Unfortunately when i navigate to the angello-lite directory from the command line and run serve, it shows me
where angello-lite is the repository where the application resides?
Any suggestions on how to configure successfully?
I have no idea regarding node.js and git. Do i really need to learn
these to begin with AngularJS then.
No, that's not a requirement. You don't even need a web server. You can have your static HTML files locally or use some online service like plnkr. Obviously if you need to work with dynamic data then you will need a web server. At some point you might want to start making AJAX calls in order to fetch some dynamic data from your server backend.
If I have Apache Tomcat already configured on my local m/c, what is
the procedure to start with it?
Just add an HTML page to the root of your website, open your favorite browser and invoke this page.
You don't need those tools to learn Angular - you can download latest package from the AngularJS website (both for development and for production).
Node.js and Git may be necessary to pull and build packages from the NPM, run tasks and many more great features, but just to learn Angular all you need is its code.

Resources