I'm trying to upload a directory with all the files and subdirectories to GCS. Can someone point me how to achieve this using NodeJS SDK ?
Sample directory structure:
project/
├── src
| ├── route.js
| └── hooks.js
├── pages
| ├── index.js
| └── login.js
└── components
└── Nav
├── nav.js
└── Nav.module.css
In the ssr vue (server side rendering for vuejs) documentation there's a code structure example containing a webpack build step:
https://ssr.vuejs.org/en/structure.html
The structure looks like this:
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # universal entry
├── entry-client.js # runs in browser only
└── entry-server.js # runs on server only
I am missing a main template(in rails or expressjs lingo a layout) which is supposed to contain the
<!--vue-ssr-outlet-->
marker.
Or am I missing something?
In SSR there is not a layouts folder. Your template (default) is in your App.vue file.
I'm using pugjs for my project.I was unable to load a css file in the pug template. I'm using the following code
index.pug
link(rel="stylesheet", href="views/styles/products.css", type="text/css")
This is my project structure
Express is not going to serve anything that you don't give permission to. You have to give permission by using express.static middleware.
Put your Static files in a folder then use the express.static middleware like this-
app.use(express.static(path.join(__dirname, 'public')));
For more details refer to https://expressjs.com/en/starter/static-files.html
My directory setup looks something like this:
.
├── app.js
├── bin
│ └── www
├── package.json
├── package-lock.json
├── public
│ ├── images
│ ├── css
│ │ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
And in the index.pug, we have to use:
html
head
title=homepage
link(rel='stylesheet', href='/views/dashboard/dashboard.css')
body
And in app.js add this line of code:
app.use(express.static(path.join(__dirname, 'public')));
I am new to Node.js application development with expressjs framework.
I created a skeleton with expressjs-generator.
This skeleton have following directories and files:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
After it: I use the following command to run this application.
set debug=myapp:* & start npm
Now this is successfully running at Port 3000
This shows the homepage with Express Welcome message.
I want to make change in Homepage of my application. How it can be possible?
You can do that by changing the index.jade as #brute_force mentioned. If you are not familiar with jade, you can also add a index.html in the public folder and update the index.html instead.
I'm building an application which require few front-end lib/frameworks such as:
jQuery
JQueryUI
AngularJS
Foundation
I'm using bower to download the components. At this moment my HTML looks like:
<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>
My goal is to make a grunt script which automatically takes the installed components, concat and minify them and output them as lib.js.
Questions:
With all my researches I figure out how to concat all files from a directory.
My goal here is to get the bower components and concat them without listing them one by one in the gruntfile. How I can archieve this?
Also Is it possible to make a custom jQuery UI build with just the modules I want instead of having the entire UI.
Thanks.
usemin is your friend here.
Install usemin, copy, concat and uglify:
npm install --save-dev grunt-usemin
npm install --save-dev grunt-contrib-copy
npm install --save-dev grunt-contrib-concat
npm install --save-dev grunt-contrib-uglify
Set up a build block in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usemin</title>
<!-- build:js lib.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/etc/etc.js"></script>
<!-- endbuild -->
</head>
<body>
<h1>usemin</h1>
</body>
</html>
Set up your Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: {
dist: {
files: [ {src: 'index.html', dest: 'dist/index.html'} ]
}
},
'useminPrepare': {
options: {
dest: 'dist'
},
html: 'index.html'
},
usemin: {
html: ['dist/index.html']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};
Run grunt
grunt
Results:
├── Gruntfile.js
├── components
│ ├── angular
│ │ └── angular.js
│ ├── etc
│ │ └── etc.js
│ └── jquery
│ └── jquery.js
├── dist
│ ├── index.html
│ └── lib.js
├── index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>usemin</title>
<script src="lib.js"></script>
</head>
<body>
<h1>usemin</h1>
</body>
</html>
"My goal here is to get the bower components and concat them without listing them one by one in the gruntfile"
You can take all javascript files from your dependencies directory and sub-directories, and have them concatenated that way:
grunt.config('concat.mydeps', {
files: [{
src: ['components/**/*.js'],
dest: 'dist/lib.js'
}]
})
... but if the order of script execution is important, this is a recipe for disaster :-).
Also, it's quite likely that these folder would contain minified and non minified versions, leading you to include some scripts twice...
A way to avoid that side effect would be in the line of:
grunt.config('concat.mydeps', {
files: [{
src: ['components/**/*.js', '!components/**/*min.js'],
dest: 'dist/lib.js'
}]
})
... but again, this is certainly not bulletproof - a given component may very well have a builded version, and a splitted source alongside.
IMHO, the only sane way out is to list explicitly the files you want aggregated, in the order you need (just like you do in your html for now).