I am using Vue.js 3 for my front end, and Node/Express on the back-end. I am trying to enable server side rendering which is proving difficult.
I understand the client-side is built into a file called app.js. However I never see server.js being built and exported to the dist folder? Here are some examples:
vue-hackernews where there is an entry-client.js and entry-server.js file being provided to Webpack, but server.js is not anywhere to be seen.
Another question/answer also only provides main.server.js as the server entry file and does not build server.js.
It is my understanding that server.js is the back-end and has to run for Node.js/Express to work. In the above two examples what exactly is being built from the server entry files because it doesn't seem to be server.js where the Express routes live. Surely server.js must be built to the dist folder so that it can be accessed and run by a web server like Windows IIS for example (which I am using)?
You are correct, usually there is no need to bundle the server code.
But there are some benefits from doing so:
One project wide configuration, must of the client & server config can be shared - no need to maintain multiple build tools
Server code HMR (Hot Module Replacement)- you can swap your server code during dev without the need to restart the server
Code sharing between client & server
Code transpilation - server code can be written in modern syntax (ESM etc...) and it will be transpiled to the target node version.
Related
I developed full stack project for my client including next js (SSR) and express js as API. Now i want to deploy it on cpanel, how can I proper setup it to point at the main domain? I removed all files from public_html since i don't need them because my app is fully running on node.js environment and I actually don't have index.html file.
I'm attempting to build a simple react/node/express app from scratch (not using the create-react-app). I've built out a simple back end to pass some data to the front end but am having a hard time figuring out how the two communicate. How can I run the front-end and back-end together and view the front-end with the data passed into it?
I'd like to do this all in one command. Do I have to use a tool like webpack to bundle everything together into one runnable package?
My repo can be found here, it is the react-and-express branch that I've linked to. Any help is much appreciated! Currently I'm running the app by starting index.js but that is only the backend, how do I run my front-end App.js and get the two to communicate?
https://github.com/int-a/contacts-application/tree/react-and-express
You can use concurrently to run two node commands at the same time (1 for front-end and 1 for back-end). And then use the proxy configuration in webpack dev server to alias the calls to the backend port number for the same machine.
I would like to use ES6 Modules with Angular2 in an app that is served by Node.js and Express.js. However, when I try to load an Angular2/ES6 app in the browser, the following is printed in the FireFox console:
The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0
The problem seems to be the result of something missing from the build of the Angular2 app that is done by the Node.js/Express.js server that serves the Angular2 app.
Specifically, the problem emerged after I deleted the entire public app folder from this GitHub AngularJS 1.x sample app and replaced it with a copy of the entire client app folder from this GitHub Angular2 example app. When I then started the Express.js server with nodemon server.js and typed http : // localhost : 8080 into FireFox, the console printed out the errors shown above.
I would like to get the Angular2 app running in the browser so that I can then manually start stepping through the work of re-creating the Node.js routes and resolving other errors one by one in order to get the Angular2 app to work with the Node.js/Express.js server.
What specific changes need to be made so that these initial errors due to ES6 imports are resolved when this Angular2 app is placed inside the public folder of this Node.js/Express.js instance?
I just check out those two repos, and then do the same thing you mentioned above.
the problem is that the client folder of angular2 is written is ES6 syntax.
I don't think currently we can run this code on the browser without problem and
you can tell from the repo that it uses babel to compile the code
so if you want to use its client code, just make sure you also do the same
compile stuff as it does. I think everything should work
update
What I am trying to say is the angular repo use babel and gulp to help it
transpile the code from ES6 to ES5.
You can run gulp serve under angular2-esnext-starter and it will generate one
new folder called dist my screenshot
copy the client folder under that dist folder to node-todo and remember
rename it to public and you will see everything is ok.
so the hint is copy the gulpfile of angular2-esnext-starter and don't forget
to add more dependencies to your package.json should solve your problem.
my workable node-todo
I'm curious if anyone has developed a best practice for organizing Meteor applications that contain external shell scripts, or other back-end processes that happen outside of the node.js server code and the client side js code.
For instance, I have a meteor app that is structured like this:
project-name
client
lib
models
packages
public
server
I have a shell script that processes some external data sources, and a Python script that does some other heavy lifting. These all then help by inserting new data into the Mongo instance. Yes, I know that's a bit of a jumble, but so are the backend data systems. My question is should I put these sorts of projects within the meteor app folder, or should they live outside of the system? Just curious how others are structuring apps like this.
Option #1
project-name
client
...
server
data-processor.sh
other-utility.py
Option #2
project-name
client
...
private
data-processor.sh
other-utility.py
Option #3
bin
data-processor.sh
other-utility.py
meteor-project-name
client
...
private
You shouldn't put any non-meteor files inside your meteor project directory, all of those CAN be picked up by some package, even if standard meteor-platform packages don't recognize the extension. So putting them in the /server might cause problems in the future. The /private folder on the other hand is meant for resources used by your application, so placing the scripts there is unsemantic and inelegant.
To avoid moving those scripts outside of the project folder you can store them inside a hidden directory, that is any directory with name starting with a dot, i.e. /.scripts. Files placed there will not be picked up by Meteor application.
right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.