I have a react application using the MERN (mongo, express, react, node) stack on heroku.
I have some environment variables stored in Heroku that get read into the root of my project. However the actual react application is nested within a folder of the project. Here is the file structure
.
├── client (react app)
│ ├── node_modules
│ ├── package.json
│ ├── public
│ └── src
├── controllers
├── routes
├── models
├── server.js
├── node_modules
├── package.json
└── .env
My environment variables are named REACT_APP_AUTH0_CLIENT_ID, REACT_APP_AUTH0_DOMAIN, and REACT_APP_MONGODB_URI. These environment variables are available in the server.js file at the root of the project. However they are not available in the client folder (my react app). How can I set this up so the environment variables from Heroku flow through the entire project?
FYI if I add a .env file within the client folder I can access those variables. It seems like react is unable to access environment variables outside the actual react application.
Here is what I have in the package.json at the project root:
Any help would be greatly appreciated!
Related
I have a nx Next.js app within my workspace, I'm using styled-components so I created a styled.d.ts file for the type declarations of my theme, as describe on the docs. I placed it on the root of my app and works as expected:
workspace
└── apps
└── app
└── styled.d.ts
But now, I created a components library and want to use my theme type definitions over there, so I copied styled.d.ts to libs/:
workspace
├── apps
│ └── app
│ └── styled.d.ts
└── libs
└── components-library
└── styled.d.ts
This works and I have my theme type definitions both on the app and on the components library, but I'm duplicating the file. I tried placing it on the root of the workspace but did not work.
Any ideas on how to share styled.d.ts without duplicating it?
We are also using styled components with a types declaration file. To use it across multiple apps and libs we have created a folder types on the root level. Inside there we place the declaration files. For example types/styled-components/index.d.ts.
Next go to your tsconfig.lib.json and tsconfig.app.json. Inside extend the files section for the new types:
"files": [
"...",
"../../types/styled-components/index.d.ts",
],
I am creating a personal project in TypeScript. It should be a library that exports React components and TypeScript functions. The idea is therefore to publish this library on npm in the future.
There is also a demo page within the project and this is where I would like to use Storybook to test React components.
This is the structure of the project:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
I have read the Storybook documentation and it recommends to install Storybook by running npx sb init. I tried but the problem is that the stories are put in the project src directory, not in the demo page:
.
├── demo/ # demo page
│ └── Home.tsx # where I would like to use Storybook
│ └── index.html
│ └── index.tss
│ └── style.css
├── dist/ # distributable version of app built using Parcel
├── node_modules/ # npm managed libraries
├── src/ # project source code
│ └── lib/ # folder for your library
│ └── myFuncion.ts # function to export
│ └── MyComponent.tsx # react component to export
│ └── stories/ # Storybook <<---
│ └── index.ts # app entry point (it simply contains the exports of myFunction and myComponent)
├── .eslintrc.js
├── .gitignore
├── package.json
├── tsconfig.json
├── ...
And the storybook script that is created is this:
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
but I would like something like:
"scripts": {
"storybook:demo": "start-storybook -p 6006",
"build-storybook:demo": "build-storybook"
},
So how can I install and use Storybook only on the demo page?
Looks like you're ultimately trying to have multiple source directories. This is supported by both TypeScript and Storybook, it just needs a bit of configuration.
tsconfig.json should have the include option set to:
"include": [ "src", "demo" ]
This tells TypeScript (or its Babel loader) to compile files in src and demo.
.storybook/main.js should have the stories option set to:
stories: [
'../demo/**/*.stories.mdx',
'../demo/**/*.stories.#(js|jsx|ts|tsx)',
],
This specifies which files should be interpreted as stories and in our case it would load *.stories.mdx/js/jsx/ts/tsx recursively from the demo folder.
Also note that the stories folder is just an example folder created by Storybook and you can safely delete it. Stories can be in any of the directories processed by TypeScript as long as it matches the patterns specified in .storybook/main.js.
You can even have multiple Storybooks with multiple configs in a single project, but that may not be what you're after. Just in case, though, the command would be start-storybook -p 6006 -c path/to/config/.storybook
If I understood correctly, you want to build a components library and have demo app for your components.
I don't think there is a way to use Storybook in an existing app. This would mean you would have to build your demo app and use some components from Storybook to show case components in your app. To my knowledge this is not possible. It might be, but it seems complicated and I don't know of any docs on this.
I think the Storybook app is (or should be) your demo app.
Storybook can render mdx files so you can add any content to it and get a demo app.
What you could try:
Move your demo app content and component stories to the demo folder
Migrate Home.tsx to a mdx file
Change Storybook's config to load stories from '/demo`
To a degree, you can change Storybook's styling and "make it your own" and this can become your demo app.
Until I discovered Storybook I used a home-made components show case app with react-live. Might want to take a look at it but I think Storybook is is better and easier to maintain.
I am just starting out with Reactjs. The default code in the App.js file has the react logo. On inspecting the img tag for this logo in the browser, I see the following src url.
<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">
But I dont find the "/static/media/" path anywhere in my local project directory, and I don't find the file 'logo.5d5d9eef.svg' anywhere either. Where is this image being served from?
This logo you are seeing is being served from /src/logo.svg.
The static/media/ is being generated from how react builds and shows to the user.
Here is the intial create-react-app structure:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
Here is where you can find some more documentation:
https://github.com/facebook/create-react-app
It mostly about Webpack (which is used by create-react-app). As you can see the original file is named logo.svg. Webpack detects imports like import logo from './logo.svg' and transforms imported files into assets with suffix logo.5d5d9eef.svg. This is needed to make asset names unique. Please read about Webpack first.
I have a Javascript (typescript) project that I am using as a git submodule in a react project (also typescript).
This all works fine... until I make use of any node module in the git submodule. I tried using, for example, the node modules "moment" and "faker", but I am almost certain that it does not have anything to do with these specific node modules.
Importing for example "moment" in the submodule:
import moment from 'moment';
using it:
moment().format('DD/MM/YYYY');
and running the main react project leads to this error:
Failed to compile.
./src/project_core/node_modules/moment/moment.js
Line 5:37: 'define' is not defined no-undef
Line 5:50: 'define' is not defined no-undef
Removing moment().format('DD/MM/YYYY'); solves it.
If I just run some tests directly in the submodule and make use of for example "moment", it always works. I can use the node modules. It looks like something goes wrong once the main project uses the node modules in the git submodule.
This is how my react project looks like. As you can see the submodule project_core is added in the src folder of the main project.
├── build
│ ├── assets
│ └── static
│ ├── css
│ └── js
├── node_modules
├── public
│ └── assets
└── src
├── project_core
│ ├── node_modules
│ ├── src
│ └── tests
├── ui
├── api
└── utils
I know... I read everywhere that using git submodules is not recommended. I, however, just want to experiment with git submodules to learn from it.
It looks like you have a node module inside a node module. This probably confuses your bundler and produces the import errors. Try removing the package.json and node_modules from your project core subdirectory and see if the imports work correctly. If you want to make your core directory a library think about actually having it as a npm dependency instead of a submodule. You could still reference a git commit hash in the dependency.
I'll begin by saying that I have no prior GAE experience - I'm trying to get GAE working in IntelliJ 12 but having issues, was wondering if anyone could have a look over what I'm doing and tell me if there's anything wonky here.
Steps:
Create Java project in IntelliJ with JDK 1.7.0_51. Click Next.
Select Web Application > Google App Engine on desired techs page
with path to appengine-java-sdk-1.8.9. Click Finish.
Copy files from appengine-java-sdk-1.8.9/demos/new_project_template/ to project
directory
I now have a main directory structure like:
.
├── COPYING
├── build.xml
├── html
│ └── index.html
├── src
│ ├── META-INF
│ │ └── jdoconfig.xml
│ ├── WEB-INF
│ │ ├── appengine-web.xml
│ │ └── web.xml
│ ├── log4j.properties
│ ├── logging.properties
│ └── org
│ └── example
│ └── HelloAppEngineServlet.java
├── test.iml
└── web
├── WEB-INF
│ ├── appengine-web.xml
│ └── web.xml
└── index.jsp
Running this will run the webserver with the index.jsp in the web directory.
A few questions around this - should there be a 'web' and an 'html' directory? Why are there two WEB-INF directories and should they both be the same? Should I manually edit both of them each time I update one?
If I then follow the instructions at https://developers.google.com/appengine/docs/java/gettingstarted/creating it mentions a 'war' folder - I confess that I'm confused about the 'war', 'web' and 'html' folders - I think somewhere I've also seen referenced a 'www' folder. Do these folder names actually matter?
Following the tutorial I create a guestbook folder within the 'src' folder and make the java file. When I enter the info in the web.xml (both of them) I get an error for the line
<servlet-name>guestbook</servlet-name>
"A field of identity constraint 'web-app-servlet-name-uniqueness' matched element 'web-app', but this element does not have a simple type"
To top that off - guestbook.GuestbookServlet doesn't resolve.
There has to be a simpler way of getting this running in Intellij - can anyone help me?
Unfortunately, IntelliJ does not make this process simple. It seems like they expect you to use Maven to handle a lot of this. But this makes things a lot harder on people trying to get started with GAE on IntelliJ.
Your project is a mess right now. You have combined things that IntelliJ added for your web module with some of the files from the demo projects. So to start, remove your files and remove your web module from IntelliJ.
Now go back to the demo folder that you want to use, it should include the COPYING, build.xml, and a src and war dir. Copy all of those to your project. Then go into project structure->modules and import module. This will allow IntelliJ to detect your web module and avoid creating duplicate files and dirs.
You also need to configure your Application Server under Settings->IDE Settings->Application Servers. Add a Google App Engine Dev Server and specify your SDK directory.
Then go back to your Project Structure->Module->Dependencies and add a Library. Select the Application Server Library that you just defined. If your project uses more advanced features of GAE, you will need to go to Project Structure->Artifacts and add the libraries to your artifact.
Also for the settings on the Artifact, you need to create an 'exploded war' definition that points to your war dir.
There is likely more configuration needed... but I can't think of it all right now. Let me know what you get stuck on next and I can try to help.
IntelliJ IDEA 14 Ultimate has integrated GAE support. How comprehensive this is I'm not totally sure yet. I'll update this answer shortly with more details.
https://www.jetbrains.com/idea/features/google_app_engine.html