Two questions, all related to bundling. First server, then client.
Typically, I wrote my Express server code, using an app.js file to setup my express server, setup logging, routes, etc. I also ran tests against the functions associated with the routes.
When deploying my server code to AWS, I would push the code and a git hook would build the project by doing an npm install, run my task runner to bundle client files and to copy files to their dist directories.
For my client side code, I used to use browserfy, then moved to webpack to bundle all my client code to a single bundle or main.js.
I'm looking at using rollup now and appreciate its' ability for tree shaking.
As I'm now setting up a new project, I have a few questions/concerns:
Should I also bundle on the node/server-side? Is it more efficient for the server to run against an optimized, tree shaken, server bundle? Or once node interprets my unbundled app.js, it's pulled into memory along with all the require files and would run similar to the same bundled/tree shaken version.
I currently deploy code to an aws server via a git push. That push triggers a full build server side, moves client files to dist directories and starts the nginx and node servers. Should I instead run the build process locally and only push dist files to the server? Thinking about a CI/CD process, I'm thinking no... but it could happen... But is it worth it? Depends a lot on answer 1, and maybe some hybrid approach.
Maybe someone could outline their production deploy steps at a high level? I can also talk more on mine if interested.
Related
I have an Angular project with NodeJS backend. I am confused about how to deploy my project on a remote server? I decided to use webpack because of it's simplicity, so I ran the following command:
ng build --prod
And it made a folder called dist for me. I think I must copy the content of this folder into the public folder of my NodeJS backedn server, but I am not really sure if I do the right thing?
Should I change other configuration of my frontend or backend codes too? Or just copying dist folder into the server's public folder should solve everything?
You have a very good documentation guide by Angular: https://angular.io/guide/deployment
And yes, you should copy dist/yourproyect (Angular compiled to HTML+CSS+JavaScript+Assets) to any web server you want to deploy it.
For isolation purposes (and maybe configuration), I'd recommend to put front and back in different folders. But you can deploy it within NodeJS.
In short: A web server Apache/Nginx/IIS/GitHubPages/Firebase/etc for Angular and PM2 ( https://pm2.keymetrics.io/ ) to launch your NodeJS. But depending on your expected load, you may want to choose one server type or another.
Anyway, if you specifically want to serve Angular through NodeJS, I'd recommend this tutorial (2016, maybe bit outdated, but it will help): https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Seeking some ideas on how to better improve my teams local development workflow...
We have a Vue CLI shell application project that runs locally via node. Then we have a number of small Vue CLI web-component applications that served up via node.
When the shell is ran it reaches out to each web-component application retrieving a manifest.json file which tells the shell where/when to display the respective web-components.
Our web-component applications are built using something like...
vue-cli-service build --target wc --name foo 'src/components/*.vue'
Having to continuously build the web-component projects after making a code change... debug... and then rebuild again seems cumbersome. This is a new application so at the moment the codebase is in constant flux.
Was hoping someone may have suggestions on how or tools we might use to increase our productivity.
Don't overcomplicate things.
Here's Nuxt.js
As far as I can tell it does everything you want to do straight out of the box. Just set up a basic hello world project with Nuxt and see if it does everything you need it to do for you. It uses Vue.js and Webpack to build the exact same type of application you'd be developing otherwise with Vue, it just has a nicer layout and easier workflow in general. It supports hot reloading on file changes, you'd just run nuxt in the root folder of your project and a local server is started that hot reloads your project whenever you save changes to a file. You then distribute it either as a static application with nuxt generate or build it as a server side rendered application using nuxt build and nuxt start.
I've been working on building a video conferencing application by following this tutorial.
It's a great tutorial, and everything worked awesome when developing. However, when pushing to production I had issues and I'm not well-versed enough with these tools to figure out what's wrong.
I changed my NODE_ENV=PROD in my .env file. Which should trigger the production express build located here. (tutorial github link)
Next, I ran npm run build as I wanted to build my bundle.js, etc in the dist/ directory. I copied the three files from dist/,
bundle.js
common.js
index.html
Into my web server's directory, but now when visiting /token route, I get a 404. This doesn't happen on DEV, so it has to be something with the way the express server.js is written.
Unfortunately, I'm having trouble deducing what the issue is.
Environment details - I'm using a hostgator account, and copying files into the cpanel file manager. I've hosted lot's of JS applications like this before, but usually if I'm using a back-end it's a django server, so this (express) is new for me.
It is because express server is not running in your production environment. As express is used to build web server listening on specific port. In your case you have deployed the static files but the server is not running.
I have developed a node.js application and it is working fine locally.
Now, after that I deployed the application in Heroku I am getting some HTTP 404 errors in the browser console.
My understanding is that the reason for this issue is caused by the node package.json modules. In fact, the outer package.json is installed successfully but the node modules mentioned in the client folder is not installed.
Q: Any idea about what is necessary to modify (or to do) to make the client node modules as installed?
The image below depicts my folder structure.
Each time you push your code to Heroku, Heroku will look for the package.json file in the ROOT of your project. Heroku will then install those dependencies.
In your case, because you have multiple package.json files, Heroku isn't seeing the ones nested in sub-folders of your project.
The best option you have is to list all dependencies in your top-level package.json file. You could also create your own Heroku Buildpack to customize the Heroku deployment procedure, but I strongly recommend AGAINST doing this (it will be a nightmare to maintain over time).
Another option in your case (which might be good depending on how large your team is) would be to move your client-side code into it's own Git project, and have that deployed separately to a static hosting provider like Amazon S3, or something similar. This would then let you deploy your backend project directly to Heroku, while not having to worry about any front-end logic at all.
I have a Node.js Express app that I'm hosting on Nodejitsu. I'm already using env switches in Express for dev and prod, but obviously I'm going to need to push to different dev and prod servers.
For Nodejitsu, pushing to these servers requires a simple jitsu deploy, which looks to my package.json for app and domain/subdomain information.
I'm trying to think of the best way to handle the various pushes to dev and prod (and/r perhaps testing, staging, etc. in the future) given the package.json restriction. Clearly I would like to avoid maintaining several git repos, each with its own slightly different package.json.
What kind of workflow would be ideal for handling this?
We are't using Jitsu, but what we do is keep a couple of different version of the confs around in a confs folder. When we go to deploy our scripts copy the appropriate conf/package.json file in to the root dir.
You may be interested in this: https://github.com/nodejitsu/jitsu/issues/134
As Małecki points out in that issue, this can be done with npm scripts. You can have a few script setup in the package.json file(s) that do the appropriate pre-deploy work.