I am an aspiring developer. I have cloned Emilio Quintanas Servitodo APP into my own repository. I downloaded the repo, and used gh-pages with npm to build and deploy the APP, but the links are not working.
When my homepage is jsitges.github.io/ I get the error "no shallow build allowed" but when I build to jsitges.github.io/servitodo the paths to the app are not configured correctly.
https://github.com/jsitges/servitodo
I may have the same problem as posted in this question, I will try later today, but to me that is the most obvious solution so far.
I am assuming I have a question regarding history, the solution to that:
git clone <git_url>
delete the .git repository from your folder. Which will delete all your history.
The you can do a
git init
which will create an entirely new git project for you.
This may not be the best way. But this will work . Hope it helps.
So last, is the question of wether this is a valid question at all, The initial challenge was to build an app. TO THIS AVAIL, i copied emilio Quintana's app. But did not include the API part.
NOW I have also cloned the API for his app, but how can I learn how to publish the react app along with it's API. These are the Features he implemented:
React Router to enable client side rendering and optimized performance.
Utilized JSON Web Tokens and localStorage to store encrypted user information client-side.
Developed a Rails API using a PostgreSQL database with endpoints for users, jobs and professionals.
Implemented user interface employing React and Redux with Material UI for styling.
Utilized Stripe Elements to enable credit card payments.
And the Tech Stack he used
React & Redux and Material UI.
What does this mean? tech Stack? I infere what that means, but where can i costumize his app so that I can basically copy its inner workings and have it served from gh-pages.
Thanks in advance.
Related
I know you may find this question idea based, but as I'm newbie to react, I haven't had other places to ask.
I have created a single page react app using create-react-app and exported production version into build directory using the command npm run build.
Due to SEO friendly problems that react apps have, I decided to go with react-snapshot and react-snap but the first one is too old and deprecated and the second one has too many issues in its GitHub repo.
I should mention that I know about NextJs, Gatsby, Cloud pre-rendering and other ways. But I want to deploy my app to a serverless cloud like Vercel.
I wonder what happens if I render the production version in my browser (Lets say Chrome) and export rendered html, js and css into a single static HTML file? Remember that my app is made of several components, but the URL won't change because the whole app is in a single path/route.
I guess there would be some problems in different browsers!
I have found that it is possible to host a NextJs application on vercel. Besides, I went for vps.
Anyway, for future readers, I guess the best decision in my case was NextJs, which is very fast and light in production.
Note: If you find this Q&A useless, just let me know in the comments so I'll delete it.
I have a website which I have developed using Gatsby. I have used WordPress for posting blogs for website and I'm fetching blogs using GraphQL. Everything is working fine, and I deployed the website on S3. After production deployment, when I published a new blog in WordPress, it is not being listed in the website using GraphQL. I had to re-deploy the code to make it working.
Is there any other way to load WordPress GraphQL data in production without rebuild and re-deploy?
What you described is normal behavior. Gatsby is a static site generator so your data is "static" in terms of what is being built at the moment you run gatsby build. If something in the source changes, like publishing a post, you need to rebuild the site to make them available by GraphQL, hence Gatsby.
What you want to achieve is called webhook: an action that triggers another action. Like when publishing a post, trigger a new deploy to force the publishing of that post in a production environment.
You can follow this article for a more approach that suits you.
If you are using Gatsby's v4, you can use the new SSR (Server-Side Rendering) brand feature to serve data from the server or DSG (Deferred Static Generation) for a combined approach, partially static, partially server-side served.
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
I currently have a growing React JS project. Within the project I have a folder for my utils that include business logic and API calls.
The plan is to separate the the web client, the utils and a new react native based app client into three different projects. The web and app client will both make use of the same api calls and business logic.
What's the best way to go about splitting up the current project and how would I link everything? Is an NPM package the way to go or is there a way to do something similar within Github?
TL;DR: What's the best way to separate my utils folder into its own project and using it within my current web project?
You could make an NPM package. That would work. However I found it is easier to use a symlinked folder. It's quicker, simpler, and plays better with dev and debug tools.
The downsides of an NPM package are:
Getting build processes like webpack to work and give you nice source code maps for debugging is a headache.
It's easier to get code-versioning issues.
I'm starting building a react native application for both iOS and Android. I've read through the documentation of react native application, but there is one thing now I do not understand:
Is react-native app fully native application?
They say in react-native, that it would be. Then why am I asking this question? Well, I found the reason to ask the question through https://github.com/Microsoft/react-native-code-push. According to code push, they are able to dynamically update the application. And this is done by updating the javascript part of the application. But wait, if the application is real native app, then in the final version of the app there shouldn't be any javascript, am I right? So how are they doing it? Are they compiling the application at code push servers, and then sending the compiled app to the user or what? This really worries me that the react-native app is really not fully native app.
The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!
Also, the reason I'm doubting this is because they say also in code-push documentation, that they are unable to update the native part of the react-native application:
Note: Any product changes which touch native code (e.g. modifying your AppDelegate.m/MainActivity.java file, adding a new plugin) cannot be distributed via CodePush, and therefore, must be updated via the appropriate store(s).
If the react-native app would be fully native, then in the end, all code should be native code. So I don't really understand why would it be harder to update the native native code, than the code that has been compiled to native?
If you change only code in /src/ folder (JS code) and without adding native modules
you can use CodePush to update your application.
If you change code in /src/ folder (JS code) and add some natives modules, you can't use CodePush to update your application.
You're JS code is compiled and read by native components. That's why you can update the JS layer.
If you take a look into your .ipa file and open main.jsbundle (unminify required) you can see your JS code. example: