I have an existing MVC project built with Yii2 (a PHP framework) which generates and serves HTML pages.
I'd like to write just one complex Component (with 3rd-party modules and a lot of other dependencies) only for a page (generated by Yii2); so it's important to clarify that I don't want to leave all the frontend side to ReactJS and I don't want / can't migrate to a complete frontend app managed by ReactJS.
What's the best way to integrate ReactJS (with its stuff like npm, Webpack, etc)?
Should I write the ReactJS app in a "npm environment", bundle everything and include the "build" static resources into the Yii2-generated page?
For complex scenarios it is better to use "npm stack" to build your assets and create asset bundle to only register files generated by tools like webpack or gulp. Yii tools for compiling and compressing assets works fine for simple cases, but they're very limited when you compare it to tools from npm ecosystem.
You could look how official website of Yii Framework was build: they used yarn and gulp to build frontend assets and one simple bundle to register generated files. The main difference from normal "npm fronted flow" is that they used assets-packagist to install frontend dependencies.
Related
Ideally, it should be able to encapsulate the electron-builder and related webpack parts, only two commands are exposed dev: electron / build: electron
But in fact, the electron-react-boilerplate template is too complicated, and did not need so many functions at first, but this template is to pile all the functions at once.
My generation found a repository https://github.com/nateshmbhat/electron-react-ts-starter, but this directly divided them completely, and did not consider the problem of code reuse. . .
Take a look at generator-react-app-electron on npm (https://www.npmjs.com/package/generator-react-app-electron).
This generator produces a non-ejected create-react-app project that is configured to run out-of-the-box with electron and a few other handy features
It provides start and build scripts that have been configured for running and building electron. Without ejecting. It also provides all essential features to develop an electron app (e.g. splash screen, entry points, ..).
Also you could use this template directly without using the generator: https://github.com/neutrinog/react-app-electron-template
I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.
In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.
I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?
Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.
You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.
CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.
CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.
For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.
I have the following structure:
/ -> root
/react-app -> Reason app (initialized using cli)
/webapp -> gradle app, maven structure with Gradle build file
I am not sure how to build everything so I can:
run server locally so I can debug
make production tar (using the application plugin for example)
Production
The production should look like this:
ktor as a main server
ktor app has API
all react JS/HTML files are also served by ktor
In other words, I would like to serve everything from single web app.
I am aware that I could make 2 separate services - one for react, one for API. But I want to bundle this together into single app.
Local development
Local development should be quick. I was thinking in having separate React and API part for the local purpose only, as that is easier to run locally. But for production I need those two to be served from single app.
What I would like to have
is a single Gradle in the root and having modules. While ktor can be a module, I am not sure how to operate with react module.
I'm not sure about the Kotlin and Ktor parts, but on the Reason/React side I'd recommend Parcel to bundle your HTML/JS/CSS assets into a form suitable for serving statically, and also use it as a development server for fast iteration.
Parcel requires zero config for most cases and you can point it at your entrypoint asset, usually your index.html file in your UI project, and in production builds it will bundle everything (HTML/JS/CSS) inside a dist/ subdirectory ready to be served. Then just point your Kotlin webapp to serve dist/index.html for the / route.
For development builds Parcel will automatically start up a development server at localhost:1234 with auto-reloading. When you're iterating on the UI, the BuckleScript incremental build along with the Parcel reload, should be pretty fast–usually almost instant.
I have started to learn React and now I am a bit confused about different parts of development and deployment.
Does all webpages are bild with frameworks like React or Anguler? Or they are used only for one page web applications? Can I serve React with nodejs server?
Does the method when you build static webpage with js, html, css and serving them with Apache web server is still used in modern world?
I would highly suggest using the React-Create-App utility. And yes, you can use Node.js. In fact, React doesn't force you to use any backend framework. I could pick ASP.NET MVC, Node, Spring MVC, Rails, etc.
https://github.com/facebook/create-react-app
But this tutorial will guide you through creating react apps in development and creating production builds.
When you build in production, you'll end up with a public folder with html files. But in React, you don't create html files, you create .jsx, which is a combination of html-like React tags with JavaScript. They will get transpiled to html, etc during the production build phase. You can then take the build folder and deploy it on an HTTP server, such as Apache.
As I can tell react starter kit (reactstarterkit.com) is intended to be served from node.js and developed further into full stack JavaScript app. Can I use it only for developing pure client side react app?
Yes, but you would need to modify the build process to make it generate static .html pages similar to how it's implemented in react-static-boilerplate by the same author.
You may want to keep all existing build scripts in case you need to switch back to a full-stack Node.js/React app, but just add a support of building only static portion of the site by appending --static flag to the build command (npm run build -- --static or npm start -- --static). With this flag there will be an additional build step which traverses all the routes and generates static .html pages, or if you don't care about SEO it can generate a single index.html page in the root of the build output folder and make your static site serve this page for all HTTP requests.