Vite SSR for React in NX workspace

Why not use @nrwl/react:setup-ssr Yea, NX has a react plugin can set up SSR for your react application. It does works well. But the dev server is not smart though. It use the @nrwl/webpack:ssr-dev-server executor, it support browser build target and server build target and wait until both build target completed and then run the server main.js via node. It does watch the files but it always restart the server even if you just edit frontend part. It does not support Hot Module Replacement (HMR).

Post, Code and Quiet Time. Vite SSR for React in NX workspace By Errong Leng – 08 Feb 2023 – View online → Photo by engin akyurt / Unsplash Why not use @nrwl/react:setup-ssr Yea, NX has a react plugin can set up SSR for your react application. It does works well. But the dev server is not smart though. It use the @nrwl/webpack:ssr-dev-server executor, it support browser build target and server build target and wait until both build target completed and then run the server main.js via node. It does watch the files but it always restart the server even if you just edit frontend part. It does not support Hot Module Replacement (HMR). But you can still use this plugin to set up React SSR skeleton for your app. Why Vite? Lightning Fast HMR Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen. Vite provides built-in support for server-side rendering (SSR). Though The Vite playground contains example SSR setups for React. The example works well but requires a few migration if you want adding it into a NX workspace. In this post, I will tell how I accomplished to make Vite SSR for React work in NX. Vite SSR with build via webpack Vite Dev Server serves a static web app very well. But it does not work out for SSR. In order to server a SSR app, you need to run your app via node. NX has a "@nrwl/js:node" executor. I was thinking to run a dev server using @nrwl/js:node but point to @nrwl/vite:build as the buildTarget. It fail due to schema not match, I raised a issue and hope it can be addressed by Vite NX plugin soon. webpack build target for React SSR. I intented set "watch" option to false, Since Vite Dev Server support HMR for frontend. In case you change any server side code, you have to restart the "ssr-serve" target. index.html changes to use Vite Dev Server all external css files please @import in src/styles.css and it needs to be linked in index.html. The main render function for frontend needs to be loaded as a Javascript module. These are for Vite Dev Server, if you use webpack for production build, then you don't need link styles.css and main.tsx in the index.html, since webpack will inject them for you automatically. <!--app-html--> is the placeholder for SSR rendered string. Vite SSR Set up use Vite Dev Server as middleware please note the root of Vite Dev Server should be the folder where the vite.config.js located. server the index.html via ssrLoadModule and your SSR mechanisam. Vite SSR for React in NX example project GitHub - lengerrong/nx-vite-ssr-react-app Contribute to lengerrong/nx-vite-ssr-react-app development by creating an account on GitHub. GitHub•lengerrong You can clone the code and play in your local. Whenever you make change to your frontend part, it will do hot module reload update quickly. References Vite Next Generation Frontend Tooling Vite Post, Code and Quiet Time. © 2023 – Unsubscribe

How to migrate Oracle database to Microsoft SQL server database

Oracle migrate to SQL Server SQL Server Migratin Assistant is a free tool that Microsoft provides to automate database migration to SQL Server. I tried to use recently but gave up finally. Since it not support connection to your database server via custom JDBC url which is usually used by most backend java application. DBeaver: one tool for all data sources I've googled for days trying to find any open source alternatives. Fortunately, I found DBeaver. You can download DBeaver Ultimate and

Post, Code and Quiet Time. How to migrate Oracle database to Microsoft SQL server database By Errong Leng – 07 Feb 2023 – View online → Photo by Melvin / Unsplash Oracle migrate to SQL Server SQL Server Migratin Assistant is a free tool that Microsoft provides to automate database migration to SQL Server. I tried to use recently but gave up finally. Since it not support connection to your database server via custom JDBC url which is usually used by most backend java application. DBeaver: one tool for all data sources I've googled for days trying to find any open source alternatives. Fortunately, I found DBeaver. You can download DBeaver Ultimate and try a 14 days free trial. It just met all my needs. All you need to do is 3 steps: 1. connect to both source and target database 2. select the tables you want to migrate from source database 3. right click and select 'export data' menu and complete the rest References DBeaver Ultimate DBeaver Ultimate is a full-featured toolkit for database management that also provides easy access to AWS services: integration with AWS user and permission management, connection to AWS databases in a few clicks. DBeaver SQL Server Migration Assistant - SQL Server Learn about SQL Server Migration Assistant, a tool that automates database migration to SQL Server from Microsoft Access, DB2, MySQL, Oracle, and SAP ASE. Microsoft Learn•cpichuka Post, Code and Quiet Time. © 2023 – Unsubscribe

