I need a React component sharing solution so components that I use in multiple applications keep synced. Let's say I have a TopBar component in 1 app of 10 apps I have, all of the rest apps would get the updated TopBar component. There are solutions like Bit.dev made for this job but, is it possible to do this using Azure Artifacts?
Note: To my understanding, Azure Artifacts is for packages and what I am looking to accomplish is component sharing, these are two totally different.
Azure Artifacts is a universal store for all the artifacts which you can use as part of development and deployment, includes NuGet, npm, Maven packages and Universal Packages.Azure Artifacts manages the dependencies used in your codebase and provides easy tools to ensure the immutability and performance of those components.
In your scenario, you can package your TopBar component as an Azure Artifacts and publish the artifact. Please follow this document to use npm to store JavaScript packages in Azure DevOps Services or TFS.
Related
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 am starting a new project which is a hiring portal so it'll involve minimal business logic and more of forms, data storage and external services.
Considering the fact that I haven't done much with React other than creating a simple hello world app using create-react-app from npm, I was wondering if it would be better to have a separate frontend app that gets all the backend work done through APIs in my .net app, or to simply use React in my views with the necessary jsx files and NuGet packages.
Can we use Build Tools like "WebPack" or "SnowPack" within Azure DevOps for building React Applications?
When you create the build pipeline for your React App, we have provided the template (Node.js with React) for use.
In this template, it has contained the basic tasks to build the React App. You can add other tasks or delete the existing tasks as needed.
For more details, you also can reference this document.
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 have multiple apps (independent of each other) which has let's say the Login state the same in the redux across the apps. The code for Login for both action creators and reducers will be the same. So how can I without copy pasting share the code between the apps?
If you have a frequently used functions, you can isolate those functions into a separate package called core or something like that.
There are some techniques to resolve dependencies to your common functions. If public package is OK, using npm as normal. If private package is a must, one option is using resolve feature of webpack to treat a local repository as a node module.
https://webpack.js.org/configuration/resolve/
So the solution I came up with for this issue was to use Lerna. With Lerna I created a sub-module which was installed as a package for the main app. There are articles available which mention creating a monorepo with Lerna.