This question already has answers here:
NextJS environment variables aren't working
(2 answers)
Closed 1 year ago.
I'm building a movie recommendation app and I'm trying to fetch over an Url that is defined on my .env.local file, however it seems that none of my components can access environment variables, but index.js and _app.js can. Is there any solution?
Edit: I don't know if this matters, but both my "pages" and "components" directories are on the same folder alongside the .env.local file.
You must use the prefix NEXT_PUBLIC_ if you want to access env variables from the client. Please checkout the documentation for more info: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
Related
This question already has answers here:
Is it possible to import modules from all files in a directory, using a wildcard?
(14 answers)
Closed 22 days ago.
I have a "Components" component and a "components" folder.
I want all the components in the folder to be automatically imported into "Components" for reuse. "Components.Button"
It's real?
I found the answer. This can't be done by default, but there is a good npm package for babel https://www.npmjs.com/package/babel-plugin-wildcard
This question already has an answer here:
How to install Next.js Tailwind explicitly with .js?
(1 answer)
Closed 10 months ago.
I was following a tutorial, to set up and create an react.js + tailwindcss app, I (and the tutorial maker) used.
npx create-next-app -e with-tailwindcss [app name]
the files and all are created but instead of getting javascript files (index.js etc) I get it in typescript (index.tsx).
(his)
(mine)
I read the next.js documentation and it said that if I wanted a TypeScript file I should add the --TypeScript flag to the command, which I didn't, yet still got the TypeScript files.
I followed the video and I didn't make anything different from his, so I'm wondering what did I make wrong and how to fix it.
Sorry for using any wrong tags I really don't know what I should've used.
You did nothing wrong. The example with-tailwindcss was recently converted to TypeScript. You can read about the decision in the corresponding pull request
This question already has answers here:
angular-cli how to add global styles?
(14 answers)
Closed 11 months ago.
I wanted this file to be the global styling sheet. But I don't know how to make a component reference it. Angular set-up here
Here is my component:
You can easily create components using angular cli, run the below command in the terminal where your project is located.
Command : ng generate component component_name
You can also check out this link
angular-cli how to add global styles?
This question already has answers here:
Typescript cannot find name window or document
(3 answers)
Closed 2 years ago.
I have a TS project that uses Node, express, and handlebars. I also have some client-side JS that it uses with no problem. (Clarification: not using react, angular, vue, or any other client-side framework at the moment.)
I was looking into moving the client-side JS into TS as well. My Hello World example tries to use alert (literally alert("Hello World");) but won't compile (error: error TS2304: Cannot find name 'alert'.). Should be a simple enough, I just need to discover the module to import into the file (or the dependency to add to my package.config) to make core client-side JavaScript function available.
I can't seem to find the reference for how to do this (outside of a wealth of library-specific examples in angular, react, etc.).
So what dependency and/or import am I looking for to expose core client-side JS functions and the like to my TS project?
Ah.
The "lib" property of my tsconfig only included es2017. Added DOM and that fixed it.
This question already has answers here:
How can I securely store the IP address, username and password of a database using Node.js?
(2 answers)
Which is the best way to store sensitive credentials in Node.js?
(2 answers)
Closed 9 months ago.
I have used express-generator to create a skeleton website and a template to work on. I do not know where to store sensitive information such as Data_config key, JWT secret, Connection URI, etc. Is there a workaround?
This is my current file tree. ./bin/www has the main server.js
I have previously used the dotenv package, but this is the first time I am using express-generator. I tried the same procedure by adding a .env file, and requiring dotenv by require('dotenv').config(), but it gives me an error.
A good practice regarding environment variables is storing them in an environment (.env) file, which in Node.js you can access using the dotenv npm package.
This allows to avoid pushing sensitive data to versioning systems like Git or SVN and adds flexibility to use several instances of an application, which can represent ease of deployment and configuration for development pipelines.
dotenv in npm: https://www.npmjs.com/package/dotenv
You can include sensitive information at startup using environment variables. Start your application with the command below (or edit your startup script if you have one):
JWT_SECRET=secret node index.js
The JWT_SECRET variable can now be accessed in your application using the following code:
const JWT_SECRET = process.env['JWT_SECRET']
This will allow you to include your sensitive data in a startup script rather than being hard coded in the application. You can include multiple variables on startup as well. For example:
JWT_SECRET=secret CONNECTION_URI=http://localhost node index.js