Currently, my package.json contains somes dev dependencies :
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"font-awesome": "^4.7.0",
"jquery": "^2.1.4",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"unslider": "^2.0.3",
"vue": "^2.3.2"
},
...
When I first compiled all dependencies with npm run dev, eveything worked fine.
Then, I tried to install some others dependencies like unslider, as you can see. But now, I cannot understand why this package is not compiled in my app.js / app.css. I am missing something ?
after review the package in github, you have to add this:
In resources/assets/sass/app.scss:
#import "node_modules/unslider/src/scss/unslider.scss"
In resources/assets/js/app.js:
require('unslider');
Related
I am a month into react-native and going through the learning process. Does adding too many packages somehow affect the size of the final android release. I also want to know if is it good practice to use the same project for multiple apps. Is it safe to use this many dependencies in a single project?
"dependencies": {
"#react-native-community/masked-view": "^0.1.5",
"#react-native-firebase/app": "^6.2.0",
"#react-native-firebase/auth": "^6.2.0",
"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-calendars": "^1.220.0",
"react-native-contacts": "^5.0.6",
"react-native-gesture-handler": "^1.5.3",
"react-native-maps": "0.26.1",
"react-native-safe-area-context": "^0.6.2",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.13"
},
Basically Yes
But to see how much each package takes
You should check with this tool
cost of modules
Cost of modules
Find out which of your dependencies is slowing you down
npm install -g cost-of-modules
Run cost-of-modules in the directory you are working in.
cost-of-modules
I'd like to use the file RCTPushNotification.xcodeproj inside the directory node_modules/react-native/Libraries/PushNotificationIOS, to add it in my Libraries folder in order to manage iOS push notifications. I'm following this tutorial: https://www.pubnub.com/blog/react-native-push-notifications-ios-android/.
The problem is that I can't find it, even after deleting node_modules and executing npm install && react-native link.
Here is my package.json dependencies, but I don't think that a package could modify my directory:
{
"dependencies": {
"#dudigital/react-native-zoomable-view": "^1.0.14",
"firebase": "^6.5.0",
"pubnub": "^4.27.0",
"pubnub-react": "^1.3.2",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-cli": "^2.0.1",
"react-native-fast-image": "^7.0.2",
"react-native-fs": "^2.16.2",
"react-native-gesture-handler": "^1.5.0",
"react-native-image-picker": "^0.28.0",
"react-native-optimized-flatlist": "^1.0.4",
"react-native-push-notification": "^3.1.9",
"react-native-view-shot": "^3.0.2",
"react-navigation": "^3.13.0",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"rn-fetch-blob": "^0.11.2"
}
Here are the only files I can see on this directory:
NativePushNotificationManager.js
RCTPushNotificationManager.h
RCTPushNotificationManager.m
React-RCTPushNotification.podspec
Knowing that RCTPushNotificationManager.m and RCTPushNotificationManager.h should be inside my xCode project, I tried to put the entire PushNotificationIOS folder in my Libraries folder, but it doesn't seems to work because there is not the necessary Products folder inside of an xCode project.
I also tried to put each of this files in my Libraries folder, but Xcode doesn't consider them as xCode projects (not very surprising).
This issue doesn't seem to have been encountered earlier.
After just spending a lot of time and effort on push notifications, I recommend you look into OneSignal push notifications. Saved me a lot of time.
However, you should be able to find the .xcodeproj here: https://github.com/react-native-community/react-native-push-notification-ios/tree/master/ios
I have multiple scss file those all imported in another scss file name style.scss. Now i need all the scss compile to css and use all of my components. How it is posible?
I have followed this link Followed Instruction
Can any one help me please
You can install the following dev dependencies:
"devDependencies": {
"node-sass": "^4.1.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1"
}
And import your scss file inside your App.vue:
<style lang="scss" scoped>#import 'style.scss'</style>
in the documentation of cookiecutter-django relating to SASS Compiling and Live Reload it's stated that I only have to enter "npm start" (after installing npm of course) in the main project folder to enable Live-Reload and SASS compiling. I was wondering how this should be possible without a package.json file but tried it nevertheless, maybe some hidden thing I did not know about. But npm init of course told me that a package.json was missing. I initialized a new project with bootstrap compilation and gulp enabled, same outcome. Still no package.json. Am I missing some key-point? Or is the documentation in this case maybe incomplete? Where do I get the required package.json from? :)
In the project generation at the beginning, you probably chose "None" on the "js_task_runner" step. If you chose "Gulp" here, it will generate gulpfile.js and package.json file, after which you'll be able to use npm install.
As mentioned in other answers, when you start your project and then choose none for task runner options, it will not work. See js_task_runner on cookiecutter-django documentation.
May I ask where you tried to run npm install? The package.json file is located in the root of your app, so you have to run commands from there.
It should be possible to add the needed files afterwards manually. Create a package.json file in the root directory of your app and add following code. Important: Change name to the name of your app.
{
"name": "CHANGE_TO_NAME_OF_YOUR_APP",
"version": "0.1.0",
"dependencies": {},
"devDependencies": {
"bootstrap": "4.1.1",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.14.3",
"autoprefixer": "^9.4.7",
"browser-sync": "^2.14.0",
"cssnano": "^4.1.10",
"gulp": "^4.0.0",
"gulp-imagemin": "^5.0.3",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.2",
"gulp-uglify-es": "^1.0.4",
"pixrem": "^5.0.0"
},
"engines": {
"node": ">=8"
},
"browserslist": [
"last 2 versions"
],
"scripts": {
"dev": "gulp"
}
}
Since this project uses gulp.js as task runner you need additionally to the package.json also a gulpfile.js file. Code from this example should work. Check also if you have a scss file in name_of_your_app/static/sass/project.scss.
Now you should be able to run npm install in a first step and compile scss with npm run dev in a second step (see documentation).
I am new and have just been trying out Vue.js with Graphql. After some learning, I went and scaffold a project with vue ui(vue cli 3), added vue-cli-plugin-apollo for both the client and server so my current project structure is as follow:
Project Folder
─┬── apollo-server (server folder)
├── node_modules
├── public
├─┬ src (client folder)
│ └┬─ assets
│ ├─ components
│ ├─ graphql
│ ├─ views
│ ├─ App.vue
│ ├─ main.js
│ ├─ router.js
│ ├─ store.js
│ └─ vue-apollo.js
├── .env
├── package.json
└── vue.config.js
Package.json
{
"name": "vue-apollo-graphql",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"apollo": "vue-cli-service apollo:watch --run \"vue-cli-service serve\"",
"apollo:run": "vue-cli-service apollo:run"
},
"dependencies": {
"graphql-import": "^0.7.1",
"graphql-type-json": "^0.2.1",
"lowdb": "^1.0.0",
"merge-graphql-schemas": "^1.5.8",
"mkdirp": "^0.5.1",
"shortid": "^2.2.8",
"vue": "^2.5.17",
"vue-apollo": "^3.0.0-beta.11",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-prettier": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-graphql": "^2.1.1",
"eslint-plugin-vue": "^5.0.0-0",
"graphql-tag": "^2.9.0",
"vue-cli-plugin-apollo": "^0.18.0",
"vue-template-compiler": "^2.5.17"
}
}
On local development, npm run apollo works for the the app in localhost:8080(client) & localhost:4000/graphql
So my question is: How do I deploy them together on heroku? I have tried searching through the web and information are fragmented and don't make much sense to me. Can anyone give a clearer direction to help me tackle this problem so I can learn and understand more about it.
I also ran into this issue, and this is how I've managed it to work.
Go to https://www.apollographql.com/docs/apollo-server/essentials/server.html#middleware and see the section "Middleware". They say that you can add an Apollo Server as a middleware to existing Express server. So, you should install the package apollo-server-express and import ApolloServer from it. Then start your Express server and Apollo Server will be on path-to-your-server/graphql.
Then you should build your Vue app and specify your path to GraphQL server as a link to your Heroku app plus /graphql (I did it through .env file).
Deploy to Heroku and that's all! It took me around 10 minutes.
Also, you can see my source code here
https://github.com/kravchenkoegor/fullstack-vue-graphql/blob/master/src/server.js