How to uninstall ReactJS from Laravel/UI - node.js

Previously installed ReactJS and Bootstrap scaffolding by Laravel/UI.
php artisan ui react
php artisan ui bootstrap
Now I've removed Laravel/UI by: composer remove laravel/ui. I have manually deleted corresponding js and css files and contents from /resources and /public.
Looking at composer.json, laravel/ui is not there. But looking at package.json, I find '#babel/preset-react', as well as 'resolve-url-loader', 'sass', and 'sass-loader'. These last four are not standard in Laravel, but added afterward, presumably because of my previous installing of laravel/ui React and/or Bootstrap.
When I run npm uninstall #babel/preset-react ... it removes the package from package.json, but then when I run npm install && npm run dev, the package is back again.
I would like to remove all traces of Bootstrap and ReactJS from my Laravel 8 application. Where should I look and/or which other steps should I take?

Related

Vue3 app breaks when you install anything from npm

I'm starting a new Vue3 project using vue create delete-me. This seems to work fine, and I can run npm run serve and the app starts up as intended.
As soon as I install any library with NPM, it seems to delete all node_modules and the project no longer works.
Now install anything and this is the result:
I've tried running npm install afterwords but the project does not seem to have all the dependencies. The project is just useless at this point.
It seems like vue create does not create a valid package.json but not sure. I'm new to Node and Vue.

How to customize bootstrap 4 in reactjs app with reactstrap dependency?

I start developing a React app with reactstrap. I followed the Get Started running the following commands :
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
npm install bootstrap --save
npm install --save reactstrap#next react react-dom
Then I can see "bootstrap": "^4.0.0" in package.json's dependencies and bootstrap/ in my project node_modules folder. Well.
Now I would like to change, for instance, the boostrap primary color. Let's start easy :). I have read Bootstrap 4 Theming but I don't find any custom.scss in my project.
What is the proper way to add and edit bootstrap theme when using reactstrap ? Plus, how do I keep my changes across bootstrap updates since /node_modules is in .gitignore ?
PS: I am new to web / react development so my apologies if I ask/say anything stupid or obvious.
Thanks
Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet
Install Sass: npm install node-sass --save
Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
add import './styles/css/custom.scss'; in src/index.js
Done!
Here is an exemple of my custom-btsp.scss file:
$theme-colors: (
"primary": #ffb800
);
$btn-border-radius: 3000px;
#import "~bootstrap/scss/bootstrap";
You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import
#import "node_modules/bootstrap/scss/bootstrap";
and after that reassign styles.
But first thing you should to do is adjust your webpack to understand .scss file extensions

Creating an Ember CLI in-app/in-repo Addon: how to install npm dependencies?

I have an "in-app" (or "in-repo") Ember addon in my project's lib directory. The addon has its own dependencies listed in its own package.json file. My project's top level package.json specifies the addon path:
"ember-addon": {
"paths": [
"lib/my-addon-here"
]
}
However, when I run npm install at the project root, it does not install the addon's dependencies.
Is there a way to configure this so that the addon's dependencies are installed when running npm install from the project root?
You don't.
List dependencies in the host app's package.json.
The in-repo addon's package.json is used only for reading some configuration from it. For example, this is how ember-cli-deploy determines which addons are deploy plugins.
If you do want to separate dependencies, then create a regular addon. Use npm link in the addon and then npm link <addon-name> in the host app to simplify addon development.
From #jelhan: For linting to work properly, Node dependencies that you require() in the addon should be listed in the addon's package.json as well. See for more details.

Bower, Mondernizr and Gulp

I am trying to set up an new website environment in a Visual Studio 2015 project. Ive got everything working; NPM, Bower, Gulp. It is generating and minifying all my js and css, except Modernizr, which I seem to be stuck on.
I added modernizr to my bower.json file and VS created the bower_components folder. However there is no modernizr.js in the directory. I found another post on here suggesting doing a "bower cache clean" but that didn't seem to improve the situation at all.
Any ideas?
#ahmad-alfy is correct, in that there is no modernizr.js file that is included.
however you do not need to run npm install. You can npm / bower install any of the Modernizr URLs.
e.g. npm install --save https://modernizr.com/download?setclasses-emoji-ambientlight
Since Modernizr 3.0 there is no longer an already built file in the bower package. You have to build it yourself by running npm install inside bower_components\modernizr
Source: github issue

Can't build my web application when integrating bootstrap template

I'm totally new to Node.js meteor and all development outside of visual studio.
When I go in the console and add bootstrap like this :
npm install twitter-bootstrap
It gets installed and adds all the bootstrap files in my solution but when I run my application with meteor it says
Process finished with exit code 254
No more information. No errors. If I delete all the bootstrap files, it builds and run just fine. Any idea what might be causing this?
I've tried looking for the exit code meaning but I can't find it for my IDE and I'm a bit clueless as for why simply adding those packages without even referencing them anywhere in the project might cause my application not to run at all.
You can't add npm packages in your project folder like that. It will create a node_modules sub-directory that meteor will treat like any other project folder, i.e., it will interpret all the files in it. That's not what you want. Either do the npm install in a super-directory, or, better yet, use the meteor meteorhacks:npm package (https://atmospherejs.com/meteorhacks/npm):
meteor add meteorhacks:npm
and then add the npm dependency to your packages.json file.
{
"twitter-bootstrap": "2.1.1"
}
But the real question is: why do you need this package? bootstrap3 is already part of the standard meteor packages, i.e., you already have full access to bootstrap, incl. javascript.
You can use atmosphere meteor packages called mizzao:bootstrap-3 by running the commend
meteor add mizzoa:bootstrap-3
Alternatively if you want to use npm packages you must add meteorhacks:npm packages.
meteor add meteorhacks:npm
npm install twitter-bootstrap
You can specify all the required npm packages inside a packages.json file.
{
"gm":"1.16.0",
"twitter":"0.2.12",
"twitter-bootstrap":"2.1.1",
}

Resources