I have a WP site working. It has everything rendered by using PHP files.
Now, I would like to change one page of my site to be based on React. Meaning one page-template that will execute react JS code instead of PHP. Can this be done?
I found that I can user WP-API, and that is great but can It be done in somekind of a hybrid mode?
If so, what do I do with webpack and node_modules? Will I have to navigate to the react template and run webpack run manually? Should I execute npm start on my production site?
I found tutorial showing how to use WP-API as backend server, but the React app is served on its own. I need the react app to be served by wordpress.
Help please
Regards, Ido
This is somewhat complex, but I think it's a two step process
Setup a develop environment for React, this can be done inside a wordpress project, but it would be much simpler to develop it in a side project.
Once you finished developing, you build a production version of your code(I.E, index.min.js) - this is a self contained file that should be a "plug and play". simply including this regular script tag in your page should start working.
The complex part is setting up an ES6 / Babel / React environment inside a wordpress project, but other than that, React will bundle into a browser-ready file that can be used directly inside a browser.
Related
In the Next.js docs, there is a mention of automatic updates:
When you deploy your Next.js application, you want to see the latest version without needing to reload.
Next.js will automatically load the latest version of your application in the background when routing. For client-side navigations, next/link will temporarily function as a normal tag.
I am interested in how this works, but can't figure it out by looking at the Next.js source code. I understand that once an updated version on the server is detected, the client side links become normal <a> tags and so a full page load will occur, allowing the new HTML and new JS/CSS assets to load.
The bit I'm not sure about is how Next.js detects that a newly deployed version is available on the server. What am I missing?
I am working on an shopify app, I am using the shopify app CLI as recommended by Shopify to create and serve the app. What I am finding is page sizes for each Page is too high. I am attaching a screenshot for reference.
This is highly annoying and is making the development very slow. Is this expected, am I missing something, are there any configurations that should be updated.
Continuing further investigation, I created a simple node app from shopify cli, no personal code added, just plain barebone app created by shopify cli, on serving this app in my dev store, I still get heavy page sizes causing time delay to load page (page size is bloated up time to render this empty page is 40~secs and page size is 5.78mb)
There is no documentation on any configuration changes that we need to tweek.
I downloaded these heavy page files to check what is in it, the webpack is somehow bundling all my components in my app js and index js files (repeatedly), its bundling all this unnecessary files causing each page file to bloat up, it would be really helpful if someone from shopify or may be nextjs can point out the configurations I need to update, to change this behaviour.
I'm working on a website on nextjs but the Link component and the router is kinda driving me crazy. When I click on a link it has an horrible delay before accessing the page and then if you use the browser back button the page don't change, just the url.
Here is the link of my site, don't really know what is happening actually.
https://next-madeleine.tmsssss.vercel.app/
It is common for Next.js and other frameworks as well to be slow in development time. As I can see and confirm in your production live website, the links work well, even great. That it because in development there are certain tools and packages being used by Next.js and webpack to compile on-fly the code. Those tools are disabled and removed in a production build of course, and the pages are cached by Next.js.
So, try to run npm run dev and compare it with npm run build, followed by npm run start
NextJS runs getInitialProps, getServerSideProps and getStaticProps every time you link to a page, which might be time consuming. You can skip this by shallow routing your page. Link accepts a boolean prop called shallow={true}.
<Link href='/your-page' shallow>Your Page</Link>
With Next's router.push:
router.push('your-page', undefined, { shallow: true })
Read more about Shallow Routing - https://nextjs.org/docs/routing/shallow-routing
I have started working on an Angular 10 application using DevExtreme UI Widgets. I deployed a demo version in our Azure Cloud but while I was playing with it, I noticed a strange behavior. It seems that I lose my styles when I refresh.
For example, this is how the login page should be displayed:
If I refresh the URL without entering my login credentials, the page changes and gets displayed like this:
When I login, the bad or good styles are carried over. For example, the landing page should be displayed like this:
If I refresh the screen here, I also see the styles being altered. This is how the landing page gets displayed when the styling is lost:
When I lose the styling if I keep refreshing the page over and over again, eventually I regain the styles and my application starts being displayed as intended.
Any idea what causes the styles to be lost? Any suggestion would be greatly appreciated.
Thanks,
Ed
Regarding the deployment of Angular projects, I have encountered various problems. I am willing to share it with you and hope it will help you.
Troubleshooting steps:
Solution 1.
You can deploy it via Azure Pipelines CI/CD without using the vscode to deploy webapp.
Maybe smth wrong with VS Code plugin, as it is in preview
Solution 2.
Use github for continuous deployment. It is recommended to create a webapp and choose the Linux operating system.
Solution 3.
It is recommended to use FTP to publish the build folder after the project npm build.
This issue was resolved. After further investigation, it turns out that the problem had nothing to do with Azure Cloud deployment. I use DevExtreme UI widgets in my application and the application is based on their Angular Template.
I tried the website using Chrome, Edge and Firefox. The issue described above only happened in Chrome. DevExpress tech support pointed me to this support ticket.
After following the recommendations in the workaround and a redeployment, my app looks fine even in Chrome.
Thanks for everyone trying to help.
Ed
I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.