In my project I'm using the Microsoft React Redux Template (Microsoft React) with typescript. My problem is I need to keep set of frontend configurations like API base URL ect. I've used a Config.Json file. But when the project is build, every javascript file that referenced the Config.Json file get referenced and copied the content of the .Json file, at the minifying process. So I have to manually go through the each minified .js file and change the configurations when moving from Dev to QA or QA to Prod.
I tried to keep the configurations in a JS file, but still same problem occurs.
Is there a way to stop referencing the Config.Json file at JS minifying process. So that when I change the Config.Json file, the changes of the configurations will get applied.
Maybe you need to use environment variables.
npm i dotenv -D
import configTest from 'config.test.json';
import configProd from 'config.prod.json';
const config = process.env.BUILD_TARGET === 'prod' ? configProd : configTest;
Related
I'm trying to add a variable to my .env file,
so here is the steps I followed
1- I created a .env file in the root directory of the project, under the src directory
2- I added this variable
REACT_APP_BASE_URL='lablabla'
3- I tried to access it from my app.tsx in the same directory (I'm using TS for the whole app)
console.log("lol: ", process.env.REACT_APP_BASE_URL)
And I get undefined at my console
Things I have tried:
I tried to install dotenv and use
require('dotenv').config()
and I ran into a lot of issues, so I decided to remove it as I learned it came out of the box already with react app
under the src directory 2- I added this variable
What do you mean by that?
Create .env file under root directory.
Add this content
REACT_APP_BASE_URL='My-content'
In App.jsx get it this way
console.log(process.env.REACT_APP_BASE_URL);
It's important to start your env variables with prefix REACT_APP_ and once you modify it reload the dev server.
I’m having an issue with Snowpack and CSS modules. When I build the app it creates a .json file with the hashed and non-hashed class names but they are not loaded into index.js and all the classes show as undefined when inspecting the page. When I look at the source I can see an empty object that looks like it should have the JSON in and if I add it manually it works... is there something I need to configure to get this to work or should it just do it after importing the xxx.module.css file?
Additionally is there a way to bundle the css in with the JavaScript so it injects the styles at runtime rather than having a separate css file? Maybe using #snowpack/webpack to bundle them?
Update:
I just updated to the latest version of snowpack and it doesn’t even generate the .json file...
I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:
A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b
The React app's .tsx components will pull from project-a's .ts files.
I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!
When I run the application, Webpack complains:
./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export enum Position {
| Inner = 0,
| Outer = 1
I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?
The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.
Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?
You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.
The type infos you get from external packages is delivered via the .d.ts file alongside the package.
When you import other packages, you always import the Javascript file.
Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript.
But you are trying to import a Typescript file during runtime.
I am new to React CRA (it is rewired as per doc in ant-design description for project setup) and facing issues in adding multiple entry points in webpack-config file.
I have 2 html files in public folder, index.html & stack.html.
-public
-index.html //runs on localhost:3000
-stack.html // runs on localhost:3000/stack.html
-src
-index.tsx
-stack.tsx
-config-overrides.ts
Default html index.html and index.tsx is used to boot and load react components.
I created stack.html file and accordingly i have created stack.tsx file as entry point to boot and load react components. I am unable to wire things up.
What configuration should be made to wire this up.
It is possible to do this, but you will need to eject from CRA. After that:
Add entry to the other html file in paths.js.
Update entry inside webpack.config.js and add the second html file entry (to be similar to the original entry).
Change the output file name inside webpack.config.js. Change static/j/bundle.js to static/js/[name].bundle.js.
Upadte webpack plugins to generate second file with injected JS scripts (also inside webpack.config.js).
Update the ManifestPlugin configuration to include the new entry point (also inside webpack.config.js).
Finally, there are two different steps for development and production.
For DEV, rewrite paths using the following in webpackDevServer.config.js (if you want to redirect all /admin to admin.html file):
verbose: true,
rewrites: [
{ from: /^/admin/, to: '/admin.html' },
],
For Production, this step is different for each provider. For Heroku, it is very easy, just create a static.json file with the following content:
{
"root": "build/",
"routes": {
"/admin**": "admin.html",
"/**": "index.html"
}
}
For full details and file diffs, see this post.
AFAIK, there are no good ways of doing this.
One way is to just use react-scripts and build multiple apps by copying and replacing index.html and index.js for each build. Something like
https://gist.github.com/jkarttunen/741fd48eb441137404a168883238ddc1
Also for CRA v3, there is an open PR for fixing this: https://github.com/facebook/create-react-app/pull/8249
Im trying to use the azure environment variables with my react build. So far I have an appsettings.json file that I load into react with:
import settings from './appsettings.json';
I then have webpack copy the json into build folder which goes to azure. However I think after build the app isnt actually loading the file as I can see some of my variables embedded in the "chunk.js" so its not actually reaching out the the json file in root anymore? Am I importing the file in the wrong way?
C
Two possible solutions:
var json = require('./data.json'); //with path
change your settings.json to settings.js and use module.exports = {} in it.
I believe azure would accept different forms of setting files, not limited to json.