How to Set up Mailgun configuration to email newsletters for your Ghost blog

This is a step by step blog to guide you how to set up Mailgun sending API keys for your domain and set it up in your self hosted Ghost blog. Setup Sending API key in Mailgun login into your Mailgun account, go through the menu steps: Dashboard -> Sending -> Domain settings -> Sending API keys Click 'Add sending key' Input a simple description and click 'Create sending key' Copy the Sending API key into clipboard Ghost Email Newsletter Setting Copy the API key you just created and paste

Post, Code and Quiet Time. How to Set up Mailgun configuration to email newsletters for your Ghost blog By Errong Leng – 07 Feb 2023 – View online → This is a step by step blog to guide you how to set up Mailgun sending API keys for your domain and set it up in your self hosted Ghost blog. Setup Sending API key in Mailgun login into your Mailgun account, go through the menu steps: Dashboard -> Sending -> Domain settings -> Sending API keys Click 'Add sending key' Input a simple description and click 'Create sending key' Copy the Sending API key into clipboard Ghost Email Newsletter Setting Copy the API key you just created and pasted as Mailgun Private API key. Select correct Mailgun region and Input Mailgun domain. PS: please don't include https:// for your domain. Just put the value you have on your Mailgun dashboard. I smartass added  some prefixes  that caused this setup to be stuck there for days.:( References: Why do I have to set up Mailgun for newsletters? Sending bulk email to many recipients using SMTP is not supported. In order to send newsletters from Ghost you’ll need to setup Bulk Mail with Mailgun. Ghost - The Professional Publishing Platform Configuration - Adapt your publication to suit your needs Find out how to configure your Ghost publication or override Ghost’s default behaviour with robust config options, including mail, storage, scheduling and more! Ghost - The Professional Publishing Platform Email Newsletters — Ghost Developer Docs Sites using the Members feature benefit from built-in email newsletters, where all posts can be delivered directly to segments of your audience in just a few clicks. Ghost - The Professional Publishing Platform Post, Code and Quiet Time. © 2023 – Unsubscribe

cy.request with FormData and QueryString

correct FormData snippet please pass form: true and with the payload as body rather than use FormData cy.request({ url, method: "post", headers: { Authorization: "Basic xxx", Accept: "*/*", "Cache-Control": "no-cache", "Accept-Encoding": "gzip, deflate, br" }, form: true, body: { "xxx":"yyy" } }).then((response) => {}) I tried create a FormData object and past it as body, but didn't work. correct QueryString snippet please pas

Post, Code and Quiet Time. cy.request with FormData and QueryString By Errong Leng – 18 Jan 2023 – View online → Photo by Ampersand Creative Co. / Unsplash correct FormData snippet please pass form: true and with the payload as body rather than use FormData cy.request({ url, method: "post", headers: { Authorization: "Basic xxx", Accept: "*/*", "Cache-Control": "no-cache", "Accept-Encoding": "gzip, deflate, br" }, form: true, body: { "xxx":"yyy" } }).then((response) => {}) I tried create a FormData object and past it as body, but didn't work. correct QueryString snippet please pass qs with a JSON object rather than use URLSearchParams cy.request({ url, method: "post", headers: { Authorization: `Bearer ${access_token}`, }, qs: { "parametername": "parametervalue" } }); I tried create a URLSearchParams  object and past it as qs, but didn't work. cy.intercept won't work if the request not send by browser or send via cy.request the below code will not work. the wait for the request alias will timeout with error: expect request of url but never occurred. const url = "your api" cy.intercept(url).as("yourapi"); cy.request(url); cy.wait("@yourapi"); Post, Code and Quiet Time. © 2023 – Unsubscribe