What are Reddit's favorite JavaScript Framework Apps?
Next.js
ExpressJS
Nest
Aurelia
mithril
DHTMLX
Webix UI
DevExtreme
Top Reddit reviews mentioning JavaScript Framework Apps:
In my sense, it is more "complete" than dead. It has everything they consider to be useful for the framework and more drastic changes will not be made because of the huge usage.
So many companies rely on it that it will get security patches, however, I would not expect any new big features anymore.
If you are searching for an alternative, I really like NestJS, it is less bare-bones and more opinionated than Express.
Yeh I can relate, FWIW it does get easier with practice. But 100% agree that we’ve sort created as many problems as we’ve solved with modern JS.
there is a pushback happening with some newer frameworks like Astro.build trying to simplify things.
For React, if you haven’t tried Next.js, definitely give it a go, plenty of helpful documentation that could smooth things out for you.
Install and use body-parser. var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({extended:true})); app.use(bodyParser.json()); // To accept data in the form of json.
If you have an input of:
<input placheolder="Select a number" name="userNumber" />
The data will come in the form of:
req.body; // All form data. req.body.userNumber; // The user number.
express documentation body parser You might want to watch the node.js series from the net ninja channel on youtube.
I mostly agree. I've said that the 3 best parts of angular are typescript, the di system, and rxjs. And ngModules by themselves are a bit annoying but they do multiple jobs and once you understand what you can do with them they aren't a terrible solution to a complicated problem.
There are some solutions to the library paralysis problem of react like next.js and I believe Uber recently released their framework that uses react as the renderer. But angular is still ahead a bit here I think because it's all designed together rather than developed separately and just glued together.
Personally though I disagree about jsx. Some things, like dynamic component layouts, are much simpler with jsx and in general I think it just feels nice to use.
But with the flexibility jsx brings it also brings the ability to overcomplicate templates as you are pointing out. It's a valid criticism where the best answer I have is "learn to not do that". It's not like people don't also write terrible angular components; it's just shifting the potential pain points.
I do agree that reacts biggest weakness is css. For a "view" library they certainly dropped the ball on one of the two fundamental parts of what a view is in a web browser.
I don't think the issue is that you are biting off too much. The issue is that you try to do too many new things at once.
Ditch prisma, ditch typescript and just try something simple.There is not reason why you shouldn't use mysql if that's what you are familiar with.either build a standalone API that will be consumed by your next.js app or skip this step and just do it in next.js https://nextjs.org/docs/api-routes/introduction
for connecting to the database use something like knex and play around... once you are comfortable with this ecosystem then add typescript and then aftewards add prisma or whatever you want
Dart runs on Google Cloud Run (which IMO will replace Cloud Functions potentially since it's better in almost every way). So you can already do this if you want.
Otherwise, it's pretty hard to compete with NodeJS with TypeScript for backend. The community is ENORMOUS and very mature. Every major organization produces a code library for their product for Node by default.
There is nothing stopping the Dart community from developing server-side dart, just not many people are doing it.
Someone could make a NestJS clone for Dart, but it would take a huge team a very long time to create it. And who would do that when they could just use NestJS since TypeScript and Dart have 95% the same syntax. NodeJS also has great performance these days.
Dart is used on the front end specifically because it compiles to native code for high performance in cross-platform apps. Google was able to fully control the ecosystem and their needs for this specific purpose with Dart.
So for the Google team to invest in optimizing compiling for backend server environments (maybe like how Rust does), we would need both Google to work really hard on yet another compile target, and a community of people to develop packages that can take advantage of that. Google doesn't really have a killer implementation for the backend (like they have Flutter for the frontend), so they don't really have a reason to do this.
I think it's possible, but Dart's community will have to be an order of magnitude larger to support that effort.
IMO, having to use two different languages is not a big deal especially if it's TS and Dart. Jumping between TypeScript and Dart is really nothing.
TY for v12 Next.js Team!.
Looks the the upgrade won't be hard due to small # of breaking changes (depending on projects but not for me ;p )
Time to enjoy the faster rebuild/refresh w/ Rush compiler.
Currently, not yet. Soon, yup.
The next big step in React seems to be Server Components where it's basically the component managing the data it needs on the server side (i.e. fetching) and delivers to the client only the code it needs (i.e. static DOM).
Next.js should naturally follow this path; maybe they'll address it during their conference happening on the 15th of June (https://nextjs.org/conf)
More info about React Server Components: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
That's awesome. Kudos to that wise manager ;-)
I've been on a few fast prototyping teams at my company, and with Angular, as one person I was able to develop web apps in a matter of weeks that the React team of 2-3 engineers would have taken months to do... while developing the backend in Node too.
Unfortunately the more established product at the company is written in React and the leaders want to consolidate around that.
As an aside I recently discovered NestJS and am loving it as a backend framework. It's basically a Node/Express framework that adopts a lot of the patterns from Angular. It rounds out the full stack very nicely.
Um, looks like reddit isn't displaying the 11 comments on this post. I'm sure somebody already recommended Express, which is not outdated and doesn't have too much needless stuff if you're looking to write a web server.
So Next runs on both the server side and the client side.
Anything that uses fs must be run on the server side because fs is the Node file-system module. Importing it creates the error because whenever you import code, you also import everything which that code imports... unless it doesn't exist, then you get errors like this.
Try moving whatever logic you're using to an API route and then calling that API from your client.
😳ty. All the pages are statically built with Next.js and the proposals page is using a cool feature called Incremental Static Regeneration so that once per hour, it will rebuild the page with the latest data from the READMEs instead of using the cached statically-built page: https://github.com/saadq/proposals.es/blob/main/src/pages/index.tsx#L30
I'm surprised this kind of data doesn't come up more. Load times and parsing times is something I've been harping on about for ages[1] but these days it feels like no one cares.
I'm using https://nestjs.com/ for APIs and their documentation states
>"Nest is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming)."
So yes, I'm kind of following OOP principles.
I'd recommend reading through the Next.js docs to better understand how you can use the framework. You can fetch data with client-side rendering and use Next.js as a single page app, just like Create React App. Then the question isn't "which framework is better?" but more so "which data fetching strategy makes the most sense for my use case?"
You're comparing the wrong things here, Rails is a framework that runs on top of Ruby. Node.js is not a framework, it is simply a thing that lets you run javascript outside a browser. The closest equivalent to Rails would be something like Express.js, or Koa.js , or Next.js.
Meteor is pretty stable from what I've seen.
Sails.js is a popular and stable Node framework. I haven't used it, but from what I've seen it's up to snuff. It doesn't come with out of the box testing, but it does have a section in its documentation about testing, and details the process for installing mocha and setting it up. It seems very straightforward.
NestJS is another Node framework that's newer than Sails (IIRC), but I much prefer it. It's takes inspiration from Angular, if you're familiar with that. Nest comes with a CLI for scaffolding projects quickly, and they also have their own testing packages that compliment it, making testing far more integrated than Sails does.
I prefer Nest, and I have a feeling that you might like it over Sails. Either way, what makes Sails or Nest or Meteor / Node or Rails good is what you're comfortable with. Both Node and Ruby on Rails are very capable of achieving what you'd like. There are pros and cons to each, and choosing what you are most comfortable with here will be the better choice for you.
If you're just looking to learn Node for the sake of learning, I suggest picking a framework and just trying it out.
Next.js is an opinionated framework for building React applications.
React, alone, is just a library. To make an typical react application, you need much more than React. You need Babel to transpile your JSX. You need webpack to bundle your code into packages a web browser can consume. You need plugins and a bunch of configuration to make things like CSS/SCSS work. If you are building a Single Page Application (SPA), you need some library to handle routing (e.g. react-router). If you want to marry data from a data source (e.g. a database) to create a site using static site generation (SSG), you need an engine that renders static pages from your React templates based on the data. And so on...
Next.js solves addresses all those things (and more) in an easy to use package. Of course there are other frameworks that also address those things (e.g. Create React App). One of the main differences with Next.js is that is also provides a backend runtime that supports server side rendering (SSR) which is much better for SEO as the initial response from the browser is a fully rendered page instead of a skeleton that gets filled out a half second later with content when React spins up.
Next.js also provides more interesting approaches than simple SSR like incremental static regeneration (ISR) which combine some of the best parts of SSR and SSG.
Finally, Next.js also provides a basic set of capabilities for exposing APIs from the backend (which might otherwise have been created separately with an Express.js backend).
The front page of https://nextjs.org/ has a pretty good section on "Why?". You can do all the things that Next.js enables without Next.js, but it will be a lot of work. Next.js lets you focus on your application instead of on plumbing.
Are you prepending your variables with NEXT_PUBLIC_ ? You’ll need to if you want to use them on the client.
They have a whole section about converting create-react-app to next, which is pretty awesome. This is probably helpful even for a general react app.
- You don't need to create a separate backend - you can use API Routes! If you already have an existing backend, you of course could just continue calling that. Next doesn't really care where your data is at :) Note the "custom server" in the docs is completely overriding the Next.js server, which is different than having your own Express server with an API that your Next.js app talks to.
- getInitialProps is an older API, which has been essentially replace by getStaticProps (static) and getServerSideProps (server-rendered) is most cases. There's still a few use cases, but the majority of the time, you should be using the other two. You can read more about it on the original announcement post: https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support
getStaticProps is only executed at build time, so whatever data is present when you do your deployment is what's going to be shown on the site.
You have two options to fetch new data with getStaticProps:
- Trigger a new deployment via a Deploy Hook
- Use incremental static regeneration.
My biggest draws to Mithril are the performance and how leightweight it is. I find myself not having to require any other libraries (other than Mithril) and my webpack config ends up being dead simple for most apps I end up writing. It comes with XHR and routing out of the box (no need for extra libraries). My typical app size, with static assets included, weigh in around 200k. I build a lot of "proof of concept" apps, visualizations and internal tools at work.
One of the biggest downsizes to Mithril is the lack of stackoverflow posts. Mithril's documentation is pretty decent, but sometimes I hit a wall. It'd be nice to bounce a question off somebody else using it. On the plus side, I've learned more about Mithril's internals.
This page really sold me on Mithril for my use cases: https://mithril.js.org/framework-comparison.html
getStaticProps technically is, the props get injected at build time, but the result is a static artifact. Using getServersideProps will make any page no longer static. Data is read from each request and used to build the HTML to respond with on each call.
Next is technically a Node.js framework that spins up a server that returns a page which includes React at each route. It also supports server-side logic in the form of API routes. A Next.js app requires a Node.js runtime, so on that hosting website it would fit under the 'Services' category.
If you're not using any dynamic features of next, you can use Next's Static Export API to have a static-only bundle that can just be uploaded to and served from a file system. I have not used it myself, but it seems like it may fit your use case.
This, in combination with the native internationalized routing capabilities of Next.js: https://nextjs.org/docs/advanced-features/i18n-routing
Having both of these should get you pretty far. Also, don't worry about none of the languages being English. Most translation related libraries don't assume anything about a "base" language so you should be fine.
It's very important to also read up on the "loaders" section of the next/image documentation (https://nextjs.org/docs/basic-features/image-optimization#loader). If you setup a loader, Next.js doesn't actually do the image processing itself, it just creates a URL with image dimensions and quality for your image service to handle.
In your case you assume that all customers benefit from seeing the post cover as a 500x500 image, and not scaled up or scaled down. But different devices need different images. Some might benefit from a 1000x1000 resolution image, some 250x250. Some might want webp as a format, some can't handle that and want jpg instead.
Next/image makes all these decisions for you and adds some cool stuff like lazy loading and "blur up" image loading. Things you'd all have to do yourself or with an external library if you don't use next/image.
So, I would first reevaluate whether your architecture for a custom image back end in S3 is actually the best option. Why not use an image CDN built for this, like Cloudinary, Imgix, etc. Or create your own custom next/image loader and use any image CDN with enough features to your liking?
Second: check if you're not making too many assumptions about the devices people will use to check your application. If you let go off these assumptions you might find that next/image is a very helpful tool to serve images exactly the way your visitors need it.
Good luck with your project! 👍
It looks like environment variables are what you’re looking for: https://nextjs.org/docs/basic-features/environment-variables
These allow you to set a constant in a config file then use them in your code. On production you set a different value for this variable. Vercel, for example, let’s you set these variables for each environment.
There are two kinds of Next.js env variables too - ones the client can see which are good when you need an API endpoint for the client to switch (which start with NEXT_) and server side only Env variables which are good for things the client should never see.
Using this approach you could set a API_ENDPOINT variable and use that with process.env.API_ENDPOINT in your server side props function. If you need to use this variable on the client side, you’ll switch it to NEXT_API_ENDPOINT and access it from both.
I typically have the pages folder (as is required) and a sibling folder called src. This folder is usually broken down into client and server folders, and from there I would have stuff like you mentioned, components, styles, utils, etc, in the client folder.
You can cut down on path lengths by aliasing paths. I usually at least create a mapping to my src folder, but you can get crazier.
> There’s no actual client-side rendering for pages.
This is incorrect, I think. The initial render happens on the server, but once the client code (JS files) has finished loading, the rendering happens on the client again (as in, route transitions happen on the client, as with usual React apps). This has an explanation: https://nextjs.org/docs/basic-features/pages
literally the first thing on the docs > Recommended: getStaticProps or getServerSideProps
> If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps.
> These new data fetching methods allow you to have a granular choice between static generation and server-side rendering. Learn more on the documentation for Pages and Data fetching:
I see a lot of people here rightly pointing out performance issues with this site, but (given the title of this post) are people implying that the choice of Next.Js is at fault?
If static HTML export (or at least some sort of document response caching) is being used, server side rendering wouldn't exist to slow anything down, so the only real Next.Js-related performance bottleneck (on initial load anyway) could be "re-hydrating" the SPA's state to match the pre-rendered page, which I would imagine wouldn't be too noticable or significant.
So surely the main issue is their particular implementation, right?
No, <code>get()</code> and <code>sendfile()</code> are not "nodejs functions"; they are only methods provided by the Express framework.
Therefore, there's no reason whatsoever to expect them to be treated like Built-in Nodejs functions.
The docs are a better place to look. Check out the getting started page. There's some code samples so you can see what it looks like. (They work fine on my chrome 48)
Aurelia is meant to be a "forward facing" angular competitor. It's from the same group of people who made durandal, including Rob Eisenberg, who was also member of the angular 2.0 team for a while. It encourages use of JSPM and ES6.
I haven't paid it much attention since IE8 support is off of the table and I'm more interested in the react/mithril/riot/vue way of doing things, with much less framework.
Not an expert, but you are doing great. What you need to do is style the output.
Something like TailwindCSS makes that a breeze.
https://nextjs.org/blog/markdown
Or you can check this out
https://www.pullrequest.com/blog/build-a-blog-with-nextjs-and-markdown/
Best of luck.
You have to be explicit in what paths are to be rendered with getStaticPaths, even for a dynamic route. If you don't have a finite number of options for the slug, then you won't be able to prerender. Docs: https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
To give a practical use-case for this, I built a site for a photographer recently. Several folders of images, varying numbers of images in each folder. I can use getStaticPaths to read each folder and create a path for each image. Each of these image pages is now prerendered and can be accessed via that slug now at the [slug] page.
I’d use a catch all route.
Let’s say you have a product page, pages/product.js.
This would get you mysite/product/some-product
To use a catch all route, rename product.js to […params].js and put the renamed file into a /product folder, like this: pages/product/[…params].js.
Now, you can add any amount of additional parameters to the URL and they’ll all be put into an array you can use on the product page.
For your request you would then use these URLs: - mysite/product/some-product - mysite/product/some-product/with-warranty - mysite/product/some-product/some-other-thing
Within product/[…params].js, you’ll now get an array like this from the router: - { “params”: [“some-product”] } - { “params”: [“some-product”, “with-warranty”] } - { “params”: [“some-product”, “some-other-thing”] }
For full documentation check out this page:
https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
I (and countless other devs I imagine) have tried this a few times and I think it's not as useful as it immediately appears. I'm not saying it's a bad idea or anything, but I am less enthusiastic because:
- not everyone will understand or want the technologies you choose to include
- there are many OK ways to set up a Django project, and not everyone will want the config style you choose
- you yourself may want to tweak something every time as you learn new things or develop new tastes, making your scaffolding less convenient
A lot of the work that a scaffolding tool, or any library really, needs to do is convince you that it's making all the right choices and that you can either understand the choices it made or those choices are abstracted away. create-react-app or nextjs come to mind as examples of this done really well. So it is possible, but I imagine it is also much, much more work than it seems to do this well.
Performance is a factor. By removing the need to download the js bundle before rendering and directly serving the HTML can mean the time to first paint is quicker, especially on a slower mobile connection.
​
The other motivation is SEO. Google has come a long way with processing javascript SPA however I've had problems in the past when data is loaded from an API. e.g. it may index the content contained within the js bundle but the posts loaded from a remote API may not be properly indexed.
Other applications also often rely on meta tags, e.g. Open Graph, Twitter Cards, etc. That often don't have support for SPA's.
Depending on your stack, for React projects https://nextjs.org is great option IMO.
Here's a fun test for you - run a GET request on '/employees/delete/employee/id' - you'll see that the GET "/" route in your router is called.
You've got duplication in how you're using your router. You can just declare app.use("/employees", router) and all of your routes starting with "/employee" will be handled by your router. All of your other "app.use()" statements are redundant and will cause unintended issues.
You should rename your router to something more descriptive, like employeeRouter. Then for each resource you have, you should have an appropriately named router that your app uses to manage said resource.
I really recommend reviewing the Express docs on routing. If you've only got four routes, having an separate file for routing is a little overkill. You should really only modularize if you need to.
You can do with body-parser middleware. http://expressjs.com/en/resources/middleware/body-parser.html A lot of things you can do with middlewares. http://expressjs.com/en/guide/using-middleware.html#middleware.router
> express has a lot, restify has a couple, the rest, not much
I think you answered your own question about "preferred frameworks." Express has tons of examples, tutorials, and over 16000 related packages on NPM.
There are several major versions of express, so see what version the tutorial is teaching before reading it. For example, the current version is express 4. An express 3 tutorial might have things in it that are wrong or no longer relevant in express 4.
The docs on expressjs.com are pretty good, so I'd start there.
NodeJS is essentially a javascript based runtime. It's whatever you want it to be. It can be used as web server (like http://expressjs.com/), or even an automation tool (like http://gruntjs.com/). People who are strong with javascript will like it. It's quite handle to do quick jobs or create a running a prototype in a hurry. Setup and learning curve is quite easy if you already know javascript. I have never used it in production environment however.
You are correct, backbone doesn't have a built in way to communicate with the database. But it does have a mechanism to perform updates by easily serializing the data and passing it to the server via an ajax call.
If you're building a web app, node alone might require a little bit of work. Since you have to write a lot of the web framework plumbing yourself (node is more of a low level thing). However, you can use Express.js which takes care of all that for you. http://expressjs.com/
Yes. As simply as installing the app (and prereqs like Node.js) on any linux VM and running:
next buildnext start
This can quite easily be in a docker container as well. There are many many places you could choose to host this way. Many places (I have tried both Azure and DigitalOcean) have app platforms that you can just point at your repo and they will detect that it's a node.js app and build the docker image for you every time you commit.
If you want serverless, the choices are reduced but there are still several. AWS Amplify does it, Netlify does it. I expect there are others, but those are the two I see most often. You can also roll your own if you want, it's just more work than the next start option above.
See for more details on both the Node.js and Docker options in the official docs here: https://nextjs.org/docs/deployment#other-hosting-options
Save yourself the headache and try Aurelia. It wont save you from the flaws of the js ecosystem but is much easier to learn and is managed and released in a more professional way.
That's ok to do that your first 5 years, get an idea of what you enjoy and what you don't. BUt after that (and as soon as you know) I would focus.
I focus strictly on HTML5, CSS3, JavaScript. I learn the modern frameworks like Angular, Aurelia, Backbone, Ember.
Being skilled in Front end development can pay pretty handsomely.
As does backend as well. For backend I would focus on Node.js (learn ES6/javascript) and a document database like Mongo+mongoose or Rethinkdb+Koajs.
The MEAN stack has been pretty popular, but as new versions of frameworks (angular, aurelia.io, etc.) start to leverage ES6 using Babel transpilers, MEAN is not the 100 gorilla anymore, at least not for long.
There's also Meteor if you want a working app in a matter of minutes. Its very similar to other frameworks on the front-end and is pure javascript on both the server side and client side.
I have played with all of this crap :)
I like to stick with what I think will keep me employed for the next 5 years and I still think it's javascript/es6 and node/angular or one of the next generation frameworks on the rise. I like http://aurelia.io, KOA, and RethinkDB right now, doing a prototype in it to see if its something I want to focus on -- I think these jobs are still a year out or so.
I tend to only work officially on Front-end though, as I've found working up and down the stack can be very taxing on my soul especially under pressure and working w/ people who know it 10x better than you can be frustrating. I only do fullstack on my own projects, that way I can work at my own pace and not feel the need to slam some half-assed shit together at the last minute to meet a sprint deadline.
it's always a good idea to look what companies search for in your area.
knowing express and node will come in handy in a lot of situations including daily frontend business.
Big cooperations often use Java (spring) and .Net core. Both are good places to start.
For Node: NestJs ist probably the best batteries included framework in the node ecosystem.
Because Node itself has a low level API, developers have to set the software architecture themselves, and it requires a strong rigor.
JavaScript not having such things as private properties doesn't help to build something SOLID.
Also, because JavaScript was a front-end only language, many front-end only developers went into back-end without having engineer knowledge, then they started building things without using proper patterns.
It's, IMO, why we can see so many Node libs with a "hacky" API.
I'm not saying all front-end developers are "hackers" instead of "engineers", but there were many.
The actual trend is reversing that. Mainly because projects like Angular.
Then, we finally have projects like NestJS !
I waited for so long.
Is there a reason you can't use the NextJS dynamic ?
​
https://nextjs.org/docs/advanced-features/dynamic-import
​
Might have better luck.
NextJS is a framework that includes a react based front end and a node based backend, so no real need to have a separate node backend.
You might be looking for this:
https://nextjs.org/docs/advanced-features/custom-server
Where you can override or extend the built-in backend of NextJS
Nope, that's pretty much it. From the docs:
>Prefetch the page in the background. Defaults to true. Any <Link /> that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing prefetch={false}. When prefetch is set to false, prefetching will still occur on hover. Pages using Static Generation will preload JSON files with the data for faster page transitions. Prefetching is only enabled in production.
It's worth noting that what is being prefetched is the props for that page, it's not fetching images or anything - so usually each prefetch is a handful of kB.
They're also cancelled if the user initiates another navigation I believe.
Also, if you are completely new to NextJS you might find this walkthrough helpful. It's not too long and walks you through the main parts of a Next app:
Oh, I’m in the same boat! Made a quick QR generator project for work using Next.js, but I didn’t explore many of the features and didn’t delve into data fetching on that one. I’m currently working on a portfolio built with Next, feeding data from a separate server running Strapi for the backend.
Here’s the Next.js docs on data fetching: https://nextjs.org/docs/basic-features/data-fetching
I’d keep the axios bit in there as it will be valuable for the employers not using next.js, but just so you’re aware for the next project :)
P.s I’d also recommend looking into something like Storybook that lets you separate your component logic from the pages, enabling you to create a single source of truth complete with docs on each component.
It may seem wrong, but what you are experiencing is simply how Next-js currently functions. They mention it under 'caveats' at the bottom of this page: https://nextjs.org/docs/advanced-features/automatic-static-optimization
Simply stated: if u add getInitialProps to _app, and actually need live data on each page, forget about static page generation. It would be nice if they added this functionality in the future, but it would somehow devaluate the use of static generation if some data on the page should still be fetched and the DOM rerendered.
For now: u could just use getInitialProps on the about.js page, disabling static generation all together. (Im still waiting for a way to use getServerSideprops on app.js)
It is, next has naturally a server that is used when calling getInitialProps in server side rendering or with the api routes, that I think it is the case you are looking for. Check https://nextjs.org/docs/api-routes/introduction
Do you have React experience? If so, I recommend just going with Vercel's own starter tutorial https://nextjs.org/learn/basics/create-nextjs-app
If you are new to frontend and/or React, I recommend starting there before tackling Next.
Like the other comment says, you do them as two separate projects. I personally prefer putting another app in a subpath instead of a subdomain though:
I think you're talking about getStaticProps and getStaticPaths in next.js. Here
OP, Do take a look at them, because they serve the exact purpose you're trying to solve and even have a bunch of examples to fiddle with.
You are correct – Next.js is server-side rendered (SSR) out of the box. During the compilation process, Next will look to see if your page uses getInitialProps or getServerSideProps. If it does, that page will be SSR. If it does not, it will render as static HTML. This is referred to as "static pre-rendering" and it's an optimization of Next.js.
Depending on the type of application you're building, a completely static site might have better performance than SSR. This is why Next.js 9.3 added getStaticProps and getStaticPaths to make it a complete static-site generator (SSG). This is discussed a bit further in their data fetching documentation. Static sites have many benefits:
- Globally scalable
- Save money hosting static files
- Faster performance by serving cached assets from a CDN
- No need to worry about server or database vulnerabilities
- Better developer experience – no complicated deployment process
If you want a tangible example, I just wrote a tutorial on Next.js 9.3. Happy to answer any other questions. Either SSR or SSG will be good choices for improved SEO over a client-side rendered (CSR) application.
Just to be clear what is collected is completely anonymous:
- No IP addresses are stored and your project is not identifiable in any way
- It's only enabled during development and build time, never during production
- Only plugins from a whitelist are tracked (for example @zeit/next-css, @zeit/next-sass and the likes) this helps us in deciding which features to develop or spend more time on
- The CLI gives a clear message when booting up for the first time in a project that telemetry is enabled and links to the telemetry page if you require more information.
Furthermore telemetry itself is now extremely common in large projects, including massively popular ones like VS Code.
Unlike these projects, Next.js does not track stacktraces which could include sensitive information.
Security, compliance, and transparency were top priorities in rolling this feature out, and a big motivation behind writing the blog post and making the twitter announcement.
From express api:
http://expressjs.com/en/api.html#res.cookie
res.cookie('name', 'tobi', { domain: '.example.com', path: '/admin', secure: true });
res.cookie('rememberme', '1', { expires: new Date(Date.now() + 900000), httpOnly: true });
Hi OP. Use a web framework like NextJS. This is the kind of problem frameworks are built for. What you're looking for specifically is dynamic routing (NextJS example), but you need to start at the beginning and learn your framework from the ground up.
Alternatively if you prefer other languages, there are many frameworks available to you.
- C# - use Asp.net
- Python - use Flask or DJango
- PHP - use Laravel, Drupal, or WordPress.
- Ruby - use Rails
- Java - use Spring
- JavaScript - use Nextjs (React), NuxtJS (Vue), Svelte Kit (Svelte), or Angular
- JavaScript - also you can use Express or Koa, and pair either with a template engine.
- Rust - use Rocket
- Deno - use Oak
- GO - use Gin
- Elixir - use Phoenix
There's too many to list, but they're all designed to do in their own way exactly what you're asking for. NextJS is really what you should use right now though. React / NextJS is a very high demand skill set right now, and is growing like crazy. If you become competent at it you can land a very well paid job at a multitude of companies.
Best of luck!
You could use a NextJS rewrite: https://nextjs.org/docs/api-reference/next.config.js/rewrites
You could add something like:
async rewrites() {
return [
{
source: '/products/lenovo12T:opt*',
destination: '/product',
},
];
},
This would render the /product page for /products/lenovo12T and anything else after the 12T (like -with-warranty or whatever).
You can then read the opt param in the page component to see if it says "-with-warranty" or whatever you want.
i suggest you to use a template engine like pug.js
here is the documentation from express : template engines in express
I guess it depends.
Compared to React, Hyperdom:
- does not require any state management beyond regular javascript
- is fast
- has a built-in router
- has input bindings
- has a small, concise API
- is 9k gzipped
As for Mithril, there is a great write up that goes into a detailed comparison on their website, but one thing stood out for me personally - and it's true for both frameworks - it's pragmatic. There is just not much to it. There is just not much to building SPAs as React might make you think.
On the other hand, React has a massive community and a whole lot of complimentary projects that solve all sorts of problems - I am thinking of styled components for instance - and so perhaps, from that point of view, React is rather pragmatic.
Was this a learning project for you? Is this basically just a rehash of Mithril.js, because that's what it looks like? Mithril aside, you can already do this with React SSR, or EJS, or any of the multitudes of other templating engines
Personally I prefer Mithril for projects of any size, but it's especially well-suited to small projects. It doesn't require any build tooling, you don't need to learn a custom template language, doesn't require fancy redux libraries to wire up redraws. It does include http request and router libs all in a single 8k gzipped script. It also comes with a tiny, optional streams library to help work with async data.
It is never a good idea to connect directly to your database from the front end...
If you mean connecting to your NodeJS server, then I suggest using a framework like Express or Restify on your server to serve up the data to your client using REST.
Aurelia has two libraries for handling REST on the front end, aurelia-http-client and aurelia-fetch-client.
Both of which have documentation found here
Hope that helps.
That's not true at all.
In your getting started guide, you have both inline javascript (to initialize jspm in index.html) and a custom event handler with inline javascript (in app.html, there's a <form submit.trigger="submit()">). It later interpolates even more js code, e.g. <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
How's that not putting javascript in html?
I've just recently moved to Aurelia, which is a ES6/7 Javascript framework that is a lot like Angular 2. The difference between the two is that Aurelia follows Javascript standards, like <p>${firstname}</p> (used in template strings) while Angular 2 has derived quite a bit and still uses {{firstname}}. Additionally, Aurelias repaint is a lot more efficient than Angulars and Aurelia is more developer friendly, although there are parts of the documentation that needs some work. I used to work with Angular 1.x so you could say I'm biased in Angular 2's favor, which shows how good Aurelia really is. Both are in public beta.
In conjunction with Aurelia I'm using Meteor which runs on Node.js. Automatic data sync (Reactivity) & isomorphic code (code that runs on both client & server). It has a lot of features like client-side MongoDB, super simple Cordova integration to deploy to iOS & Android, hot code push (automatically update client with new code when re-deployed, even native users so they don't need to update their app on the app store) & much much more.
For those who dislike MongoDB there's even support for Redis, Neo4j, PostgreSQL, and others.
> check out aurelia.io if you aren't familiar.
If we aren't familiar, how could we answer your question?
What's your experience, have you used any other MV* frameworks before (Angular, Backbone, Meteor, Ember, Etc.)
In general, http://PluralSight.com is the best at what you're looking for. Though I don't know if they cover this specific framework just yet. May have better luck just looking on YouTube.
Thank you for the great feedback!
Full disclosure - I am a huge TypeScript fan and will happily go on and on about the advantages of TS over JS :D. But for this answer I'll stick to the specific advantages in the context of building a Vendure app.
So Vendure is built on top of NestJS, which itself is a TypeScript-based node framework. Both Nest and Vendure make heavy use of typescript features such as decorators. So Vendure is very much aimed primarily at TypeScript, and while you certainly can use JS, it is much clunkier to eg. do the decorators stuff without TS. So I would recommend against it. I guess the main "pro" of JS is that there is no new stuff to learn, and the build pipeline has one fewer steps.
So to your second question - I got into TS about 5 years ago and I'm not sure what the latest best learning resources are. A friend of mine published this book: TypeScript in 50 Lessons, which I've not read but I've heard a lot of good things about.
I agree -- the /api pages are really nice if your back-end layer is fairly limited in scope because you get to live the dream of a single full-stack project.
If you compare Next's API routes to something like NestJS (the back-end framework that sounds the same but is totally different) it offers quite a bit of flexibility at the expense of additional code and a separate back-end to deploy and maintain.
Some of the advantages are:
- A wider selection of databases, (since Next API routes are serverless)
- Built-in middleware (you can create an authenticate middleware that runs on every route, versus remembering to authenticate on each API page route.)
- More flexible routing paired with specific HTTP verbs
- Additional freedom to go for GraphQL, sockets, message queues, etc.
- Potentially easier paths to integration/E2E testing with seeds, etc.
Disadvantages:
- You're running a separate repo or managing a monorepo
- You need to connect Next with your dedicated API, both in development and production
- Handing session/authentication in SSR and client-side is potentially cumbersome; some optimizations like using your ORM directly in SSR become unavailable
- Your costs are likely to increase for low-traffic sites
So, I think if I were building a scope-limited project that doesn't have really cumbersome server-side requirements, I'd go with the NextJS API routes, but if I were building a large (or potentially large) project where the structure and consistency of something like NestJS (or a well-designed Express app) starts to be more helpful, I'd elect to build a standalone back-end app instead.
You can do that by using catch-all-routes and splitting your string into an array. Example code:
export default function DayPage({ food }) { return <div>{food}</div>; }
export function getStaticPaths() { return { paths: [{ params: { food: ["food 12", "3 4"] } }], fallback: true }; }
export function getStaticProps(ctx) { return { props: { food: ctx.params.food } }; }
Hey folks, Vercel's CEO here. We actively deal with problematic ISPs throughout the world on a regular basis. Our priority is to preserve access to everyone, everywhere, commensurate with local laws and regulations.
In some cases, ISPs are actively inhibiting a large part of the internet by taking an outdated and flawed approach to trying to protect their users. With the rise of privacy-preserving services like Apple's Private Relay, the idea of a single IP representing millions of users will only become more common.
We're taking action to get the IPs off that list right away. Whoever put the IP on that list, and the ISP that downloaded it, is punishing both "nextjs.org" which you use every day, and some other deploy in the same motion. We have a team on call 24x7 when abuse gets reported and it's handled appropriately, so this IP block ends up being completely unnecessary.
(Our Enterprise tier offers dedicated IP pools, but millions of subdomains and domains of our platforms can't each get their own. We must keep all of them online.)
I wouldn’t use redux for that use. You can do auth checks using next-auth and load the server side props to have them ready but only show them if the user is logged in. Or you can even use context to pass the global logged in variable.
Here is a few examples:
https://nextjs.org/docs/authentication
https://link.medium.com/LzpDNyFY1ib (this one uses context for state)
As a practice I use hooks -> context -> useReducer (which is still a hook) -> lastly Redux.. in that order..
I feel like too much state adds more complexity than necessary, plus added weight to your project which can hamper any performance gains you are looking to achieve.
Nextjs doc is both well-written and really easy to use. https://nextjs.org/docs/basic-features/data-fetching I highly suggest you rely on it, unlike most doc, you'll often only need this one to build your app.
Their example of getstaticprops uses data fetching to initialize components. However, it happens at build time.
I'm not using redux (as someone wiser than me said : "don't use redux until you really need it", and I've never needed it despite having a moderate size project), but the most likely answer is you should pass initial, raw data using getstaticprops, and then do redux stuff in useEffect hooks accessing the data returned by getstaticprops using props.
getstaticprops is happening at build time, so it doesn't have access to the component state of the page displayed in the user's browser. Again, I don't know redux.
It's tough being more specific without more info on what you're trying to achieve.
One final word of advice : tackling for nextjs and redux at the same time is probably a tough cookie. Try to get a grasp on nextjs and react first, then decide if you need redux or not. The answer is probably you don't need it.
Yes. Running the start script will start up a node server.
If you really wanted to you can even customize this node server, see https://nextjs.org/docs/advanced-features/custom-server. In which case end up with a server.js file and just run it like you would a server script with express. Next just hides that bit from you.
Hey u/Stackerito! I'm Delba from Vercel.
If you want to extend the Babel config, for example, by using "next/core-web-vitals", you have to set "next/babel" as your .babelrc file will be considered the source of truth and you'll need to explicitly define the next preset. There's more information on the Next.js docs here. You've configured it correctly and using an array for the "preset" option is a commonly used Babel convention.
For question 2, were you getting the error with or without "extends": "next/core-web-vitals" option?
What is your aim with adding the suffix?
If its just visual in the url bar, then you could make use of rewrites, either in nextjs or in your server (nginx, apache, etc)
https://nextjs.org/docs/api-reference/next.config.js/rewrites
I’d say use next image even still. Yes the file size and resolution optimization is moot but next image does a lot more than that, including lazy loading, blur/placeholder values, preloading high priority images, and more. It’s painless to use so why not? check the docs for more info
make a new directory called store and add a pants.js page in it. But you will probably want to do some like store/[category].js though. Check out the docs on dynamic routes
So next.js recommend to use Api Routes to reverse proxy back-end(go, laravel),
then to consume inside SSR they provide Data Fetching this basically fetch data then throw the result as props
Quick note on this: as I understand, your CSS file needs to be named [component].module.css in order for it to be parsed as a CSS module when importing it into your component file.
React apps can be deployed to pretty much anything, an S3 bucket for example. There's no "backend", you're just serving static files.
You can export static HTML from Next, but it does limit some of the features you can use.
If you're using a "standard" deploy of Next, you'll need to run it on a host that has node.js.
Not a big downside, but you should be aware of it.
Next can build static, just like gatsby. But again, if the SEO is coming async, google, link previews in iMessage, etc won’t like that.
I don’t know your serverless function, but it should be pretty cheap to serve this information and use nextjs getServerSideProps
https://nextjs.org/docs/basic-features/pages
With what your looking for the dream is incremental builds (single pages built by Netlify)
Page specific: The serverless target will output a single lambda per page. This file is completely standalone and does not require any dependencies to run:
pages/index.js => .next/serverless/pages/index.js
pages/about.js => .next/serverless/pages/about.js
You can do it, but here it is not necessary as you already have everything needed to render the script tag during build time. Your approach is good if you don't know i.e. the URL if the script only after fetching it from somewhere.
In Next.js stuff is added to the head like it is explained here: https://nextjs.org/docs/api-reference/next/head
I can’t share the exact code with you but NextJs recently released an example site and repository for a headless site connected with BigCommerce which is pretty close in implementation and a good starting point to see how they handle the basic store logic such as cart management, dynamic routing, checkout flow etc.
Take a look at this https://nextjs.org/commerce
And here is the example front end repo https://github.com/vercel/commerce
Next is a good choice as you can statically generate the majority of your pages and move a lot of your dynamic integration related stuff into their API folder which generates as lambda functions meaning you can keep a lot of the server side interaction, secrets etc out of the front end app that gets sent to the client
Well, no he has a point. Meteor is trying to sell itself to new people - not current users. So the meteor homepage is targeting who? A CEO? A Graphic Designer? Accounting? HR? or the developer?
If they are targeting the developer then they should at least answer a couple important questions or include a basic summary of the system.
> Meteor is an open source platform for web, mobile, and desktop.
...that enables you to prototype quickly and provides SSR, instant push updates, and magic unicorns. Meteor handles routing, isomorphic components, database migrations, and other tasks for you so you can focus on your application. (I'm not sure about all this, just guessing).
Compare Meteor with https://nextjs.org/ which does a much better job explaining it's useful ness.
- Server Rendering React
- Styled-jsx included
- Zero Setup
- Automatic code splitting
- filesystem based routing
- hot code reloading
- universal rendering.
- Fully Extensible
- Complete control over Babel and Webpack.
- Customizable server, routing and next-plugins.
- Ready for Production
This is a bit pedantic, but non-JWT cookie sessions like Express's cookie-session are also signed server-side, so you can be sure that the user hasn't changed the value (unless they've stolen your key.) That's the same as with JWTs.
What's neat about JWTs is that an end-user can read the information even if they don't have the signature key. Unfortunately, when you lock JWTs behind httpOnly cookies (which you should!) your end-user can't read the information after all.
You want to build an API endpoint. Something like
app.get('/myEndpoint', (req, res) => { res.json(rows); });
For specifics you probably want to take a look at Express: http://expressjs.com/
Great question! Indeed, Nginx can serve static files just like Node JS. At first glance it may seem redundant, but there’s more to the picture.
Nginx has a lot of optimizations to serve those static files and respond to web requests more quickly. More on this point here: https://stackoverflow.com/questions/9967887/node-js-itself-or-nginx-frontend-for-serving-static-files
Nginx also provides a world of flexibility via simple configuration files. Nginx can act as a reverse proxy, to redirect http requests to other servers/ports/microservices/etc. Setting this up is simple as altering a configuration file and allows many rule based routing configurations (like based on url path, port, etc). Nginx also helps with load balancing, so if you have all requests first hit Nginx, it can then redirect requests to other servers using a variety of strategies (round robin which just takes turns sending the next request to a different server, weighted average which allows you to specify what % of all requests each redirected server gets, etc.)
Express documentation even recommends letting Nginx handle static files, leaving your Node Js code to handle dynamic API requests.
http://expressjs.com/en/advanced/best-practice-performance.html#proxy
All this is not to say Express/Node JS is bad for serving static files, it is fine, but Nginx is considered a best practice.
A few things wrong with this --
Passing anything to next invokes the error handler. Seems you have the error handler with user as first parameter -- so while this "works" it probably isn't what you want.
Assuming the following middleware --
const middleware = (req, res, next) => { if (req.user) { console.log('we have a user!') else { console.log('no user here') next() }
There's a few ways to attach middleware --
// global, applied to all routes app.use(middleware)
// or via a router const router = new Router()
// can be applied globally to the router. note that you must attach the router to app or another router via a prefix, or it'll be applied to all routes at that path level router.use(middleware)
// for a specified route router.get('/path', middleware, (req, res, next) => {})
// you can also do above on the app level app.get('/other-path', middleware, (req, res, next) => {})
// (always make sure you attach router with a prefix) app.use('/prefix', router)
Take a look at the docs http://expressjs.com/en/guide/using-middleware.html
There's nothing wrong with using csv files for storing small collections of records. A database will start to come in handy if you ever want to store large amounts / perform complicated queries on your data.
A nodejs application would work. Many existing tools use a locally hosted web server to provide some kind of ui. As long as the server never exposes itself to the internet (i.e. only bound to localhost) - you will be fine.
NodeJS has the expressJS library which will take care of generating templates, starting the server etc.
The "backend" of a website encompasses its database and the code that interfaces with it. e.g. an Express API (written in Javascript run via Node.js) that exposes REST endpoints for performing CRUD (Create Read Update Delete) actions against a database would be considered "backend" work. You can think of "frontend" as the presentation aspect of a website - the manipulation of data into a presentable and viewable form. The "backend" encompasses the processes by which that data is obtained and interfaced with in the first place.
Other backend or server-side technologies (aside from Node.js) include Java, .NET, PHP, Ruby, Python, etc. Most languages have a web framework either built into them or installable via a package manager. In the case of Javascript, since the language was designed to be run within the context of a web browser, we have a runtime that allows our servers to interpret Javascript as well - that's Node.js and V8.
Here's a helpful blog post https://blog.bloc.io/frontend-vs-backend-web-development/
Just a basic Express app that runs on the same server as the database, and that connects to the database. It would have one GET route for each set of data you need.
Depending on your specific requirements, it probably wouldn't have to be much more than this.
app = express(); app.get('/data', function(req, res){ db.query('SELECT whatever your query is', function(err, result){ res.send(result); }); });
Be sure to implement authentication though, at least using a token header, otherwise everyone would be able to just access the data (unless that wouldn't matter, if it's a free to use public application then authentication would be less of an issue). But there are modules on npm for authentication so it's pretty easy to implement.
EDIT: if you don't know Express -> http://expressjs.com/
Nice. Actually, I'm slightly sure. I'm used to NodeJS where when you're writing servers, you do want an event loop to handle requests when they come in, so naturally you have to use some concept of observables. In Node, almost everything is an Observable, and an event loop actually helps with reasoning about code. Communication between observers isn't too bad, but in Node you always can register new observers (event callbacks) on observables (event emitters). I was just wondering if Haskell had any library like that, especially something like Express that has a nice API to write webservers.