I'm new to using vite with react as a build tool. I usually use CRA and I only see a handful of requests in my network tab. With Vite there are hundreds. Is this normal and how does Vite work in regards to loading all these imports differently than Create React app.
In the example below this is just a small window of all the chunks its loading.
Example:
Related
I am learning MERN and starting of the backend section I learned that we have to enable ESM in package.JSON to use import and export but in building frontend with react nothing has to be done
React itself doesn't care.
Whether you do or don't need to configure anything depends on the tools you use for your frontend development.
Eg. create-react-app and Vite configure the bundlers they use to work with ESM, but if you start from scratch, with e.g. your own Webpack configuration, you'll need to figure out the configuration yourself.
This may be a dumb question, but is the default react app (created using npm create-react-app my-app) using node.js? I am confused because in my web development class at university, I had to download node.js to create react applications. However, I didn't have to do anything like creating a server or initiating a node.js file, which is described in w3school's node.js tutorial. Because of this, I found out that I don't even really know what node is used for, besides downloading packages like redux and whatnot.
create-react-app uses node.js for all of its dev tooling. Likewise, a lot of the tools you'll use in the React ecosystem (like webpack, prettier, npm), all run on top of node.js as well).
You'll most probably build your react app to a static file, in which case the production output will not require node.js, it will be html and javascript assets that can be served directly to a client.
Hope that helps! Let me know if you have other specific questions
Node.js is used for server-side while React.js is for the front-end part. So, no, you don't need Node.js.
Under development mode, yes. Create react app runs NodeJs with Webpack Dev Server to allow you get feedback when modifing files, start or stop the server.
I am following Ben Awad's wonderful tutorial to build a fullstack
app using Next.js, Express, Typescript, and GraphQL. Everything works smoothly locally, but I have run into a barrage of issues trying to deploy to Heroku. I would really like to deploy both server and client to Heroku as one app, and have Express serve the frontend files as well as be the backend.
monorepo
- web
- package.json
- server
- package.json
package.json
To my understanding, this is possible using Next's custom server option, which I have integrated in my server.js file. My problem is when deploying to Heroku, it doesn't detect React as a dependency for the backend so while the deploy succeeds, the app crashes when I try to access it in the browser. I have tried a few things to resolve this issue - having two copies of React in frontend and backend, respectively, only leads to more problems (understandably so). I have tried keeping one copy and using npm link to point to the module, but it only works locally. I've tried changing the webpack config as well but it doesn't seem to register. I tried defining the custom server as a util in the frontend and import it in server.js, but the import is always undefined, which makes sense so I moved it back.
I'm still new and have many misconceptions about how Next.js works, especially when coupled with a custom server, so I might be doing something fundamentally wrong. Is there anything I'm missing, or is it better to split the app into two Heroku apps and push one subtree into each?
The source code can be found here, but I will be probably rolling back because it has become very messy.
I know there are other ways to do this I just don't want to give up quite yet.
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 created a React app that uses Google's Material Design Polymer components with react-polymer. When running my app through the webpack-dev-server, all Polymer components are rendering properly.
But once I upload this to my Apache2 server on digitalocean, none of the components are rendering at all. I'm not receiving any network errors either of assets not being fetched. At first, I thought it was the mod_pagespeed that was stripping my styles and Polymer imports, but disabling it didn't help.
I've tried serving my site locally with a basic node.js server and again, the Polymer components aren't rendering.
I've also vulcanized my html file, embedding the imports right in. This same vulcanized file works successfully on my local webpack-dev-server, but again fails to render the polymer components on both my local node.js server and my Apache2 server on digitalocean.
What's so special about the webpack-dev-server that's allowing it the Polymer elements to render?
I'm sure I'm overlooking something extremely basic. Any help?
Dumb mistake. I figured out that webpack-dev-server was compiling everything to memory, but not to disk. I was running my older bundle.js file in all the other servers all along. Re-running webpack to recompile everything fixed the problem.
From the webpack-dev-server docs:
This modified bundle is served from memory at the relative path
specified in publicPath (see API). It will not be written to your
configured output directory. Where a bundle already exists at the same
URL path, the bundle in memory takes precedence (by default).