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
Related
I'm using 11ty to build a static website and I'd like to use Sass. To do this I've used eleventy-plugin-sass. It does compile the Sass code into a CSS file, but it copies the input hierarchy to the output.
For example, in my input folder I have the following hierarchy:
input/
_includes/
img/
posts/
src/
scss/
partials/
main.scss
and when I run npx #11ty/eleventy it compiles into this:
output/
img/
posts/
input/
src/
scss/
main.css
index.html
I would like to have something like
output/
img/
posts/
css/
main.css
index.html
Is this possible using eleventy-plugin-sass? If not, what would be another way to achieve this?
I just released a new version (1.1.0) of eleventy-plugin-sass and there you can customize the output directory with the new parameter outputDir
Check out these. I set up the package.json scripts based on that, and it works as expected, actually, I copy here my script due some minor changes/extensions:
https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty
https://mvolkmann.github.io/blog/eleventy/styling-with-sass/
{
"name": "eleventy-from-start",
"version": "0.0.0",
"description": "A simple Eleventy starter",
"scripts": {
"build": "npm run sass && eleventy",
"sass": "sass src/assets/css/main.scss:_site/assets/css/main.css --load-path=node_modules",
"serve": "npm-run-all sass --parallel watch:*",
"watch:eleventy": "eleventy --serve --port=4300",
"watch:sass": "npm run sass -- --watch"
},
....
Gist
I have a monorepo and I am using yarn workspaces and lerna to manage it. I had no issues with it until now. I need to know all the changed packages since the last release.
Issue
So I run lerna changed (docs), but this is what it returns:
info cli using local version of lerna
lerna notice cli v3.16.4
lerna info Looking for changed packages since v0.3.0
lerna info No changed packages found
Similarly, lerna doesn't find any packages when running lerna list (docs):
info cli using local version of lerna
lerna notice cli v3.16.4
lerna success found 0 packages
It seems like something is broken. But I can't find any issues in my setup.
Setup
File tree
├── lerna.json
├── package.json
├── packages
│ ├── enums
│ ├── event-sourcing
│ ├── models
│ └── utils
└── services
├── consumer
├── frontend
├── gateway
└── ideas
lerna.json
{
"packages": [
"packages/*",
"services/*"
],
"version": "0.3.0",
"useWorkspaces": "true"
}
package.json
{
"name": "cents-ideas",
"version": "0.0.0",
"workspaces": [
"packages/*",
"services/*"
],
"private": true,
"devDependencies": {
"lerna": "^3.16.4",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.0",
"typescript": "^3.6.2"
}
}
The entire repository is on GitHub, if you want to take a closer look at it.
The solution is very simple. As all my packages have a "private": true in their package.json files, I need to add the --all flag.
lerna changed --all
lerna list -all
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).
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');
I am building a project using SASS, CoffeeScript, Jade and Brunch. Everything works perfectly, except that my application.sass is not compiling.
Here is my brunch config.coffee
exports.config =
modules:
definition: false
wrapper: false
conventions:
assets: /^app\/views/
files:
javascripts: joinTo:
'app.js': /^app\/scripts\/.*/
'index.js': /^app\/scripts\/index\.coffee/
stylesheets: joinTo:
'app.css': /^app\/styles\/application\.sass/
my node package.json
{
"name": "disynr",
"version": "0.0.0",
"description": "Website builder",
"main": "public/index.html",
"devDependencies": {
"brunch": "^1.8.5",
"coffee-script-brunch": "^1.8.2",
"javascript-brunch": "^1.7.1",
"sass-brunch": "^1.8.11",
"watch": "^0.16.0"
},
"author": "Samadi van Koten",
"license": "MIT",
"dependencies": {
"jade": "^1.11.0"
}
}
Contents of application.sass
body
font-family: Helvetica,Arial,sans-serif
and the output from tree app
app
├── scripts
│ ├── _helpers.js
│ ├── helpers.coffee
│ └── index.coffee
├── styles
│ └── application.sass
└── views
├── head.jade
├── index.html
└── ui.jade
3 directories, 7 files
Output of brunch b -d 2>&1 | grep application:
Mon, 14 Sep 2015 20:32:31 GMT brunch:file-list Reading 'app/styles/application.sass'
Mon, 14 Sep 2015 20:32:31 GMT brunch:watch File 'app/styles/application.sass' received event 'add'
The file public/app.css which should be built by Brunch, does not exist after running brunch build or brunch watch.
I am using Mac OS X Yosemite. If any more information is required, please post a comment.
The sass-brunch plugin previously required the ruby gem to process the .sass syntax. Now that support has been added to libsass, the native extension sass compiler, sass-brunch v1.9+ does as well.
To resolve the issue:
npm install sass-brunch#1.9 --save