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.
Related
I have a huge project using asp.net and jquery. I want to start migrating to react page by page (it might take a lot of time).
I would like to know what is the best practice to do it.
Can I move pages to react partially (for example half of page), and is it good approach?
Lets say I have main page A with with links to page B and C. Can I move page B and C to react, using routing, without moving page A right now?
I think I will use Vite to create and manager react project. In the production vite generates static files so I will simply host new files next to old ones in my backend server.
The problem is with development, because in this mode vite creates new server with functions like hotreload and in the result I have two diffrent servers hosting frontend asp.net and vite.
I would prefer to have just one server also for development. Is it possible to build development version with vite and copy it to server the same way like in production? Is this good approach?
I know that it would be the best to have backend and frontend server separated, but project is so huge that it is not possible in the foreseeable future
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.
I have an existing webapp built on Laravel. I am moving to an Ionic build to create the native version.
How would you suggest I separate my views, and how do I call the routes? Has anyone any example.
Here is what I am about to do:
1. move all my views to the public folder
2. install Ionic in the public folder,
3. Using UI-route & Angular make $http calls to the backend.
Thanks for your input :-)
You can't simply do that.
If you have a "classic" Laravel app with blade templates, what you need to do is to expose an API from it.
Then you create an ionic app in a different directory (they are not related, so you don't have to mix them). You just need to develop your ionic app like any other ionic app. Then in your factories where you do the request to your API, you do something like:
$http.get('https://example.com/api/foo')
Where example.com is the domain of your Laravel application (You are going to need to activate CORS in it).
You just can't simply create an ionic app inside laravel, because that application will be built into an .apk to be installed on the phone and you can't add Laravel inside the package.
So the TL;DR is having your normal Laravel app where it lives, add it some public API so your ionic app can access it and then build an Ionic app from zero that will use that API.
It depends on you, but I prefer to keep the ionic project nested in /public, since I want a single-project app, the sources are clearly separated by being or not in the subfolder, but it helps your productivity, benefits are:
Single source control: Single source set for source version control (GIT, SVN, ...), so when I work I can do a single pull/checkout and push/checkin
Single app to deploy: Single domain, no cross-domain problems, single deploy via FTP is available, any standard php server can handle it with a single and standard account to handle
Coherent project without interdipendencies: I do not want to split logic dependencies of the same model between many projects, when I change something in backend or frontend that involve the other side, I want to have in the same project all the sources to update. It make not sense to have to go to a different project to adjust compatibility, it would be uselessy messy
I have a ready template created with angular.js, it is divided into views, how do I install this directory express, which folders to merge? and how to make that template files do not get lost?
You can configure it in whatever manner you want, but i would suggest you to set up your server side stuffs first. Ensure it is working and then bring in the assets, Angular sources and libs.
To make your development faster, express provides generators, just run this command it will create default set of files for you. Off course you can change the folder structure to the one that suits best to your application.
Once Express it working fine, then embed the client side stuffs, recommended would be to keep it in a separate directory. Most people like to keep folder names client(for client side scripts) and server(for server related scripts).
Most new single page applications are being developed in MEAN stack(Mongo, ExpressJS, AngularJS, MongoDB). There are some interesting seed projects such as MEAN.io and MEAN.js, which i think would be helpful for you in order to setup the project and quickly get started.
Also do checkout grunt and bower.
Grunt is javascript task runner which can help you automate many of your tedious tasks.
I've been playing around with Yeoman and it's pretty great.
I'm wondering how people are integrating the resulting frontend app with backends?
Are you keeping them as separate code bases that potentially run on separate servers?
Are you stuffing the whole directory in a rails public folder and pointing the root route at index.html buried in there?
Up until now I've only ever used helpful gems to integrate backbone or ember into the rails asset pipeline. I could certainly move various files into the assets directory of a rails app but that kinda defeats the purpose of Yeoman.
So far I only used it to make and maintain the frontend app, using ajax to get all the information needed from the backend deployed as another project (web service).