I am trying to make a React app created with react create app to do server side rendering.
The project uses es6 and imports, which node doesn't seem to support yet.
What would be an easy way to have the server side rendering "work"?
I've tried:
compiling the js using babel and running it with express JS
works, but I don't get the correct backtrace pointing to the source files, it points to the compiled file (maybe a sourcemap would help?)
running the server with express JS and changing imports to requires and removing class constants inside the class body to make it compatible with what node.js can run
running it with babel-node - sounds good, but I haven't been able to make this
work at all
Since there are multiple ways to go about it, I am wondering what is the best practice so I don't paint myself into a corner.
The project uses es6 and imports, which node doesn't seem to support
yet.
Can be solved with babel.
// index.js
require("babel-register");
require("./server");
// server.js
import express from 'express'
// ^^^ new-style import works :)
I don't remember having any problems with incorrect backtraces using babel this way.
Related
I am making a Electron app with Svelte and Typescript.
I started with this template for that exact purpose, but it disables node.js built-in imports (like fs) in the browser/electron frontend for security.
I do not need this improved security in my project, so I am trying to get node.js fs to work in the Electron browser.
I already modified the Electron Backend script that creates the Browser to re-enable nodeIntegration, and this works: using require("fs") in the Electron browser console logs the fs library.
Using this in the actual typescript frontend code does not work, however. From looking at the bundled JS, it seems like rollup is assuming that the import of fs is just available as a global variable, and trying to guess its name.
When building while importing fs and path, I get the following warnings:
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "path". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
fs (guessing 'fs')
path (guessing 'path')
The first warning suggests a 404 GitHub link that seems to be a polyfill for some Node built-in libraries. This isn't what I want, I want the real node.js fs library. It also informs me that I'm creating a browser bundle - I have tried setting the browser option of #rollup/plugin-node-resolve (used by the template) to false, but this did not help.
The second warning seems to simply inform that it's trying to guess global variable names - which it should not, it should keep the imports.
How do I allow importing Node.js modules here? The linked template project still closely resembles my current one.
Help is greatly appreciated.
Turns out that the deciding factor was the output.format of the rollup.config.js.
This was set to iife, which produced a result without require or import.
Changing it to cjs solves this problem.
This is the most basic question.
In every online example I see, to get a website running with NodeJS and React two seperate programs/servers are created. One runs on port 3000 and the other on 3001. Is this necessary?
If react is a frontend engine why does it have to run on a port or a server?
Im confused as to why they always use create-react-app which may be running on its own server im not sure.
I would like to create app.js import 'express' to handle requests and also import React on the same file, but I run into compilation errors, will this approach work?
Is this necessary?
No, this isn't ever necessary and is only typically done in development.
If react is a frontend engine why does it have to run on a port or a server?
Webpack (the thing typically bundling your React code for browser usage, similar tools are vite/snowpack) creates a server for live updates and errors so changes in your React automatically propagate to the UI.
This is only done during development and not in production. It's a convenience feature while developing the code.
I would like to create app.js import 'express' to handle requests and also import React on the same file, but I run into compilation errors, will this approach work?
Frontend code usually has a build step where you run npm run build which runs webpack --production over your code (or esbuild or other similar tools). After this point all your frontend code is typically static files (.js .html .css etc) from which point you just serve them from static file storage (usually a CDN for faster load times in different geographies).
I want to create a Vue app, so I started by using the Vue CLI to do so, but the app.js bundle is 1.2 MB before I've even really done anything. I'd like to bring that way down, as I really don't want/need all the stuff that is being bundled into that file.
Specifically, I would like to have a Vue app with Babel so I can transpile ES6, Webpack for bundling everything, and Sass for the CSS.
What's the easiest way to create a Vue project like this without all the bloat that occurs when I use the Vue CLI? And what I'm specifically looking for is instructions on how to install (I'm assuming just use npm) all of these things and then setting them up to work together, which is the part I'm stuck on.
I can set up Webpack by itself, and I can set up Vue by itself, but I don't know how to get Webpack to compile Vue files, and I don't know how to set up Babel to work with all of this and transpile everything. Thank you.
Following my previous question, I have followed webpack guidelines of using multiple targets to build my NPM package. https://webpack.js.org/concepts/targets/#multiple-targets
I now have two different output files, index.js which is the browser bundle and index.node.js which is obviously supposed to run on the backend.
The app should run on both browser and Node, the code is mostly reused but there is some big difference around accessing files etc. which means I do need two separate files depending on what platform should the app run.
My question is how should I publish this library in a way that user can consume it like import {//SOME OBJECT} from 'my-published-library' when they import it from NPM regardless if they are using it on the browser or in their node application? If I try that at the moment it always defaults to index.js which works in the browser but not in Node.
Not sure if this is what you're looking for but if you are installing for the browser, the package.json provides a field to set the entry point.
https://docs.npmjs.com/files/package.json#browser
In the React Starter Kit they bundle with Webpack the server-side code into a server.js which I assumed can be handy but then I started wondering why bundling up the server-side code in the first place, after all Node comes with its own dependency management and doesn't need that. Second, wouldn't that even make it more inefficient due to parsing one whole file?
React code usually got written in ES6 however the Node doesn't support the es6 code yet, it can only understand es5. so if you want to use it without bundling and all the code will get complied first on the go. which will affect the performance eventually so you can use it for the development purpose but in production it is advised to use the bundled code.
So the major reason is Performance