How to prepare grunt to prepare dist folder with app.js? - javascript

I'm currently playing around with Yeoman Angular Fullstack Generator. That's pretty cool and works as expected. Since it uses grunt, it's possible to run grunt serve dist so that it starts the server with my uglified and concatenated files...
BUT:
Last week I found modulus.io (nodejs cloud hosting like heroku) and they were offering a free evaluation phase. Problem: They expect that my project has an app.js so they can start it with node app.js.
Question:
Do you guys know how can I use grunt to generate a dist folder just for modulus.io, including all contents of the already generated dist folder (currently just frontend code) + all needed server-side javascripts + an appropriate app.js (that uses express and the contents from the dist folders) and the package.json file?
Any help would be appreciated. :) I think a similar task must exist somewhere since you might have this problem on any other cloud hosting platform. Unfortunately I couldn't find a proper solution
Regards,
Sascha

In short, modulus.io is just looking for an entry-point into the application. It can be called whatever you like, so long as in your package.json file you have a line that tells it what to launch, ie. "main": "dist/app.js".
See: https://modulus.io/codex/projects/app-guidelines for more info.
The full stack generator that you are using should have generated all this for you however...?
EDIT: Running a simple grunt command will create a \dist directory that is ready to be uploaded.

Related

How to organize node,js/webpack project with server, client, and shared code?

This seems like a situation that must be incredibly common, but I've yet to find a good solution to it. I'm a little new to modern Javascript, so please forgive me (or better yet, correct me) if I'm using the wrong terminology here and there.
I'm developing a web application. It's got a server, running as Javascript (ES6, I believe - using import/export) in node.js, using express.js for a router (and built by express-cli). And it's got a client side, also Javascript, mostly Vue modules (and built by vue-cli). I admit I don't really understand a lot of the boilerplate build code express-cli and vue-cli emitted, but it does work. I am not using any of a long list of frameworks that are assumed in the many pages google found for me when I tried to find an answer to this question.
Obviously, the client and server will be sending data structures (instances of various classes) back and forth, which I know how to do. And these ought to be the same class definitions.
I made an attempt to make webpack build both server and client, and that failed, so now I've split the application into two projects, each with its own folder tree, its own package.json, its own node_modules, and I'm using just webpack-dev-server for the client and nodemon/babel for the server. A third folder contains the shared code, which is imported by the client and the server. I got this to work well enough for proof of concept, but getting both sides (and Visual Studio Code) to recognize that the shared code is part of them is turning out to be a challenge, and I'm pretty sure I'm just going down the wrong path.
So, my question is, what is currently considered the best practice (or at least, a good practice) way to structure and build a client/server application of this type? An ideal answer to this question would include both folder structure and enough of the major configuration files to help me figure out how to write mine. A reference to an up-to-date and reliable source of information on this topic would satisfy me nicely.
I suspect that the right answer includes merging everything back into a single project and doing something clever with the webpack config files and maybe project.json... but what exactly that clever thing might be has so far eluded me.
Thanks!
In my opinion, you're right to use separate folders for your node.js(server)/vue.js(client app) as they're effectively 2 separate projects.
Apart from sharing some configs, utilities and validation, the app and server typically have little overlap: they're typically doing 2 very different things, require different build tools, different runtime environments, have different security concerns, and if you consider the future possibility of leveraging your client codebase to create a native IOS/android... app the difference between the 2 codebases will only increase.
For my current project, I have a folder structure whereby my server resides in the project root and my client is in a subfolder /app. Here's an simplified outline of how I've structured my node.js/vue.js project:
constants
config.js (server environment, database connection, api keys etc)
settings.js (business logic)
pricing.js
drivers
auth.js
db-connect.js
email.js
sms.js
socket-io-server.js
models (mongoose database models)
node_modules
routes (express routes)
api.js
auth.js
schema (json schema for automated validation)
login-validation.js
register-validation.js
services
billing.js
validation.js
app (this is my client sub-project sharing some server modules)
public (the output of the webpack client bundle including index.html)
src (ES6 source code, images, SASS/Stylus, fonts etc)
css
html (handlebars templates)
index.hbs
home.hbs
account.hbs
pricing.hbs
img
js
api
client-services
socket-io-client.js
store.js
router.js
vuex-utils.js
dom-utils.js
components (Vue components)
Profile.vue
Payment.vue
index.js (root and entry point for webpack)
webpack.config.js
.env.development.js
.env.production.js
package.json
server.js (node.js server root entry point)
This is by no means prescriptive. Notice, that I've organized the project files largely by function. Here's a link to an article proposing structuring around features.
A shared (client/server) module folder has pros and cons. The main downside I can see is that module sharing changes during development. For that reason my server codebase and modules reside in the project root folder - and some are also imported by the client app. The project root folder then naturally hosts a shared package.json and node_modules folder.
As your app develops, and you gain insight, it's fine to re-structure as the need arises (some IDEs make refactoring easier than others). If the Visual Studio Code IDE or webpack are not working well with your folder structure, it may be a configuration issue or the problem may stem from incorrect require/import paths. IDE inspections may help you find those errors or your IDE may struggle to be useful because of those errors.
My IDE (webstorm) and webpack v4 have no problems with the above folder structure or the location of modules in general (I have re-structured my app in many different ways) and got more adept at optimally configuring my IDE and webpack.
Webpack is very specific about the location of it's configuration file, input/output paths, whether it is executed from the project root or /app folder and it can take a lot of time to get it working properly. Nevertheless, it will locate modules referenced by the correct require/import paths. Here's the part of my webpack.config.js that sets up file entry/output.
const sourcePath = './src';
module.exports = {
entry: [
sourcePath + '/js/index.js'
],
output: {
path: __dirname + '/public', //location of webpack output files
publicPath: '/', //address that browser will request the webpack files
filename: 'js/index.[contenthash].js', //output filename
chunkFilename: 'js/chunk.[contenthash].js' //chunk filename
},
...
I've located my webpack.config.js and execute webpack inside the /app subfolder. My package.json scripts section to start the node.js server and have webpack build & watch my app files is:
"scripts": {
"start": "if [$NODE_ENV == 'production']; then node server.js; else nodemon server.js; fi",
"build": "cd ./app; webpack;"
},
Which allows me to start the node server with:
> npm start
and have webpack watch/re-build my bundle with:
> npm run build
Visual Studio Code has a rich IntelliSense experience and a feature called Automatic Type Acquisition which should allow it to support modules you import regardless of their location. This article provides more information on configuring VS Code for node.js.

Where to place the front-end javascript files?

I am developing an express based web application and I started following the application skeleton built by express-generator.
Next, I added to my project webpack to bundle the client side assets.
Now I am not sure where to place the front-end javascript files, if in a /src or /app folder?
In truth, I am in a dilemma between, app.js, /lib, /src and /app folders.
According to express-generator, it creates an app.js file as the main entry and thus it looks a little bit strange to have an app folder with same name of the entry point app.js.
webpack usage manual suggests a /src folder to place javascript files. But I think /src should not be exclusively for front-end javascripts and on the other hand, I would not like to mix both server and front-end javascript files in same folder.
Moreover, the Accepted Answer to the question Folder structure for a Node.js project, contradicts the previous point because it states:
/src contains all your server-side specific CoffeeScript files
So, I think that maybe /src is not the better option to place front-end javscript files and according to the Accepted answer to the question Node.js project naming conventions for files & folders I would follow the proposed structure:
/app - front-end javascript files
/bin - helper scripts
/lib - back-end express files
But is it ok to have a folder /app and a file app.js with same name? Furthermore, /app is related with front-end and app.js with back-end.
I would suggest you to just rename your main file from app.js to index.js and keep the structure proposed in Node.js project naming conventions for files & folders:
/app - front-end javascript files
/bin - helper scripts
/lib - back-end express files
Thus, there is no more misleading between /app folder related to front-end and the index.js, which is the back-end entry point.
There isn't really a "required" structure for web apps, as Abdellah stated, it's usually best to just go with what you and your colleagues are comfortable with. However, because Node.js has a built in framework, you should probably use that. The move that makes the most sense to me is to rename the app.js file, and use the structure you stated.
I think public folder is rather common in web projects.
Since it's the destination of the generated bundle, i think you can name it more explicitly webApp or whatever you want. I think it's your call and there is no rigid/best practice here. Go with something you and your team are comfortable with.

Building front-end angular application using npm grunt

This is the first question i am asking, please excuse me if it is not clear.
i am also new to building an application, i am building angular js application using grunt.
my question is i have done build using grunt tasks like below. so now i have all minified css and java script files in my "build" folder. while deploying app("build") in server.
1) do i need to have all node modules in "build"
2) if yes how can i get into build
3) what exactly "build" or "dist" should contain?
grunt.registerTask('default', ['jshint','concat','ngAnnotate','uglify','htmlmin','copy','connect','watch']);
Grunt is a task runner which will make lots of your work very easy, like concatination, minification etc.
As a standard there will be three folder for this process
- build
- dist
- src
src: This folder will contain all your source files, this is where developers write code. Files in this folder will be organised for the easiness of development and to module structure.
We have to deploy our code to server which is concatenated, minified, annotated, etc. for better performance and various reasons specific to projects. Grunt task are used to convert the files in src folder to deployable code.
dist: This the folder where all the files which is the output of the grunt tasks resides. This is the folder which will go to the server.
build This folder will have all files which is used for grunt tasks resides. eg: grunt.js, package.json, node_modules, etc.
only dist folder will go to server. nothing else.
Node modules are just used by the development server and all the client side tooling etc. The build version will have something along the lines of scripts.js(your JavaScript files i.e the angular app) vendor.js(all the angular libraries) index.html and some css files.

