celestite | Beautifully reactive , server-side rendered Vue | Server Side Rendering library

 by   noahlh JavaScript Version: v0.1.2 License: MIT

kandi X-RAY | celestite Summary

kandi X-RAY | celestite Summary

celestite is a JavaScript library typically used in Search Engine Optimization, Server Side Rendering, Vue applications. celestite has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

Celestite allows you to use the full power of either Vue.js or Svelte reactive components in your Crystal web apps. It's a drop-in replacement for your view layer -- no more need for intermediate .ecr templates. With celestite, you write your backend server code in Crystal, your frontend client code in JavaScript & HTML, and everything works together seamlessly...and fast. Pages are delivered to the client fully-rendered and SEO-friendly (like a traditional web app), but with the power and reactivity of Vue or Svelte taking over once the page has loaded. This means you get the best of all worlds -- clients see lightning fast page loads (since the initial payload is pure HTML/CSS) yet still get the benefit of rich dynamic JavaScript-enabled components the load without stutters or flickers. And your job as a developer is easier: Instead of writing an intermediate view layer (typically .ecr or similar templates) which glues your server code & client code together, you write pure components once with all your server-side data seamlessly blended in. Awesome, right?. [Aside: Celestite (the mineral) is a UV-reactive crystal...see what I did there...that's more commonly known as Celestine, but, hey, that's a much more common project name, so here we are.].
Support
    Quality
      Security
        License
          Reuse

            kandi-support Support

              celestite has a low active ecosystem.
              It has 164 star(s) with 6 fork(s). There are 11 watchers for this library.
              OutlinedDot
              It had no major release in the last 12 months.
              There are 4 open issues and 2 have been closed. On average issues are closed in 157 days. There are 1 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of celestite is v0.1.2

            kandi-Quality Quality

              celestite has 0 bugs and 0 code smells.

            kandi-Security Security

              celestite has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              celestite code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              celestite is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              celestite releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.
              celestite saves you 4 person hours of effort in developing the same functionality from scratch.
              It has 13 lines of code, 0 functions and 24 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed celestite and discovered the below as its top functions. This is intended to give you an instant insight into celestite implemented functionality, and help decide if they suit your requirements.
            • Logger middleware .
            Get all kandi verified functions for this library.

            celestite Key Features

            No Key Features are available at this moment for celestite.

            celestite Examples and Code Snippets

            No Code Snippets are available at this moment for celestite.

            Community Discussions

            QUESTION

            How to properly run gatsby with SSR in a production environment
            Asked 2022-Mar-14 at 14:03

            I have trouble finding any useful documentation on how to properly set up a gatsby side that is using SSR (server side rendering) in a custom production environment (not Gatsby Cloud or Netlify)

            In their documentation for SSR there's a section

            Server-Side Rendering requires a running NodeJS server. You can put NodeJS running gatsby serve behind a content delivery network (CDN) like Fastly, however that also requires additional infrastructure (like monitoring, logging, and crash-recovery).

            So my general idea would be to put this all inside some Docker container and run gatsby serve

            However according to the documentation for gatsby serve (https://www.gatsbyjs.com/docs/reference/gatsby-cli/#serve )this is not supposed to be used for production

            At the root of a Gatsby site, serve the production build of your site for testing

            Is it ok to use serve production? What kind of security issues do I need to keep in mind when using it? Is there a detailed documentation how to set this up in a custom environment?

            ...

            ANSWER

            Answered 2022-Mar-14 at 14:03

            No docs on the SSR mode on custom servers. But in general you'd want to use something like Express to serve the static files (not gatsby serve) and then you can look at gatsby-plugin-netlify and gatsby-plugin-fastify for inspiration as they support SSR.

            The serving and runtime SSR logic you’d have to write yourself using those plugins I mentioned as inspiration. The framework doesn’t handle the serving of the app, platforms like Gatsby Cloud and Netlify do. Or in your case, a custom server.

            You might find this useful https://github.com/wille/gatsby-plugin-express Should also know there are lots of super easy ways to deploy (Gatsby Cloud, Netlify, Vercel) so you don’t need your own server. The reason you can’t use serve command is things like caching, redirects, headers, etc.

            Source https://stackoverflow.com/questions/71435583

            QUESTION

            503 ERROR The request could not be satisfied (AWS Amplify)
            Asked 2022-Mar-12 at 05:29

            I have deployed a Next.js server side rendering app on AWS Amplify. I am new to AWS and don't know exactly why I am encountering this error. I have read so many articles and documentations but I am unable to solve this issue.

            I am using getServerSideProps to get params and props from API etc. On Vercel and Netlify, my app is running fine but I am getting errors on Amplify AWS.

            My app is loading static pages, but giving me an error on dynamic pages. E.g. www.example.com/test-1

            Here test-1 is a dynamic route "/:id"

            The error I get:

            503 ERROR The request could not be satisfied. The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

            I know this error is specifically towards permissions, but I don't know how to configure them.

            ...

            ANSWER

            Answered 2021-Oct-10 at 06:10

            The problem was with my Lambda functions they were defined for my application and some of them were unrecognized fixing them and giving permissions to the user is the only solution.

            Source https://stackoverflow.com/questions/69414312

            QUESTION

            How to enable cache for getServerSideProps?
            Asked 2022-Mar-03 at 10:24

            We have few pages and components as server side rendering.

            We were trying to use cache for few API responses.

            ...

            ANSWER

            Answered 2022-Mar-03 at 08:31

            You can set the Cache-Control header inside getServerSideProps using res.setHeader.

            Source https://stackoverflow.com/questions/71333002

            QUESTION

            Page data from page-data.json for the failed page "/"
            Asked 2022-Jan-26 at 18:01

            I get this error when I run gatsby build. I have not used "document" in my code. Can someone explain what this means?

            ERROR

            Page data from page-data.json for the failed page "/": {
            "componentChunkName": "component---src-pages-index-js", "path": "/", "result": { "pageContext": {} }, "staticQueryHashes": [] }

            failed Building static HTML for pages - 2.990s

            ERROR #95312

            "document" is not available during server side rendering.

            ...

            ANSWER

            Answered 2022-Jan-26 at 18:01

            The reason why this issue appears is because somewhere in your code you are using document global object and, because gatsby develop is rendered by the browser, where there are window and document global objects, it compiles, however, when you run gatsby build, the code is compiled in the Node server, where there's no window or document variables because they are not even defined yet, they are client-side variables parsed in the SSR (Server-Side Rendering).

            This is an extreme reduction of what's happening, you can find a more detailed explanation in Debugging HTML Builds docs.

            To fix/bypass this issue, you only need to add the following condition where you are using document object.

            Source https://stackoverflow.com/questions/70852052

            QUESTION

            Element type is invalid: expected a string, using JSX to define a component
            Asked 2022-Jan-25 at 18:41

            Just following some basic guides and got issues already. I can't see the problem with the below code but i'm getting the error:

            Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Navbar.

            Can someone point where i'm going wrong please? Will use server side rendering some point but for now i'm just trying to get the design and layout done.

            ...

            ANSWER

            Answered 2022-Jan-25 at 18:41

            correct your Link import

            Source https://stackoverflow.com/questions/70853728

            QUESTION

            How to avoid API duplication when fetching data with nextjs?
            Asked 2021-Dec-29 at 19:45

            I have a route that I may call either from server side rendering, or from client:

            ...

            ANSWER

            Answered 2021-Dec-29 at 16:16

            The proxy you have set up in next.config.js is only relevant for client-side requests. For requests initiated on the server (like inside getServerSideProps) you should directly call the external API.

            Given the APP_API environment variable is not exposed to the browser (it's not prefixed with NEXT_PUBLIC_), you could use that as a condition to either use the direct API endpoint on the server, or point to the proxy endpoint on the client.

            Source https://stackoverflow.com/questions/70518242

            QUESTION

            In Next.js, How to Redirect page in axios interceptor?
            Asked 2021-Dec-05 at 10:55

            I want to redirect page in axios interceptor.

            However, when server-side rendering, I can't access to server side context in axios interceptor. So I try to use next/router. but it only works in client side.

            How can I this?

            Below is the function executed in the axios interceptor.

            ...

            ANSWER

            Answered 2021-Dec-05 at 10:55

            It is hard to give an answer without seeing your actual implementation of getServerSideProps or getStaticProps, but this might help. Your interceptor should probably throw a custom error you can identify in those methods and then use Next.js redirects

            Source https://stackoverflow.com/questions/70208397

            QUESTION

            Why React needs to check if the node is root before rendering?
            Asked 2021-Oct-19 at 03:35

            I am learning about React internals from a talk by Paul O’Shannessy "Building React from scratch"

            In "7:29" before explaining how rendering process work, he added these few lines of code which i really couldn't understand

            ...

            ANSWER

            Answered 2021-Oct-19 at 03:35

            React app will be initialized in DOM with the code below.

            Source https://stackoverflow.com/questions/69621531

            QUESTION

            Vue.js prefetch data with client side rendering
            Asked 2021-Oct-14 at 12:54

            I know about ssr (server side rendering) in Vue, such as nuxt. It grabs data in serverPrefetch() function and renders content on server side, only after then the request is returning data to user and he is starting to download app.js.

            But can we start loading data from backend immediatelly after user request, not waiting for download of vue script, and not stalling request before all data is loaded. So user is downloading app.js, while our server is doing work with sql requests and forming response.

            ...

            ANSWER

            Answered 2021-Oct-14 at 12:54

            As long as Nuxt is concerned - you can find a pretty good summary on the SSR (and client-side) options available in the following article. Spoiler alert - I think SSR is still the best shot with what you are trying to achieve. In the Nuxt world - NuxtServerInit and AsyncData are the men for the job.

            Say you decided to stay away from SSR - what options do you have?

            1. Have some super lightweight js loaded and ran before the Vue application that would fetch the data and share it with the app somehow (e.g. - saving it to the local storage). Would it really provide a speed advantage? I really doubt it, especially considering how fast the Vue app could load when cached in the client browser.

            2. Dump the backend data into the server response itself. I mean, you could prefetch all the heavy stuff and stick it into your page as a json encoded object. That would save some time for initial requests for sure, but then - how large is that data chunk? Wouldn't it make the initial load too heavy, destroying the initial purpose? Those are the questions you should answer based on your particular use case.

            Source https://stackoverflow.com/questions/69570413

            QUESTION

            How to use Gatsbys wrapPageElement with Typescript in a local plugin?
            Asked 2021-Oct-13 at 19:34

            I'm trying to create a new Gatsby plugin. I started with developing it as a local plugin. In this plugin I want to provide a wrapPageElement for server side rendering and during runtime, so I've create the following configuration files:

            gatsby-ssr.js:

            ...

            ANSWER

            Answered 2021-Sep-28 at 04:29

            It seems to be unresolved (yet) according to this GitHub thread, where apparently types are not properly exported by Gatsby.

            As a hacky workaround you can try:

            Source https://stackoverflow.com/questions/69351769

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install celestite

            (Note: This is a bit more manual than I'd like. Automation to come.). Celestite has been developed / tested with the Amber web framework, but designed to work standalone as well. There's also no reason it won't work with Lucky, Kemal, etc. (but no work integrating with those has been done yet.). This adds the celestite_render macro and sets up the @vue_context and @sapper_session objects (these objects serve the exact same purpose, but they're named according to the convention of their respective underlying frameworks). An example is provided. Vue and Svelte have slightly differnet options, so customize/uncomment the config file as-needed. You can name this file whatever you want, just so long as it gets called upon initialization.
            These steps are only needed if you're using Vue as your rendering engine. Otherwise, skip to the Svelte section.
            Svelte has a notably simpler installation process, thanks to the hard work of the Sapper project, on which this is based. They did a lot of the heavy lifting for us!. This is because of a slight hitch with how Sapper works behind the scenes, but essentially: the client needs to be able to access the relevant JS files in /client, yet Sapper needs complete control over that directory (it wipes it with each new build). So we simultaneously give it its own directory and also make it available via the root path.

            Support

            This has been a solo project of mine and I would love nothing more than to get feedback on the code / improvements / contributions. I've found by far the best way to learn and level-up development skills is to have others review code that you've wrestled with. That is to say, don't hold back. Report things that are broken, help improve some of the code, or even just fix some typos. Everyone (at all skill levels) is welcome.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
            CLONE
          • HTTPS

            https://github.com/noahlh/celestite.git

          • CLI

            gh repo clone noahlh/celestite

          • sshUrl

            git@github.com:noahlh/celestite.git

          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Consider Popular Server Side Rendering Libraries

            Try Top Libraries by noahlh

            svelte-dash-docset

            by noahlhJavaScript