VertX Webserver static content webroot

I've got two projects which I've created:
A web UI built using webpack
A Vert.x webserver written in java built using Gradle
I want to find a way to bring the resulting build dir contents of the first project into the second as the webroot which will be server up using the StaticHandler.
Is anyone aware of a clean way to do this? I want to preserve the two git projects as they are because I like using the webpack dev server for development of the UI and it generally feels cleaner to have them separated.
I was looking at potentially using the bitbucket pipelines build on my repo, however bringing the assets generated by the first project into the build of the second is where I'm facing issues.
You could create a gradle task that before that depends on the jar task (so it runs before it) executes webpack compile into the resources directory. So when your jar task runs it bundles the compiled webpack code.

What's the right way to integrate Grunt into a Spring/Gradle build?

I have a Spring Boot project that is built with Gradle. All my front-end code lives under src/main/resources/static. This also includes my bower_components, node_modules (for Grunt tasks), etc.
Right now, I have my main Gradle build script exec the Grunt build, which concatenates/minifies all my JavaScript, and they go under src/main/resources/static/dist. Then, when processResources gets executed in Gradle, the entire src/main/resources/static/dist gets copied to the build directory. This doesn't seem right to me - the only stuff that should end up in the build directory are the concatenated/minified JS, CSS, HTML and images.
I've searched high and low but haven't found any clear direction here. Is there a best practice for building a project in this way?
Files generated as part of the build shouldn't go into src, but somewhere under the build directory (say build/grunt). What's left is to include them in archives as necessary. For example:
war.dependsOn(grunt)
war {
from "build/grunt"
}
Or, if the Grunt task declares it outputs:
war {
from grunt
}

Categories

Resources